50.1% empty links
posted on
The new WebAim 1 Million report was recently published, and the results are sobering. Compared to the previous year, 0.5% fewer websites contained automatically detectable accessibility issues, but the total number of erroneous websites is still 96.3%.
The number of empty links increased by 0.4% from 49.7% to 50.1%. More than half of the websites tested contained empty links (links with no text).
That usually happens when you link an image, but it has no alt attribute or the alt attribute has no value.
To give you an idea of how this affects the user experience and accessibility, I tested the following empty links with screen readers.
<a href="https://webaim.org/projects/million/">
<img src="/images/screenshot-04-03-23_copy.jpg">
</a>Here's what different screen readers announce using the Tab key on desktop and touch on mobile.
| Screen reader | Browser | Result |
|---|---|---|
| NVDA | Firefox | million, graphic, link |
| JAWS | Firefox | H T T P S colon slash slash webaim dot org slash projects slash million slash |
| JAWS | Edge | images slash screenshot dash 04 dash 03 dash 23 underline copy, link, graphic |
| Talkback | Chrome | screenshot the 3rd of April 23 underscore copy, link |
| VoiceOver macOS | Safari | link, million |
| VoiceOver macOS | Chrome | unlabelled image |
| VoiceOver macOS | Firefox | link, image, million |
| VoiceOver iOS | Safari | million, link |
<a href="https://webaim.org/projects/million/">
<img src="/images/screenshot-04-03-23_copy.jpg" alt="">
</a>| Screen reader | Browser | Result |
|---|---|---|
| NVDA | Firefox | million, link |
| JAWS | Firefox | link, H T T P S colon slash slash webaim dot org slash projects slash million slash |
| JAWS | Edge | million, link |
| Talkback | Chrome | million, link |
| VoiceOver macOS | Safari | link, million |
| VoiceOver macOS | Chrome | link, million |
| VoiceOver macOS | Firefox | link, million |
| VoiceOver iOS | Safari | million, link |
That sucks. At best, screen reader users can only guess what they can expect when they click an empty link.
How can you avoid repeating these mistakes?
Test your sites at least with an automatic testing tool like axe, Lighthouse, or Wave, and label linked graphics. I’ve described several ways in “Buttons and the Baader–Meinhof phenomenon.”.