How to use the Webpage Accessibility Label Checker.
A label check should examine the programmatic name and visible context. Nearby text alone may not establish an accessible relationship.
Make the workflow fit your task.
Inspect each control's programmatic name and its connection to visible labeling. Check explicit labels, wrapping labels and relevant ARIA references, then report missing or misleading names with element locations. Include manual review where automated inspection cannot establish meaning.
- What you provide
- Rendered form fields and controls.
- What you get
- Missing accessible labels and unclear names.
See the input and the result.
Illustrative input and output · a teaching example, not a live WebAct run
Example input
Supplied markup: <span>Email</span><input id="email" type="email">. No other naming attributes. Correct the label association.
Completed example
Finding: the visible caption has no programmatic association with the input. Proposed markup: <label for="email">Email</label> <input id="email" type="email"> Verify the id is unique and the control's accessible name is Email in the complete page.
Load this input into the prompt, then copy it to WebAct to try the task. Your result may differ from the illustration.
Decisions and troubleshooting.
Does placeholder text replace a persistent form label?
It can disappear while typing and is not a reliable substitute for a clear, associated label. Review both visual and programmatic naming.
Why is a visible caption not announced as the input's label?
It may lack a valid association, such as a matching for/id pair. Inspect the relationship rather than proximity alone.
Try it with your own source.
Replace the example with your material in the task prompt. Keep the requirements you need, then copy the task into WebAct.
Customize and copy the task ↑