A11y & Theme Demo

Demonstrates accessibility patterns and theming with light/dark/system modes.

Theme Selection

Toggle between light, dark, and system themes

Current Theme

Preference: system → Resolved: light

light

Or use the built-in toggle:

Keyboard Navigation

Use arrow keys to navigate between items. Try Tab, Arrow keys, Home, and End.

Keyboard shortcuts:

Focus Visible States

Tab through these elements to see focus rings. They only appear on keyboard navigation.

Notice how the focus ring only appears when using keyboard navigation (Tab), not on mouse click. This is the focus-visible pattern.

Accessible Modal

Modal with focus trap, keyboard dismissal, and ARIA attributes

Semantic Patterns

Correct usage of buttons vs links based on their purpose

✓ Button for actions

Triggers JavaScript action, no navigation

✓ Link for navigation

Navigates to a URL, can be opened in new tab

✗ Anti-pattern

Don't use <div onClick> or <span onClick> for interactive elements. They lack keyboard support and ARIA semantics.