Image Accessibility Tips

Bold visuals can grab people’s attention, but image accessibility lags behind.

You know the old adage “A picture is worth a thousand words”?

That might be an understatement today. In fact, research has shown that 91% of consumers prefer visual content over text-based content (ForbesOpens in a new tab).

The world’s leading brands have taken note. But as the web becomes increasingly visual, it raises an important question for accessibility: What are organizations doing to include people who cannot perceive images visually?

Unfortunately, the answer is often “not enough.”

4 out of 7 images are not accessible to people with visual impairments.

4 out of 7 images (or 56% of all images scanned) had faulty or missing image alternative text — which can make it difficult for people with visual and cognitive impairments to understand what an image is supposed to represent.

4 broken images and 3 normal images representing 4 out of 7 images that are inaccessible.
4 broken images and 3 normal images representing 4 out of 7 images that are inaccessible.

After scanning more than 32 million images, we found that 93% of domains tested had at least one page with an inaccessible image. And of those domains, 69% of pages had at least one image that failed one of our tests.

  • 32M

    number of images tested across all domains

  • 93%

    of domains had at least one page with faulty image alt text

  • 69%

    of pages had at least one image that failed one of our tests

When it comes to accessibility, the main culprit is image alternative text.

Image alternative text, or alt text, is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders.

Done right, alt text can paint a complete picture of a website for people who cannot perceive images visually. However, many websites forget to provide alt text for each image. Or they write something that’s so vague it doesn’t provide any value to the user.

Imagine driving down a road and seeing a blank speed limit sign. Or one that simply said “Don’t Speed.” Neither sign would be all that helpful, without knowing the actual speed limit.

Unfortunately, that’s the experience people with visual impairments have when they encounter an image with vague or missing alt text.

  • A blank traffic sign to create an analogy for no alt text.

    No Alt Text

    alt: <blank>

  • A traffic sign that reads “Don’t Speed” to create an analogy for unhelpful alt text.

    Bad Alt Text

    alt: <don’t speed>

  • A traffic sign that reads “Speed Limit 25” to create an analogy for helpful alt text.

    Good Alt Text

    alt: <speed limit sign indicating 25 miles per hour>

Our scan revealed that the average page had 8.6 images. And of those images, 56% had an accessibility issue.

  • A blank stop sign to create an analogy for no alt text.

    60%

    had no alt text

  • A stop sign with an icon of a hand to create an analogy for images not marked as decorative.

    30%

    were not marked as decorative

  • A stop sign with the words “Stop Halt Wait” to create an analogy for images with redundant text.

    10%

    had redundant text

BEST PRACTICES

Image accessibility tips

Back: Key Insights

Next: Link Accessibility Tips