Skip to main content
ELYTE
MediumFrontendReview

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

Start problemBrowse all problems

What you will practice

HTMLCSSJavaScriptAccessibilityForms & ValidationHTML Semantics

Requirements

  • Keep the existing form behavior and required `data-testid` attributes intact.
  • Each input must have an associated `<label>` with matching `for` and `id` values.
  • Required fields must expose `aria-required="true"`.
  • Focused fields must have a visible focus indicator.
  • The submit control must be a real `<button type="submit">`.
  • Do not change the form's visual layout or intended submit behavior.

Starter files

index.htmlEditable template
styles.cssEditable starter
main.jsEditable starter

What the judge checks

  • Runs in the browser environment with the browser-eval runner.
  • Uses a 1500ms judge budget.
  • Requires test IDs: app, signup-form.
  • Behavior rules include: Initial Render Required, Labels Linked To Inputs, Required Fields Marked, Focus Indicator Visible.

Constraints

  • Do not change the form's visual layout or field order
  • All existing data-testid attributes must remain

Example behavior

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

Follow-up

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