Alt tags for inclusion

Alt tags are such a core part of disability-inclusion, and with the rapid digital transformation we’re seeing in all areas of our lives, it’s time we got them right.

Pixelart graphic of landscape scenery with a tag with the word alt attached to it

A picture is worth a thousand words, and as designers and marketers we spend time carefully choosing imagery to best communicate our brand message. But what if people can’t see the image or brand logo?


Alt tags allow people with visual impairments to interact with image and graphic elements in your website, email and social media. Screen reader tools, such as JAWS or VoiceOver, read out the alt tag as an audio description of your image. 


In 2020 the estimated number of blind people worldwide was 49.1million, with an additional 255million with moderate to severe visual impairment. That is a very large number of users experiencing the internet primarily as an audio experience


When you consider all of your brand touchpoints, remember that alt tags are a crucial part of your customer experience for many. You need to take the same care over writing the alt tag that you did when choosing the image. You chose that image for a good reason after all, it was important to your brand. So use alt tags as an opportunity to trigger the user's imagination with words and make them feel included and welcome on your site.


Alt tags are also great for SEO as search engines cannot interpret images without them. You will be penalised if you don't use them.


So what type of alt tags should we be using and when?


Informational

Use these when your image contributes meaning to the context. 

  • Simple graphic - give a brief description of the image that conveys the meaning.

  • Graph or complex image - use a short summary and include information below the image.


Decorative

When the image is purely decorative such as a background texture on a web section, use an empty alt attribute “ ” . This is also true for when an image is described in text close by. This saves the user time as their screen reader won’t spend time describing things that aren’t actually adding anything meaningful or are duplicating things that have already been read out.


Functional

Use these when an image has a function such as a link or button.

  • Image leads to a link - Use alt=”destination of link” e.g Home.

  • Specific function (button) - Use alt=”function of button” e.g search, or print.


Now that you’ve defined what alt tag is required, here are our top tips for writing informational alt text.


  1. Be specific where possible. For example if the image is of someone giving a conference don’t just say “person giving a talk at a conference”, say who they are and where they are: “John Jones giving a keynote speech at ABC Conference, UK”.

  1. Relate things to the context of your webpage and products/services. For example with more general images or stock imagery instead of saying “woman using a computer”, say “woman optimising an eCommerce website for SEO”. Remember you are still selling yourself in the text.

  2. Keep alt text under 125 characters as screen readers typically cut off reading them at this point.

  3. Don’t start alt text with ‘picture of…’ or ‘image of…’. Search engines and screen readers already know it's an image, so get straight to the point.

  4. Use keywords for SEO, but sparingly. If your target keyword is easily included within the alt text then go ahead. This will help search engines pick the image up. But don’t plaster it everywhere, this will be irritating for users.


🏷

We hope we’ve inspired you to uplevel your digital accessible brand experience when you’re next writing those alt tags. So many users will thank you for it.

Blog written by Lizzie

Written by Lizzie

Back