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.

Linked image with no alt
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>
Linked image with empty alt
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.”.