{
    "api": "YAML JSON TOON Database",
    "version": "1.0.0",
    "format": "json",
    "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\u2026"
            }
        ],
        "category": "Web Technologies",
        "category_slug": "web-technologies",
        "tags": "web-technologies,web accessibility patterns,reference,engineering",
        "view_count": 1,
        "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\u2019s links focusable."
        }
    ]
}