Designing Accessible Forms Without Losing Your Mind

Forms are where accessibility issues hurt users the most. A few habits fix most of them.

Always use real labels

Placeholders are not labels. Pair every input with a <label htmlFor>.

Announce errors

Link error text with aria-describedby and move focus to the first invalid field on submit.

Keep the tab order natural

If you need tabIndex greater than 0, the layout is probably wrong.

Test with a keyboard and a screen reader

Five minutes with VoiceOver or NVDA catches more than any linter.

Checklist

• Visible focus styles
• Sufficient color contrast
• Clear, specific error messages