Why image accessibility is a must-have for your website
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.
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:
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.
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?
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.
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.
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:
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:
Or, read this for more detailed information on adding alt text in various Office versions.
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:
The TL;DR is that alt text should be succinct enough to communicate the idea without burdening the user with unnecessary detail.
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 Classification||Image Description||Add Alt Text||Leave Alt Text Blank|
|Informative||Image shows a concept, information or adds meaning to the text||✅|
|Decorative||Image doesn’t add any information, meaning or functionality to the page||✅||❌|
|Functional||Image performs some function – like a button or link||✅|
|Complex||Data visualizations (infographic or chart) should provide a text alternative (immediately after) or a link to the underlying data||✅|
|Text||Avoid 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 …’
The alt text for these images should be a short description conveying the essential information or meaning of the image.
For these images, a null text alternative (alt="") should be provided, because they do not enhance the understanding of the content for the user.
For these images, the alt text should describe the functionality (and destination) of the link or button rather than the visual image.
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.
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:
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.
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.
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.