Projects & code

More than 1,000 people visited the Microsoft Accessibility booth, with 700+ diving into demos and conversations around accessibility and AI.

Google’s web.dev course covers accessibility foundations, WCAG, ARIA, and inclusion practices, giving developers a baseline for daily work.

Helped create the code patterns for Deque's ARIA pattern library and establish it as an educational resource for accessible, tested components.

W3C's introductory web accessibility course, where I serve as a course trainer for the development section.

Living accessibility style guide with reusable components, WCAG guidance, and links to tools, talks, and articles supporting front-end teams.

Accessible AI chat with Wookiee sounds, animations, and themed worlds, plus light/dark modes and controls for motion and audio preferences.

Database searcher for 90FM Trivia that helps teams find past questions quickly, with light/dark themes and playful fish interactions on hover.

Interactive AI prompt generator for A11yTalks with event support, accessible controls, animation, sound, and light/dark modes for live sessions.

CodePen collection of JavaScript accessibility examples covering interactive behavior, semantic state, and inclusive front-end patterns.

CodePen collection of CSS accessibility examples for inclusive styling, visual states, layout systems, and user-preference support.

CodePen pattern used in Google Learn Accessibility testing lessons to evaluate semantic structure and accessible naming in practical scenarios.

CodePen pattern used in Google Learn Accessibility testing lessons to verify keyboard interaction, focus behavior, and logical tab order.

CodePen pattern used in Google Learn Accessibility testing lessons to inspect screen reader announcements and ARIA support in lesson scenarios.

CodePen pattern used in Google Learn Accessibility testing lessons to combine manual and assistive-technology checks in an end-to-end pass.

CodePen pattern demonstrating user-choice color accessibility with prefers-color-scheme, forced-colors, and inverted-colors media queries.

CodePen pattern demonstrating user-choice contrast with prefers-contrast and prefers-reduced-transparency queries for inclusive visual options.

CodePen pattern demonstrating user-choice motion with prefers-reduced-motion and prefers-reduced-data queries to support comfort and performance.

CodePen collection supporting Google Learn Accessibility form lessons with examples for labels, validation, fieldsets, and accessible inputs.

CodePen collection supporting Google Learn Accessibility testing lessons with examples for semantics, keyboard behavior, and assistive tech.

CodePen collection supporting Google Learn Accessibility JavaScript lessons with examples for accessible interactivity and dynamic UI state.

CodePen collection supporting Google Learn Accessibility structure lessons with examples for landmarks, headings, semantics, and page layout.

CodePen collection supporting Google Learn Accessibility animation lessons with examples for reduced motion and inclusive animated experiences.

CodePen collection supporting Google Learn Accessibility color lessons with examples for contrast, color independence, and visual design choices.

CodePen collection supporting Google Learn Accessibility typography lessons with examples for text spacing, font choices, and type scale.

CodePen collection supporting Google Learn Accessibility image lessons with examples for alternative text, decorative images, and SVG handling.

CodePen collection of accessible front-end pattern examples showing inclusive HTML, CSS, JavaScript, and ARIA techniques in practical scenarios.

CodePen collection of intentionally inaccessible examples used to compare barriers with more inclusive front-end patterns and practical fixes.

CodePen collection of exercise prompts for practicing accessible pattern analysis, hands-on testing, and thoughtful markup remediation.

CodePen compares twelve SVG patterns across platforms, browsers, and screen readers to reveal which approaches deliver strong accessibility.

CodePen collection of accessible SVG examples covering alternative text, ARIA labeling, theming, and motion preferences for vector graphics.

CodePen compares accessible button patterns – native buttons, ARIA role overrides, and link-as-button variants – to evaluate reliable markup choices.

CodePen explores accessible link patterns – standard anchors, button-styled links, and skip links – to identify dependable markup for assistive tech.

CodePen compares accessible SVG approaches – inline SVG, img, CSS background, and object – to reveal techniques that deliver consistent support.

CodePen collection of answer examples for accessible pattern exercises, showing corrected markup and behavior for inclusive components.

CodePen demonstrating accessible SVG theming with prefers-color-scheme so light and dark mode variations remain readable and inclusive.

CodePen demonstrating accessible SVG motion handling with prefers-reduced-motion and calmer alternatives for people who limit animation.

CodePen combines prefers-color-scheme and prefers-reduced-motion so animated SVG artwork adapts across light, dark, and reduced-motion settings.

CodePen collection of SVG deep-dive test patterns and results for comparing browser and screen reader behavior across implementation options.

CodePen demo of an accessible bee SVG referenced through an img element and paired with clear, descriptive alternative text for it.

CodePen demo of an accessible bee SVG that supplies its alternative text entirely through a single inline title element in the markup.

CodePen demo of an accessible bee SVG that pairs an aria-labelledby attribute with an inline title element to expose an accessible name.

CodePen demo of an accessible bee SVG that uses both title and desc elements to provide a short name and a longer text description.

CodePen demo of an accessible bee SVG that combines aria-labelledby with title and desc elements for a fully described inline graphic.

CodePen comparing accessible radio group patterns built with native HTML and ARIA so the behavior can be tested across assistive technologies.