Promptabide Logo
HM

Hugo Martin

@hugo_martin2 months ago

A Prompt For Accessible Forms That Pass An Audit

Name the criteria you will actually be audited against.

frontend
accessibility
forms
wcag
Keywords:
wcag
accessible forms
aria
"Make it accessible" produces aria-labels and nothing else. Name the criteria instead:

"Build this form to meet WCAG 2.2 AA. Specifically:
  • • Every input has a visible, programmatically associated label — no placeholder-as-label

  • • Errors are announced: aria-invalid on the field, aria-describedby to the message, the summary in a role=alert

  • • Focus moves to the error summary on failed submit

  • • The whole form is operable keyboard-only; visible focus ring on every control

  • • Required fields marked in text, not colour alone

  • • Target size at least 24x24 CSS px"


  • Every one of those is a line item a real audit checks. Generic "be accessible" maps to none of them.

    Caveat worth stating: this gets you through the automated checks. It does not replace testing with an actual screen reader, and the two disagree more often than you would like.
    7.8k4
    Comments (4)
    No comments yet. Be the first to share your thoughts!
    Top Contributors
    Loading...
    Follow PromptAbide

    New bides, prompt breakdowns and community picks, on whichever feed you already read.

    Trending Tags
    Loading...
    A Prompt For Accessible Forms That Pass An Audit | PromptAbide