Command Palette

Search for a command to run...

Accessibility

Accessibility patterns and best practices for building inclusive user interfaces.
Tab Navigation

Press Tab to navigate through the elements below:

Tabs Component

Use ← → arrow keys to navigate tabs:

First tab content - accessible via keyboard
Focus Ring Styles

Buttons with focus rings:

Input focus states:

Card focus (tab to focus):

Card 1

Focusable card content

Card 2

Focusable card content

Card 3

Focusable card content

ARIA Attributes

Icon buttons with aria-label:

Decorative vs meaningful icons:

Success (icon is decorative)Error (icon is decorative)

Alert roles:

This is a status - politely announced by screen readers
aria-live Regions

Click the button to update the live region (screen readers will announce):

Live region content will appear here
Form with Error Handling

We'll never share your email with anyone.

Must be at least 8 characters.

Skip Link

The skip link below is only visible when focused. Press Tab to see it:

Main Content

This is the main content area. The skip link allows keyboard users to bypass navigation.

sr-only Class

Icon-only buttons with sr-only text:

Screen readers will announce the hidden text for each button.

Additional context for visual elements:

Online(user is currently online)
Offline(user is currently offline)

Tip: Use browser developer tools or a screen reader to verify that sr-only content is properly announced.