Skip to main content
Problem 12

Fix Accessibility Issues in a Form

MEDIUMREVIEW
Accessibility+2

The starter code has a signup form with three fields (name, email, password) that works visually but has multiple accessibility violations. Fix them without changing the form's visual appearance or behavior. Four issues to fix: (1) inputs use placeholders instead of <label> elements, add labels with matching for/id; (2) required fields lack aria-required="true"; (3) CSS removes focus outlines with no replacement, add visible focus styles; (4) the submit button is a <div>, replace it with <button type="submit">.

Examples
Example 1
Input
Inspect the form with a screen reader or the browser accessibility tree
Output
All inputs have associated labels, required fields are announced, focus is visible, submit button is a real button
Constraints
  • Do not change the form's visual layout or field order
  • All existing data-testid attributes must remain
Follow-up

Can you add live validation error messages using aria-live regions that announce errors as the user types?

Hints
Console output will appear here...