Fix Accessibility Issues in a Form
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">.
Inspect the form with a screen reader or the browser accessibility tree
All inputs have associated labels, required fields are announced, focus is visible, submit button is a real button
- Do not change the form's visual layout or field order
- All existing data-testid attributes must remain
Can you add live validation error messages using aria-live regions that announce errors as the user types?
Keep moving through related frontend fundamentals problems and build a stronger search-friendly practice loop around this topic.
View track →