Make it Accessible – Alternative Text

What is Alternative text?

Alternative text, sometimes known as Alt Tags or Alt Attributes, is used to provide a description of certain elements of web pages or documents, normally non-text based content, that a blind or visually impaired person might otherwise not be able to experience. Alternative text is typically used on images and tables but can also be added to charts, shapes, and even audio and video files.

Most web-based systems and document creation tools have the ability to add alternative text, yet lack of alternative text is one of the most common examples of poor accessibility in web pages and documents. Writing Alternative Text descriptions is not always easy. The most important principle to consider is that of context. The alternative text should describe the image in the context that it is being used. A single image could have different alternative text depending on its use. WebAim (2010) states that:

The alt attribute should typically:

Be accurate and equivalent in presenting the same content and function of the image.

Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

NOT be redundant or provide the same information as text within the context of the image.

NOT use the phrases “image of …” or “graphic of …” to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

https://webaim.org/techniques/alttext/#context

Example Alternative Text

Let’s look at the following image.

Our notional context for the use of this image is that of a web page news article about a new initiative led by Professor Alec Cameron, Vice-Chancellor of Aston University.

Bad example of alternative text – “An image of a man wearing a suit.”

Although this text describes the image it loses all context related to the person in the image, which is important in the context of the article.

Good example of alternative text – “Professor Alec Cameron, Vice-Chancellor of Aston University.”

This retains the context of the article by explaining who is in the picture and their role.

Best example of alternative text – “Professor Alec Cameron.”

Not only does this retain the context of who is depicted but it does not duplicate information that would be in the news article. It is also more succinct.

As a side note, the alternative text I have used for the image in this post is “example image” due to the context in which the image is being used.

For more information please take a look at this guide on writing alternative text by WebAIM.

When not to use Alternative Text

As described above alternative text is used where an image is an integral part of the information being conveyed. When an image is used in a purely decorative context you should not use any alternative text. Using alternative text to describe the decoration will simply add noise to the user experience.

At Aston, there are three main areas where adding alternative text is important to ensure that students and staff alike can access the content that you are making available.

Blackboard.
Microsoft Office Documents (predominately Word and Power Point) If you create PDFs from any Office software this includes those PDFs.
Aston’s website – Contensis.

Of course these are not the only places that you should add alternative text, and I’m sure many of us also think of software that we use where this would be appropriate but for the purposes of this post I’m only going to provide quick guidance on how to do this for the 3 areas mentioned above. You are encouraged to explore the idea of alternative text in your own context.

Adding Alternative Text in Blackboard

Blackboard has the ability to add Alternative Text to images as well as other content such as tables.

Images

For images put the alternative text in the Image Description field.

Tables

For tables put the alternative text in the Summary field, found in the advanced tab.

Adding Alternative Text in Microsoft Office

The following guidance will show you how to add alternative text in Microsoft Office products. It also includes a tutorial on how to “Make the Alt Text command readily available in Office 2016/2013″.

Adding Alternative Text in Contensis (the website)

The following guidance will show you how to add an image to Contensis and where to enter the alternative text.