- Success Criterion 4.1.2
- Conformance level A
- W3C reference F89
Icon-Only Control With No Name Exposed to Assistive Tech
4.1.2 — Name, Role, Value
Scenario
Setting
A crowdfunding platform's campaign page
What’s wrong
A link or button whose only content is an image has no accessible name — screen readers announce 'link' with no clue where it goes.
Example
Open a crowdfunding platform's campaign page and this is what you'll see: a link or button whose only content is an image has no accessible name — screen readers announce 'link' with no clue where it goes.
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. On a crowdfunding platform's campaign page, that means they have to work around the barrier just to continue.
How to test
Inspect an image-only link/button in DevTools: if its accessible name is empty, it fails.
How to fix
Give the image inside the link/button alt text that states the destination or action.
Outcome
With the fix in place on a crowdfunding platform's campaign page, they get the same outcome as everyone else.
Who is affected
Screen-reader and voice-control users who can operate only what the accessibility tree exposes.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus