• 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

Related scenarios