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