Alt Text, your quick guide

Alt text is short for alternative text and is a requirement of WCAG2.0 level A, for all web image content. The most basic level of accessibility and probably one of the most missunderstood issues.

Alt text, the what and why

In HTML, you can include images to be displayed in your web pages. This is done through the tag <img>. If you are using a CMS or other web content editor, you may only know it as uploading an image. Inside this <img> tag, you can add an alt text value. It doesn’t do anything visually in most browsers except older versions of Internet Explorer, which shows this alt text value when you hover the mouse over the image.

The single purpose of this alt text is to provide a short text alternative to the image for cases when the image can not be seen. This may be for a number of reasons from the browser doesn’t support images, the image failed to load or the person viewing it is not able to see due to sight impairment.

What text do we use

The first thing to note, is the purpose of the image. If the image is used as a link to something and there is no link text being used, then the purpose is to link to something.

So for instants, if we have an image of a satellite dish that is used to link to Sky TV, the alt text should say "Sky TV" and not "Satellite Dish". This is because the text Satellite Dish, does not tell you anything about the purpose of the image where as Sky TV tells you what to expect if you follow this link.

Embedded text, this is text saved inside the image that can not be selected or copied into a text editor. If your image contains embedded text then this should be included in the alt text. Unless the text in the image is too long or not relevant. So if you have a button image with the text "sign in" inside it, then your alt text should say "sign in" and not "login" or "button". This can avoid confusion when people refer to what they see when talking with people who are not able to see the image and rely on the alt text.

Generally you should avoid using embedded text, where possible and especially for long pieces of text. As it does not scale as well as regular text and alt text is only for short alternative descriptions.

Photos and other images that are used to give some general impression but does not add substantial content. These may include a picturesque photo of a location, groups of people or other atmospheric picture. They do not need every detail documented in the alt text. You can simply use a very brief text like "a picturesque view of …" or "friends gathered at …" etc.

Charts, diagrams and other complex data related images, are probably the most difficult as the alt text only needs to be a general comment to say what the chart or diagram is for, say "pie chart showing …" or "flow chart of …" etc. However, as it will also contain substantial content within the image, you should either place this information adjacent to the image in a text form or have a link to a text alternative that says something like "details of the pie chart on …" or "detailed description of the flow chart on …".

HTML does support something known as longdesc, short for long description. However, it is often used incorrectly and not well supported or understood. So either of the other methods are generally preferred. To find out more about using HTML longdesc, see www.w3.org/TR/WCAG20-TECHS/H45.html.

There was some controversy over longdesc in HTML5, you can read a little about this on Bruce Lawson’s longdesc in HTML5 article.

Decorational images, these are images that add no content value to the page and are only there for visual decoration. These may include things like background textures, ribbons, floral borders etc. The best practice is to separate these into your style sheet and not include them within your HTML content. Many people have tried different methods from using null or empty alt text to generic non descriptive alt text like an asterisk “*” or words like “spacer”.

The problem is if you place decorational images inside your HTML, it is treated as content and not just styling. So people who use assistive technology like a screen reader, may be able to detect the image but either get no text or text with no meaning. This can cause people to believe they are missing out on content or just have a distraction to other content.

Tips for alt text

  • Don’t start with things like "image of …" or "Picture of …" or "Link to …" as assistive technology will already be able to indicate this and it results in people being told twice it is an image before they find out its real purpose.
  • Keep the alt text short, meaningful and relevant to its purpose.
  • Place text alternatives for complex charts, diagrams or other data content adjacent to the image or in a separate page linked to from either the image or adjacent text link.
  • Think carefully before choosing to use the HTML longdesc and remember it is to link to the long description and not contain the long description itself.
  • Place decorational images in your style sheets, to keep your content and styles separate.
  • Take care where you place images within your content, inline images placed in the middle of content can be both distracting and confusing, regardless of how it is displayed through your style sheet.
  • Ask people who use assistive technology, if the content including images makes sense or ask an accessibility specialist.

Conclusion

Understanding alt text is part of the first principle of WCAG2.0 Perception, How people view your content regardless of ability or any assistive technology used. It is in the lowest minimum level WCAG2.0 A and can effect many people as well as your SEO (Search Engine Optimisation).

So taking a little time to understand alt text and just spending a few extra minutes on your page content can make a difference to your SEO and the people who view your web pages.