Image Labelling for Accessibility (and SEO)

We live in a visual world. Images are used as shorthand all the time, and since the arrival of rapid internet access we communicate more than ever through photographs, gifs and emojis. Just take a look at your social media feeds and you will see them by the score.

emojis: inaccessible to the visually impaired

So imagine if you couldn’t see those images at all. That’s the day to day experience faced by millions of people with visual impairments. Your use of an animated gif to express surprise or amusement might literally be impossible for someone to understand – or even access.

Some of you might run a website – a blog, or even an online shop. Now imagine the experience of trying to navigate and use your site if every image was just a blank space on the page. That is the reality faced by many users of the internet.

But there is good news! The originators of the internet foresaw the need for inclusivity, and built a series of protocols into the coding behind the internet to support labelling of images. Not only that, but a raft of software has been developed to ‘read’ that code – often literally – for the benefit of visually impaired or blind users.

It is up to all of us to take advantage of this technology to make the world a little bit more accessible.

A happy side effect of taking accessibility into account is that Google’s spider is in effect like a ‘blind’ user of your site. It will take account of image labelling in its ranking of your site – and so it is important for SEO to make sure you follow these guidelines, even if you don’t aim your content at visually impaired people.

How it Works

When a visually impaired user visits your website or social media stream, the software they use is different to that used by the majority of us. In some cases, images are hidden altogether, and only tex

Webbie is the mostly commonly used screen reader

t is displayed – often in a high contrast colour scheme and at a much bigger scale. Too see how this affects the user experience, we recommend downloading WebbIE.

Where the eyesight is impaired to such a degree to make reading impossible however, users might be using screen reading software such as JAWS. This actually reads content aloud, or even try it translates it to Braille through a clever interface.

Before looking at what you do with your images, try downloading some of this software yourself to see how it works and understand exactly how different the internet is when shorn of the visuals so many of us take from granted.

General Principles

Before we get down to how to put text behind an image, it’s worth thinking about what it is we’re trying to convey. The general principle is to explain as much as possible about what is in the picture with clear and comprehensive descriptions that make sense within the context of the piece.

For example, lots of articles use photographs of people simply wearing emotional expressions to add a kind of ‘feeling’ to the accompanying piece: perhaps a pensive-looking man, or a happy couple.

These might not be essential to the content but lend useful context. Descriptions should therefore convey the meaning of these images and reflect this context: “A pensive looking man, reflecting the way in which people are affected by this issue”, for example.

The alt attribute as seen in HTML codeYou do not need to say “a picture of” at the start of the description as the software or user will be able to determine this for themselves.

Some photographs are more specific. A good example would be product photography if you’re looking to sell goods or services. A great description would include dimensions, colour, and function of the product: “The Trabasack Curve. This is an all in one wheelchair lap tray, travel bag and lap desk. It is 30cm wide and 28cm deep. It comes in black or purple trim, and fastens to any surface with Velcro fastenings” for example.

Each case is very different, so it is up to you to spend the necessary time to craft detailed descriptions that would offer the most help to your site visitors.

HTML sites

If you are writing your own code (or have a web developer working on it) then the most of the legwork is handled by two attributes:

  • The Alt attribute
    This is a concise description of the image and should convey everything that a user might need to know about an image . If you are not visually impaired yourself, and don’t use a screen reader, you can see what this is by hovering your mouse over an image. If an alt attribute exist, you will see a ‘tool tip’ style note . Full guidelines are available here.
  • The Longdesc attribute
    While no longer supported by some modern browsers, this attribute gives you the opportunity to link to a longer, more detailed description of the image. Again, guidelines for use are available here.

Social Media

The two major social media sites – Facebook and Twitter – support accessible labelling of images, and you should pay regard to their own guidelines and the tools they have made available for you to deliver great accessible content.

  • Twitter’s guidelines can be viewed here.
  • Facebook’s guidelines are here.

For other sites such as LinkedIn and Tumblr, it is unfortunate that there are no native ways to support accessibility. When posting images on these sites, you should give all necessary context in the text accompanying them.