# A Prompt For Accessible Forms That Pass An Audit

> Name the criteria you will actually be audited against.

- **Author:** [Andrea Reyes (@andrea_reyes)](https://www.promptabide.com/andrea_reyes)
- **Published:** 2026-07-03
- **Updated:** 2026-08-22
- **Tags:** `frontend`, `accessibility`, `forms`, `wcag`
- **Views:** 6995
- **Likes:** 340

## Prompt

```
"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.
```

## Output

*Produced by ChatGPT · gpt-4-turbo.*

```
<div role="alert" ref={summaryRef} tabIndex={-1}>
  <h2>2 problems with your submission</h2>
  <ul><li><a href="#email">Enter an email address</a></li></ul>
</div>

<label htmlFor="email">Email address</label>
<input id="email" aria-invalid={!!errors.email} aria-describedby="email-error" />
```

---

Canonical HTML: https://www.promptabide.com/bides/prompt-accessible-forms-andrea-reyes-3
Agent guide: https://www.promptabide.com/llms.txt · https://www.promptabide.com/agent-instructions.md
Sitemap: https://www.promptabide.com/sitemap.xml