Skip to content

Accessibility Pattern Index

Understand How Accessibility Patterns Are Used

This section provides a structured overview of accessibility patterns identified through WAVE, organized into three categories:

  • Structural Element: Documentation about accessibility patterns related to semantic HTML elements that define the structure, organization, and relationships within a page. These patterns include headings, lists, landmarks, tables, and other structural components that enable assistive technologies to interpret and navigate content effectively.

  • Feature: Documentation about accessibility patterns related to user-facing functionality and interface behaviors that enable users to perceive, understand, and interact with content. These patterns include images, links, forms, navigation aids, and other interactive elements that must be accessible to all users across different devices and assistive technologies.

  • ARIA: Documentation about accessibility patterns that use ARIA roles, states, and properties to enhance or communicate meaning, behavior, and dynamic changes to assistive technologies when native HTML alone is not sufficient. These patterns focus on ensuring that custom or interactive components are properly announced, labeled, and usable by screen reader and keyboard users.

Each category groups related patterns that address how users interact with content, how that content is structured, and how additional semantics are communicated to assistive technologies.

👉 Start with Structure → build the Feature → enhance with ARIA

Begin with semantic HTML to establish meaning, implement the user-facing functionality, and only use ARIA when native HTML cannot fully convey behavior or relationships. Avoid replacing native elements with ARIA unless necessary.

Examples

Example: Form Input with Error Messaging

A user enters information into a form field and receives feedback if there is an error.

  • Structural Element
    Use semantic HTML such as <label> and <input> to define the form field and its relationship.

  • Feature
    Provide input validation and clear error messaging so users understand what is required and how to fix issues.

  • ARIA
    Use ARIA (e.g., aria-describedby, aria-live) only when needed to associate instructions or announce dynamic error messages.

Example: Expand/Collapse Section (Accordion)

A user expands or collapses a section to show or hide content.

  • Structural Element
    Use semantic elements such as <button> for the trigger and headings or sections to organize content.

  • Feature
    Allow users to toggle visibility of content in a predictable and accessible way.

  • ARIA
    Use aria-expanded and aria-controls to communicate the current state and relationship between the trigger and the content region.

Example: Navigation with Skip Link

A user navigates a page and wants to skip repetitive navigation to reach the main content.

  • Structural Element
    Use landmarks such as <nav> and <main> to define navigation and primary content areas.

  • Feature
    Provide a skip link that allows users to jump directly to the main content.

  • ARIA
    Use ARIA landmarks or labels only if needed to further clarify regions when multiple similar elements exist.

Use the table below to explore individual patterns, understand their purpose, and learn how to implement them correctly to support accessible, standards-compliant experiences.

Accessibility Patterns DRAFTS

Category Page Link for inside wiki DOM snippit Example Screenshots
ARIA alert or live region missing missing missing
ARIA button missing missing missing
ARIA description missing missing missing
ARIA expanded missing missing missing
ARIA hidden missing missing missing
ARIA label missing missing missing
ARIA menu missing missing missing
ARIA popup missing missing missing
ARIA tabindex missing missing missing
ARIA ARIA missing missing missing
Feature Alternative text missing missing missing
Structural Element Aside missing missing missing
Structural Element Column header cell missing missing missing
Structural Element Data table missing missing missing
Structural Element Definition/description list missing missing missing

Accessibility Patterns Comming Soon

Category Page Link for inside wiki DOM snippit Example Screenshots
Feature Fieldset missing missing missing
Feature Figure missing missing missing
Feature Form label missing missing missing
Feature Image button with alternative text missing missing missing
Feature Image map area with alternative text missing missing missing
Feature Image map with alternative text missing missing missing
Feature Language missing missing missing
Feature Linked image with alternative text missing missing missing
Feature Null or empty alternative text on spacer missing missing missing
Feature Null or empty alternative text missing missing missing
Feature Skip link target missing missing missing
Feature Skip link missing missing missing
Structural Element Footer missing missing missing
Structural Element Generic region missing missing missing
Structural Element Header missing missing missing
Structural Element Heading level 1 missing missing missing
Structural Element Heading level 2 missing missing missing
Structural Element Heading level 3 missing missing missing
Structural Element Heading level 4 missing missing missing
Structural Element Heading level 5 missing missing missing
Structural Element Heading level 6 missing missing missing
Structural Element Inline frame missing missing missing
Structural Element Main content missing missing missing
Structural Element Navigation missing missing missing
Structural Element Ordered list missing missing missing
Structural Element Row header cell missing missing missing
Structural Element Search missing missing missing
Structural Element Table caption missing missing missing
Structural Element Table header cell missing missing missing
Structural Element Unordered list missing missing missing
  • Page Status: In Progress
  • Authors:
    • Bonnie Wolfe