Resonance Logo
Accessibility Training Components

A practical guide to accessible UI components

Explore interactive demos, component anatomy, and expected behavior in a format designed for implementation learning and team training.

Explore components

How to use this site

  1. Select a component from the library below
  2. Explore the interactive demo
  3. Review the component anatomy
  4. Understand expected accessibility behavior
  5. Apply the pattern in your own implementation

Who this is for

  • Frontend developers building accessible interfaces
  • QA engineers validating component behavior
  • Designers understanding interaction and state requirements
  • Accessibility practitioners reviewing implementations
  • Team trainers and onboarding leads

Start with these components

These foundational patterns are especially useful for onboarding and accessibility training.

Core pattern Accordion Learn structure, state, and keyboard behavior in an expandable disclosure pattern. Focus management Modal Explore focus flow, dismissal, and interaction constraints in layered interfaces. Navigation pattern Tabs Review relationships between controls and panels in a compact navigation model.

What every component page covers

Every component page follows the same structure to help teams learn and implement patterns consistently.

  1. Demo

    An interactive example to explore directly in the browser.

  2. Anatomy

    Labeled parts that define the structure of the component.

  3. Accessibility Behavior

    Expected outcomes that support inclusive interaction.

  4. Common Mistakes

    Frequent implementation problems teams should watch for.

  5. Why It Matters

    What breaks when the pattern is implemented incorrectly.

Components are reviewed against internal accessibility standards aligned with WCAG 2.2.

Input & Forms

Components used to collect, filter, and modify user input.

Autocomplete Text input with filtered suggestions as the user types.
Checkbox Form control that allows one or more independent selections.
Combobox Text entry with suggestion popup and selectable options.
Date Picker Input for choosing a date using text entry or calendar UI.
File Upload Control for selecting and uploading one or more files.
Password Input Toggle Password field with a control to reveal or hide entered text.
Radio Button Form control for selecting a single option from a set.
Search Input Input field optimized for entering search queries.
Select Collapsed control for choosing one option from a list.
Slider Control for selecting a value along a range.
Text Input Single-line field for entering freeform text.
Toggle Switch Binary on/off control presented as a switch.

Navigation

Patterns that help users move across pages, destinations, and related views.

Breadcrumbs Navigation trail showing the user's location in a hierarchy.
Dropdown Trigger and popup list of actions or destinations.
Link Interactive text or element that navigates to another destination.
Mega Navigation Large structured navigation menu with grouped destinations.
Pagination Navigation between pages or result sets.
Skip Navigation Bypass link that lets keyboard users jump to main content.
Tabs Tabbed interface for switching between related panels.

Disclosure & Overlays

Patterns that reveal, layer, or temporarily focus additional content.

Accordion Expandable sections that show and hide content panels.
Alert Dialog Modal dialog requiring confirm or cancel before continuing.
Cookie Consent Consent banner or dialog for privacy and cookie preferences.
Dialog Overlay window that interrupts the page for focused interaction.
Disclosure Toggle pattern that reveals or hides associated content.
Modal Focused overlay requiring user interaction before returning to the page.
Popover Anchored floating surface with contextual information or actions.
Tooltip Supplemental hint shown on focus or hover.

Feedback & Status

Components that communicate updates, progress, labels, and system responses.

Alert Inline notification announced automatically via a live region.
Badge Removable tag or filter chip with dismiss action.
Progress Bar Visual indicator showing task completion progress.
Toast Transient status message shown without blocking the page.
Tag Small metadata label used for categorization or status.

Data Display & Media

Patterns for presenting structured content, collections, and rich media.

Avatar User image or initials fallback with accessible labelling.
Button Clickable element that triggers an action or submits a form.
Card Contained surface for related content and actions.
Card List A collection of cards displayed as a navigable list.
Carousel Rotating set of slides with navigation controls.
Image Gallery Collection of images with selection and preview behavior.
Listbox Single- or multi-select list of options navigated with keyboard.
Table Structured rows and columns for displaying tabular data.
Video Embedded media player with accessible controls and captions.

Commerce Patterns

Reusable patterns commonly used in shopping, merchandising, and transactional flows.

Cart Summary Summary of cart totals, discounts, and checkout details.
Faceted Filter Filter controls for narrowing product or content results.
Mini Cart Compact cart preview with quick access to cart contents.
Price Accessible display of product pricing information.
Product Card Product listing with image, name, price, rating, and quick-add.
Quantity Stepper Numeric input with increment and decrement buttons.
Review Comment User review with rating, actions, and verified badge.
Sale Price Original and sale price display with accessible was/now pattern.
Star Rating Interactive star-based rating input with read-only display.
Variant Selector Selectable product variant options like size and color.
Wishlist Button Toggle button to save or unsave a product to a wishlist.