Welcome

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

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

Hover or focus this help icon:

Manually toggle this info tip:

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.