{
    "slug": "accessible_forms",
    "term": "Accessible Forms",
    "category": "accessibility",
    "difficulty": "intermediate",
    "short": "Every input needs a visible label, errors linked via aria-describedby, required fields indicated, and validation announced via aria-live.",
    "long": "Label via for/id or wrapping — never placeholder-only. Errors: aria-describedby links error to input; aria-invalid=true on invalid inputs. Required: required attribute or aria-required. Autocomplete attribute helps password managers. Announce errors with role=alert or aria-live=polite.",
    "aliases": [
        "form accessibility",
        "aria-describedby"
    ],
    "tags": [
        "accessibility",
        "html",
        "forms"
    ],
    "misconception": "Placeholder is a sufficient label — it disappears on focus, has poor contrast, and is not consistently announced as a label.",
    "why_it_matters": "Inaccessible forms exclude users relying on screen readers, keyboard navigation, and voice input — typically 15–20% of users to some degree. Missing label associations mean screen readers announce 'edit text' with no context. Missing error associations mean validation failures are invisible to assistive technology. In regulated industries, inaccessible forms are a legal liability. Fixing them also improves usability for everyone — clearer labels and inline errors reduce form abandonment rates measurably.",
    "common_mistakes": [
        "Placeholder as label",
        "Errors not linked to inputs",
        "Required indicator without explanation",
        "Validating on every keystroke"
    ],
    "when_to_use": [
        "Apply accessible form patterns to every form — not just those explicitly flagged for accessibility review.",
        "Use aria-describedby to link error messages to their input so screen readers announce the error when focus moves to the field.",
        "Use aria-live regions for dynamic validation feedback that appears without a page reload."
    ],
    "avoid_when": [
        "Do not use placeholder text as a substitute for a visible label — placeholders disappear on input and fail contrast requirements.",
        "Avoid grouping unrelated fields inside a single fieldset — it creates confusing context for screen reader users."
    ],
    "related": [
        "screen_reader_basics",
        "wcag_guidelines"
    ],
    "prerequisites": [
        "wcag_guidelines",
        "accessible_colour_design",
        "screen_reader_basics"
    ],
    "refs": [
        "https://www.w3.org/WAI/tutorials/forms/"
    ],
    "bad_code": "<input type=\"email\" placeholder=\"Email\">\n<span style=\"color:red\">Invalid</span>",
    "good_code": "<label for=\"email\">Email *</label>\n<input id=\"email\" type=\"email\" aria-required=\"true\" aria-invalid=\"true\" aria-describedby=\"err\">\n<span id=\"err\" role=\"alert\">Enter a valid email</span>",
    "example_note": "The bad example uses a placeholder and an unlinked error span; the fix adds a label element, aria-describedby pointing to the error, and aria-live so the validation is announced automatically.",
    "quick_fix": "Every input needs a visible label (for/id not placeholder), errors linked via aria-describedby, required marked with aria-required, and validation announced with role=alert",
    "severity": "high",
    "effort": "medium",
    "created": "2026-03-16",
    "updated": "2026-03-31",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/accessible_forms",
        "html_url": "https://codeclaritylab.com/glossary/accessible_forms",
        "json_url": "https://codeclaritylab.com/glossary/accessible_forms.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Accessible Forms](https://codeclaritylab.com/glossary/accessible_forms) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/accessible_forms"
            }
        }
    }
}