Name, Role, Value
Every interactive element needs a programmatically exposed name (what it's called), role (what kind of thing it is), and, where relevant, its current value or state.
What it means
This is the catch-all requirement behind most of the specific issues we flag: a button, form field, or embedded frame has to expose enough information — through real markup, not just visual styling — for a screen reader to announce what it is and what it does. A button that just contains an icon, with no text and no aria-label, technically has a role ("button") but no name, so a screen reader is left announcing "button" with nothing else to go on.
Why it matters
Assistive technology doesn't render your CSS or interpret your icons the way a sighted user does — it reads the accessibility tree that your markup produces. If that tree is missing a name for something interactive, the person using it has no way to know what it does before activating it.
What our scan checks for
- Form fields with no accessible label (no matching <label>, aria-label, or aria-labelledby).
- Buttons with no text content and no aria-label.
- Embedded <iframe> elements with no title attribute describing their content.
How to fix it
- Give every form field a real <label for="..."> that points at its id, or an aria-label if a visible label doesn't fit the design.
- Make sure every button has either visible text or an aria-label describing what it does.
- Add a title attribute to every iframe summarizing what it embeds — "Google Map of our office," not just "frame."
See where this shows up on your site
Run a free scan to check your pages against this and every other criterion we cover.
Scan a website free