Pens
Small accessibility experiments, worked out in public on CodePen: patterns and components, forms, pairs that show the right way beside the wrong one, and tools for finding my way around WCAG. Each one opens on CodePen with its code. More are on my CodePen profile (opens in a new tab).
Patterns and components
- Accessible “Skip to content” link for desktop and mobile (opens in a new tab)
- Accessible “Sync again” button (opens in a new tab)
- Tab group — automatic activation (opens in a new tab)
- Tab group — manual activation (opens in a new tab)
- Alert (opens in a new tab)
- aria-describedby (opens in a new tab)
- aria-owns and late-mounted descendants (opens in a new tab)
- ARIA demo (opens in a new tab)
- aria-ui (opens in a new tab)
- Accessibility settings (opens in a new tab)
- Type help for shortcuts (opens in a new tab)
- Row and column highlighting with CSS only (opens in a new tab)
- USWDS read-only text input (an alternative to disabled) (opens in a new tab)
- Better USWDS tooltip examples (opens in a new tab)
- USWDS SkipTo token mapping (opens in a new tab)
- SkipTo styles (opens in a new tab)
Forms
Do and don’t
Color and charts
WCAG tools
- WCAG 2.2 checklist with filter and links (opens in a new tab)
- WCAG 2.1 checklist with filter and links (opens in a new tab)
- WCAG quick search, version 2 (opens in a new tab)
- WCAG quick search (opens in a new tab)
- WCAG JSON schema (opens in a new tab)
- WCAG JSON — select guidelines (opens in a new tab)
- WCAG tokens explorer (opens in a new tab)