api: YAML JSON TOON Database
version: 1.0.0
format: json
dataset:
  id: 1006
  slug: web-accessibility-patterns
  title: Accessible Interface Pattern Checklist
  description: "Keyboard, focus, and semantic requirements for common browser interface patterns."
  summary: "Keyboard, focus, and semantic requirements for common browser interface patterns. Each row includes a practical application and a failure to check before using it."
  use_when[2]: Check an interface before shipping it.,Choose native browser elements before adding custom behavior.
  caveats[2]: This checklist does not replace testing with users and assistive technology.,ARIA roles do not implement behavior by themselves.
  related[2]: css-layout-recipes,http-security-headers
  category: Web Technologies
  category_slug: web-technologies
  tags: "web-technologies,web accessibility patterns,reference,engineering"
  view_count: 0
  created_at: 1791798640
  updated_at: 1791798640
  reviewed_at: 2026-10-12
  sources[2]{title,url}:
    WAI-ARIA Authoring Practices,"https://www.w3.org/WAI/ARIA/apg/patterns/"
    W3C modal dialog pattern,"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
  reading[1]: keyboard-accessible-search-and-data-tables
  provenance: "Original editorial reference notes by YJTOON, informed by the linked primary documentation. External specifications retain their own licenses."
  entry_count: 10
  fields[4]{section,field,type,example}:
    data,pattern,string,Search form
    data,semantic_start,string,label plus input type=search and button
    data,keyboard_behavior,string,Enter submits; the label identifies the field.
    data,common_failure,string,Using only placeholder text as the accessible n…
data[10]{pattern,semantic_start,keyboard_behavior,common_failure}:
  Search form,label plus input type=search and button,Enter submits; the label identifies the field.,Using only placeholder text as the accessible name.
  Modal dialog,dialog with showModal and a visible title,Escape closes; focus returns to the opener.,Keyboard focus escapes behind the modal.
  Disclosure,details and summary,Enter or Space toggles the summary.,Building a clickable div without keyboard behavior.
  Navigation,nav containing real links,Tab follows the document order.,Using menu roles for ordinary website navigation.
  Tabs,"tablist, tab, and tabpanel",Arrow keys change the selected tab under the chosen activation policy.,Adding roles without implementing keyboard behavior.
  Data table,table with th scope=col or row,Links and controls remain reachable; wide data may scroll.,Replacing table semantics with a visual grid of divs.
  Copy action,button with an accessible name,Enter or Space activates; announce success or failure.,Showing Copied even when the clipboard write failed.
  Validation error,Associated text and aria-invalid,Focus stays predictable; errors describe a correction.,Relying on a red border alone.
  Reduced motion,prefers-reduced-motion media query,All actions still work when transitions are removed.,Hiding information with an animation that no longer runs.
  Mobile navigation,Disclosure button with aria-expanded,Escape closes; focus order stays usable.,Leaving a hidden drawer’s links focusable.