Welcome

We provide examples of accessible user interface components—use your keyboard or screen reader to explore them and learn the expected behaviors.

Keyboard Navigation

Move with Tab (forward) and Shift+Tab (back). The focused item should always show a visible focus ring.

Activate controls with Enter or Space (follow links, press buttons, toggle checkboxes). Use Esc to close menus, dialogs, and other popovers when supported.

Within widgets (tabs, radio groups, menus, carousels), use the Arrow keys as indicated in each component’s guidance. On macOS, enable full keyboard navigation in System Settings → Keyboard.

Screen Reader Navigation

Browse/Virtual mode lets you read with Arrow keys and jump by element type (headings, links, form fields). Use quick-nav keys (e.g., H for headings, B for buttons) to skim pages efficiently.

Forms/Focus mode activates when you enter fields so you can type and interact. Press Esc to return to Browse mode. NVDA toggles with NVDA+Space; JAWS can toggle Virtual PC Cursor with Insert+Z.

Expectations: Only visible, current content should be focusable; dialogs trap focus until closed; status messages should be announced. Each component on this site includes specific keyboard and screen reader notes.

Featured Patterns

  • Accordion

    Simple show/hide details with a native control.

  • Tabs

    Keyboard-accessible tab interface per APG.

  • Modal

    Dialog with focus trap and inert background.

Patterns

Accordion

Keyboard-only navigation

  • Press Tab until a question (button) is focused.
  • Press Enter or Space to expand/collapse that section.
  • Use ↓ / ↑ to move to the next/previous question. (Optional)
  • Use Home / End to jump to the first/last question.
  • When a section is collapsed, its content isn’t tabbable (expected).
  • When expanded, use Tab / Shift+Tab to move through links, buttons, or fields inside.
  • If present, the Open/Close all button toggles every section; focus stays on that button after toggling.

JAWS / NVDA navigation (Windows)

  • Stay in Browse/Virtual mode by default.
  • Use B / Shift+B to move to the next/previous button (each question is a button).
  • Or use H / Shift+H to jump between headings for each question.
  • Press Enter or Space on a question to expand/collapse; the reader announces “expanded/collapsed”.
  • Inside an expanded panel, use arrow keys to read line by line, or Tab to jump between interactive elements.
  • Find the Open/Close all control with B; toggle with Space/Enter (JAWS/NVDA announce “pressed/not pressed”).

Breadcrumb

Shows where you are in the site. The current page is not a link; earlier items link to their parent pages (per WAI-ARIA APG).

Keyboard

  • Use Tab / Shift+Tab to move through the breadcrumb links; press Enter to follow one.

Screen readers

  • NVDA (Windows): Press D to jump between landmarks until you hear “Breadcrumb, navigation”, or press NVDA+F7 and choose the Landmarks tab. Then Tab through the links; the last item announces as “current page.”
  • JAWS (Windows): Press R / Shift+R to move between regions (landmarks) to “Breadcrumb”, or use Insert+F7 for the Links List. Tab through links; the last item is plain text with “current page.”

Button

Use for the main action on a page. Press Enter or Space to activate.

Keyboard

  • Tab / Shift+Tab moves focus to the button.
  • Enter or Space activates it and shows an alert.
  • Esc key closes alert and returns users focus to the triggering element (Button).

Screen readers (NVDA / JAWS / VoiceOver)

  • Announces as “button.” Activate with Enter/Space (or VO+Space on macOS). A native browser alert appears.
Chloe the golden retriever at her first visit. She was 8 weeks old.

