Why image accessibility is a must-have for your website

Two books, “Stunning CSS” and “JavaScript & jQuery”, laying one on another on a table, and a smartphone laying on top of those

Images enhance interaction, improve readability, as well as giving context and increasing comprehension. This applies whether the images are informative, decorative or functional. So, imagine what you’d miss, if you couldn't see any of the images used in web (or in-app) content. That's the reality for some people with disabilities… unless that is, you’ve applied image accessibility across your site, to improve the content experience of all your readers and users.

Portrait photo of the post author Di Mace

Di Mace

Communication strategist

Way back in 1976, scientists proved that pictures convey more information than just words. Since then they’ve proven that people remember pictures better than words, especially over longer periods of time. This phenomenon is called the Picture Superiority Effect*.

The effect is now widely applied across all mediums of online advertising, content creation, e-learning, social media and infographics, as well as on in-app screens and emails. That’s because visual material quickly piques readers’ and users’ curiosity, and entices them to more readily interact with your content:

  • Visuals are processed 60,000x faster than text.
  • The human eye can register 36,000 visual messages every hour.
  • People remember 65% of what they see, compared to 10% of what they hear.

According to the science boffins, reading is relatively inefficient. Apparently our brains see words as tiny pictures, and your brain has to piece those pictures together, to make sense of information. This occurs at a slightly slower rate than visual processing.

That said, science has also validated that for optimal comprehension, content should make use of both pictures and words.

While the Picture Superiority Effect may acknowledge that image-based concepts are learned more easily, and are more frequently recalled than the written word, it’s been shown images and text must coexist and equally share the communication load. And the images must be relevant to the text – reinforcing the message, not distracting.

That's why it’s so vital to ensure all your images, icons, logos and visual information meet the image accessibility standards, as set out by WCAG, and detailed in WCAG 2.1.

Why people love (and rely on) images

Humans are visual creatures. Images help us learn, get attention, explain tough concepts, and inspire action or feelings. They can often leave more accurate impressions than words alone, let alone instantly change your mood (cat videos are a perfect example).

Images work because you process visual data faster than any other type of data (see below). The neuroanatomist, R.S. Fixot, published a paper in 1957 that noted when our eyes are open, vision accounts for two-thirds of the electrical activity of the brain – 2 billion of the 3 billion firings per second.

That’s unsurprising though, given our hunter-gatherer reliance on visual cues.

Yes, it seems that the prolific use of videos and images in content creation is firmly anchored in the fact that evolutionarily our brains are built for split-second decisions, based on visual information (like escaping a saber tooth tiger). But if you’re doubtful, here’s some validating stats:

To put the first one in context, it takes 300–400 milliseconds (or ⅓ of a second) to blink your eye. Therefore, your brain identifies what it’s looking at, approximately 30 times faster than you can blink your eye – time that may be crucial for speedy comprehension and action.

But what happens when your users have visual impairments? Or dyslexia? How do they see or comprehend your images? More importantly, what elements make for image accessibility (ie. able to be read by screen readers and/or assistive technology) or inaccessible images?

What is image accessibility?

Image accessibility ensures all images (and visual elements) on a digital platform can be viewed and understood by all users (or described by either a screen reader or another form of assistive technology).

On a conceptual level, image accessibility demands that you supply – to those people for whom your images are unseeable – whatever information is needed for them to be able to understand the image and its context/contribution to the content. This shouldn’t be an ‘in principle’ approach, it must be an ongoing practice that’s diligently applied across all your website pages, posts, visualizations, in-app dashboards and screens, onboarding, and customer communications.

At its most basic, the practice of image accessibility entails the inclusion of alternative text on every image.

How to make an image accessible: use alt text

People who can’t see images, depend on alternative text (often abbreviated to ‘alt text’). Alt text is a short, meaningful description that’s stored behind the image, where it helps to communicate the meaning and context of the image – not just what ‘appears’ in the picture.

When an audible screen reader or assistive technology encounters an image with alt text, it typically announces “Image” and then reads the alt text. But without alt text, the screen reader says "Picture" for each image, so the image’s meaning is lost to people using assistance technology.

Alt text also benefits users when images on a page fail to load (or where users turn images off) because the text is displayed instead of the image.

How to add alt text

The exact steps and process to add alt text depends on what editor and CMS you’re using. But to give you an idea, here’s a step-by-step tutorial for adding image alt text using a WYSIWYG editor like TinyMCE:

Get your own WCAG A-AA-AAA level accessibility checking tool. Click to discover how.

Image alt text best practices for content creators

Image alt text might be invisible to most of us (except screen readers and search engines), but that doesn’t mean it’s not important

A hand that holds a lens. You can see a landscape with mountains through a lens.

Adding an image description to MS Word documents is easy and instantly increases the document’s accessibility for all users. If you’re creating PDF documents from the MS Word files, the PDF documents automatically carry the same image descriptions.

In MS Word, to add alternative text:

  • Right click on the image
  • Select Format Picture
  • The format picture dialogue box will appear. Select the Web tab
  • In the Alternative Text box type in the description of the image.

Or, read this for more detailed information on adding alt text in various Office versions.

How to write alt text

Writing image alt text might sound simple. But, most developers and content creators get it wrong. Firstly, they don’t realize that some images need alt text, while others don’t. Some descriptions are helpful, while others are redundant.

Here’s a step-by-step tutorial for writing and applying alt text using a WYSIWYG editor like TinyMCE:

How to write alt text for different image types {infographic}

How you write alt text matters because it impacts your content’s accessibility, especially for users who rely on screen readers

A man is looking at the board with different sheets attached to it

The TL;DR is that alt text should be succinct enough to communicate the idea without burdening the user with unnecessary detail.

Where to not use alt text

You should avoid using alt text when an image, like an icon, is decorative. How do you know? If the image doesn't provide additional information or meaning to the content, It’s considered ‘decorative’.

If you’re not sure if your image is decorative or not, use the Alt Text Decision Tree in the above article for guidance.

Image ClassificationImage DescriptionAdd Alt TextLeave Alt Text Blank
InformativeImage shows a concept, information or adds meaning to the text
DecorativeImage doesn’t add any information, meaning or functionality to the page
FunctionalImage performs some function – like a button or link
ComplexData visualizations (infographic or chart) should provide a text alternative (immediately after) or a link to the underlying data
TextAvoid using images where important text is included – include it in the CSS or replicate in the alt text

Note: If a caption is included after an image, alt text may not be needed, and always avoid using the phrases ‘image of…’ or ‘picture of …’

Examples of accessible images

Informational image alt text example

People sit in a train cabin with destination sign “Coney Island”
People sit in a train cabin with destination sign “Coney Island”
People sit in a train cabin with destination sign “Coney Island”

The alt text for these images should be a short description conveying the essential information or meaning of the image.

Decorative image alt text example

For these images, a null text alternative (alt="") should be provided, because they do not enhance the understanding of the content for the user.

Functional image alt text example

A hand with a smartphone that has Google Maps application opened and “Morley butchers” chosen as the destination
A hand with a smartphone that has Google Maps application opened and “Morley butchers” chosen as the destination

For these images, the alt text should describe the functionality (and destination) of the link or button rather than the visual image.

Complex image alt text example

A piece of Stockholm transportation network map
A piece of Stockholm transportation network map

For graphs, infographics and diagrams, a full-text equivalent of the data or information should be provided immediately after the image as the text alternative and/or a link to supporting data.

Image accessibility standards

The issue of image accessibility maps to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:

The WCAG also provides a detailed tutorial on image accessibility:

Images Tutorial

Images must have text alternatives that describe the information or function represented by them

How to check for image accessibility

Our online Accessibility Testing Tool reviews your content and flags any image accessibility issues (ie. missing or inadequate alt text) that may be a potential problem for someone with a disability. It also suggests how to resolve the issues that it finds.

The Accessibility Testing tool is set at compliance level AA of the WCAG guidelines.

Once you’ve pasted the content into the editor UI, click the button and it works in the background to detect any document accessibility issues.

Everyone needs to access images

Images, graphs, charts, or text boxes are used to make content more attractive and easier to understand. And they can encourage your readers to take the action you desire. With alt text, those same images also serve as cues for people with visual impairments and those people suffering from dyslexia or visual learners – to orient themselves while navigating the content of a web page.

However, when you don’t consider image accessibility, those same visual enhancements can become a barrier to communication.


*Nelson, D.L., Reed, U.S., & Walling, J.R. (1976). Pictorial superiority effect. Journal of Experimental Psychology: Human Learning & Memory, 2, 523-528.

Portrait photo of the post author Di Mace

Di Mace

Communication strategist

Di Mace is a freelance copywriter and messaging strategist who's worked with both B2B and B2C brands across the country. She helps businesses identify who their best-fit customers are, what drives them to do what they do, and then crafts messages that turn them from fans into customers and evangelists.

Accessibility Checker logo
Copyright © 2023 Tiny Technologies,
Inc. All rights reserved.
Icons used are from the Noun Project and photos from Unsplash