GatekeeperQAExplore the sample

PRACTICAL ACCESSIBILITY TESTING

How to fix missing form labels before your next release

Updated September 28, 2026

An email field can look understandable and still have no useful name for someone using a screen reader. Start with the affected element in your report, then check the actual form state before changing code.

1. Inspect the affected field

A selector such as #email identifies the scanned element. Confirm it still exists on the page and that it is the field users interact with. A placeholder is not a substitute for a persistent label.

2. Associate visible text with the input

Here is a fictional field before the fix:

<input type="email" id="work-email">

Add a visible label whose for value matches the input's unique id:

<label for="work-email">Work email</label>
<input type="email" id="work-email" name="email"
       autocomplete="email">

This association lets assistive technology identify the field. Prefer a visible label for this ordinary form; adding an invisible name alone leaves sighted users without persistent instructions. See W3C's form-label guidance.

3. Check the rendered result

4. Retest and keep evidence

Rescan the same page after deployment. In GatekeeperQA, compare the result with the original and record your manual check separately. A finding disappearing is not enough: the field could have been removed or the tested state could differ.

A useful ticket records the URL, selector, original HTML, expected label, reproduction steps and dated retest evidence. Avoid copying customer-entered values into reports or tickets.

Try the sample finding and ticket preview before using your own page.

Continue your workflow

Run accessibility checks in GitHub Actions ยท Scan an authorized page

Automated checks support manual assessment; these examples do not certify conformance.