Accessible accordion, keyboard + SR-friendly.

  • Press Tab until a carousel control is focused (e.g., Prev, Next, or Play/Pause).
  • Activate controls with Enter or Space:
    • Prev / Next moves to the previous/next slide.
    • Play/Pause starts or stops automatic slide rotation.
  • While focused on Prev or Next, you can also use ← / → to move slides.
  • Focus remains on the control you pressed (no unexpected focus jumps).
  • Only the current slide’s content is focusable; hidden slides are removed from the tab order.
  • Hovering the carousel or focusing inside it will pause autoplay (if enabled). Use Play to resume.
  • In Browse/Virtual mode, use B / Shift+B to move between the carousel’s buttons:
    • Prev and Next change slides.
    • Play/Pause starts or stops rotation.
  • Press Enter or Space on a button to activate it. The screen reader will announce the new slide (e.g., “Slide 2 of 3”).
  • Read the current slide’s content using arrow keys, or press Tab to move to interactive items inside the slide.
  • Autoplay (when on) pauses as soon as you focus inside the carousel; press Play to resume.
  • If a button doesn’t activate:
    • NVDA: press NVDA+Space to switch to Focus mode, activate, then press again to return to Browse.
    • JAWS: if needed, toggle Virtual PC Cursor with Insert+Z, activate, then toggle back.
  • When moving into the carousel with the ← / →. Your screen reader announces the new slide as a group (e.g., “Slide 2 of 3”).

Keyboard-only navigation

  • Press Tab to the Open modal button, then press Enter or Space.
  • The dialog opens and focus moves into it. Use Tab/Shift+Tab to cycle through controls.
  • Press Esc to close at any time. Focus returns to the Open modal button.
  • Clicking outside of the modal with mouse or the Close button closes the dialog.

JAWS / NVDA navigation (Windows)

  • Activate Open modal with Enter/Space. The reader announces a modal dialog and the modal label.
  • The dialog is modal: only its content is navigable. Use Tab/Shift+Tab to move between buttons and links.
  • Use arrow keys to read text inside the dialog. The image has concise alt text.
  • Press Esc or activate Close button to dismiss; focus returns to the trigger button.
  • Use Tab/Shift+Tab to move through links.
  • Press Enter to activate a focused link.
  • External links that open in a new tab include hidden text announcing “opens in a new tab”.
  • Button-style links are still real links—Enter/Space activates them.
  • Use Tab to move through links, or Insert+F7 (JAWS/NVDA) to list all links.
  • Activate with Enter. External links announce “opens in a new tab”.
  • Visited links are visibly distinct and remain high contrast.

Sortable table

Demo data table you can sort by each column
Alex Rivera 29 Mango 2022-03-14
Bianca Nguyen 41 Apple 2021-10-02
Carlos Lee 35 Banana 2020-07-18
Dina O’Connor 27 Cherry 2024-01-09
Elijah Patel 33 Orange 2019-05-30
Farah Singh 39 Grape 2023-06-22

Keyboard-only navigation

  • Use Tab to focus a column header button.
  • Press Enter or Space to sort that column. Re-press to toggle ascending/descending.
  • Focus stays on the same header button after sorting.
  • Use Tab/Shift+Tab to move across header buttons or into table cells (If actionable).

JAWS / NVDA navigation

  • Jump to the next/previous table with T / Shift+T.
  • Move cell-by-cell with Ctrl+Alt+←/→/↑/↓. With proper headers, the screen reader announces the cell’s value with its column/row header.
  • JAWS: press Ctrl+Alt+NumPad 5 to re-announce the current cell’s row/column headers on demand.
  • NVDA (fallback when headers aren’t coded): set header associations manually:
    • NVDA+Shift+C = mark current row as column headers (announce when moving down).
    • NVDA+Shift+R = mark current column as row headers (announce when moving right).
  • Tips: keep focus on a header button to sort; the polite status will announce “Sorted by …, ascending/descending.”

Tooltips

Automatic tooltip: Hover or focus this help icon:

Manually tooltip requires Enter or Space to toggle this tooltip:

Keyboard-only navigation

  • Tab to a tooltip trigger (e.g., the “?” icon).
  • Automatic tip: the tooltip appears on focus; press Esc to dismiss.
  • Manual tip: press Enter or Space to toggle; focus stays on the trigger; press Esc to close.
  • Shift focus away (e.g., Tab) and automatic tooltips close.

JAWS / NVDA navigation

  • Use Tab to reach the trigger. The tooltip content is associated via aria-describedby (automatic) or aria-controls/aria-expanded (manual).
  • Automatic tip: on focus, the tooltip is announced. Press Esc to dismiss.
  • Manual tip: activate the button with Enter/Space. Screen reader announces the state change; the tooltip content is available while expanded.
  • Tooltips are not focusable and contain no interactive elements.