Why image accessibility is a must-have for your website

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:

• An MIT study found it takes only 13 milliseconds for the human brain to process an image.
• Humans can grasp the sense of a visual scene in less than 1/10th of a second.
• Our brain processes images 60,000 times faster than text.

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: