- Success Criterion 2.4.4
- Conformance level A
Icon-Only Link With No Accessible Name at All
2.4.4 — Link Purpose (In Context)
Scenario
Setting
A photo-sharing app's upload screen
What’s wrong
Icon links (social, edit, delete) with no accessible name, or name = "icon"/"link".
Example
<button class="icon-btn"><svg class="icon-trash"></svg></button>
<button class="icon-btn"><svg class="icon-edit"></svg></button>
<button class="icon-btn"><svg class="icon-share"></svg></button> Why it matters
Each icon button announces only button to a screen reader, so the user can't tell delete from edit from share before activating one.
How to test
Pull up a screen reader's link list: icon-only links (social, edit, delete) with no accessible name, or a name like 'icon'/'link', fail.
How to fix
aria-label on the button plus aria-hidden on the decorative icon gives exactly one clear name.
<button class="icon-btn" aria-label="Delete photo"><svg class="icon-trash" aria-hidden="true"></svg></button>
<button class="icon-btn" aria-label="Edit photo"><svg class="icon-edit" aria-hidden="true"></svg></button>
<button class="icon-btn" aria-label="Share photo"><svg class="icon-share" aria-hidden="true"></svg></button> Outcome
A user confidently picks Share photo from three icon buttons instead of guessing by position.
Who is affected
Screen reader users managing uploaded photos risk deleting or sharing a photo by mistake when icons announce nothing.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Link’s Purpose Explained Only in Unrelated Page Text
- Image-Only Link or Button With No Accessible Name
- Repeated ‘Click Here’ Links With No Way to Tell Them Apart
- Multiple ‘Download’ Links With No File Name or Type Given
- Link Text That’s Just a Long, Meaningless Tracking URL
- ARIA Label That Overrides a Link’s Visible Text Incorrectly