Images and Alternative Text

Images are a very common form of non-text content. Accessibility for images is centered around providing alternative text, as blind and low-vision users will not be able to view them.

A quick note on terminology: Alternative text (or alt text) is a screen reader friendly description of an image that can be implemented in a variety of ways. The alt attribute or alt tag generally refers to the HTML attribute that can be included in images shown on the web. While the alt attribute may be used for alternative text, it is not the only method, so these terms will not be used interchangeably.

Images on the web require the alt attribute, either providing alternative text or as an empty attribute to indicate that the image is decorative. An empty or null alt attribute is not the same as no alt attribute. Null alt text tells a screen reader that it can ignore the image. No alt text tells the screen reader nothing, so it will announce the image and then read out the URL of the image file. As you can imagine, this is very unhelpful.

Alternative text is very easy to include with images. Most content management systems provide a reasonably straightforward way of including the alt attribute with images, and other document editors will typically provide an equivalent. Even if this is not the case, alt text can be added directly to the page content. The difficulty with alt text is that there are many aspects to consider when writing it, and context is everything - what elements of the image are important will depend entirely on the context. However, while alt text may be difficult to master, it is not too difficult to learn, and good but imperfect alt text is better than bad or no alt text.

Informative Images

Informative images are used to convey some type of information that is simple enough to express in a short phrase or sentence. The alternative text should convey the meaning the image is used to convey, rather than attempt to describe the image itself. This alt text will typically be placed in the image's alt attribute, though in some cases it might be included in a caption.

Informative images may include:

• Images used to label other information
• Images used to supplement other information
• Images conveying succinct information
• Images conveying an impression or emotion

When in doubt, it is probably best to assume that the image is an informative image of some sort and should have concise alt text.

Decorative Images

Decorative images are those that do not add any content to the page. These images will typically require an empty or null alt attribute. There is some debate, however, on when an image should be marked decorative and when it should be given some short alt text anyhow. While the dominant view for some time has been to mark images as decorative, some blind and low-vision users actually prefer to have an indication of the image's presence. Clearly, there is not one right or wrong answer here, so the it is best left to the content creator's discretion.

Decorative images may include:

• Images providing visual styling, such as borders, spaces, and containers
• Images supplementing link text to improve its appearance or increase the clickable area
• Images illustrating adjacent text but not adding information (i.e. "eye-candy")
• Images identified and described by surrounding text

Functional Images

Functional images are used to initiate actions rather than to convey information (e.g. images serving as links or buttons). The alt text should describe the purpose of the image, rather than the image itself, so that users know exactly what to expect when they activate the element.

Function images may include:

• Logo or icon images used as links (with or without additional link text)
• Stand-alone images that have any kind of function
• Images used in buttons

Images of Text

Images of text display text that is meant to be read. In general, these images should be replaced with actual text, which is far more customizable and accessible. With a few exceptions, images of text violate WCAG 2.1 standards (1.4.5).

Exceptions are typically made for things like logos or other text where it is essential to provide the image as it is. An example that may be fairly common in a university setting might be an image of a historic, handwritten document. In these cases where the image of text is required, the alternative text needs to provide the same text as shown in the image. For something short like a logo, this can easily be provided in the alt attribute. For something longer, like a document, the image may need to be treated as a complex image, as described in the next section.

Historically, math expressions have been presented as images. There are now tools like MathML that allow for equations to be presented in the HTML, however, so images of math expressions should be phased out.

Complex Images

Sometimes an informative image contains more information than can easily fit in a sentence or two. Examples include graphs, charts, illustrations, diagrams, and maps. These images will typically require some short alt text identify the image and possibly indicate where to find the longer description. A more thorough description may be included within the page text, or a link may be provided to a different page containing the description.

Complex images may be confusing or difficult to understand for sighted users. This means that including the image description in the page text may have the advantage of making the image and content more accessible for all users.

When the alternative text is included on the page, the alt text will generally quickly identify the image and then point to the text on the page. If the text associated with the image is directly before or after the image, using the words "above" or "below" to reference it is perfectly line. While these words describe where the text is visually located on the screen, they make sense in the linear context experienced by screen reader users. If the text associated with the image has a larger gap (i.e. there is additional context between the text and the image) it may make sense to consider actually providing a link to the text, instead. In this case, the link would be provided after the image (you cannot actually put links in image alt text), and the alt text would refer the user to the link.

Other Image Elements

Information about the image that does not describe its content or function, such as copyright or source information, does not belong in the alternative text, but should be placed in the image caption. Image captions may also be used for alternative text, depending on the situation.

If you are familiar with the HTML longdesc attribute, you may notice that it is not mentioned here. This attribute is not recommended as an accessible alternative. Instead, consider including the description in the normal text of the page next to the image. For reference, see Longdesc Test Cases - WebAIM.

Title Text

You may have heard of something called title text. So what is it, and how does it relate to alt text?

• Title text is the text that appears when you hover the mouse over an object. It may also be called hover text.
• If an image has title text and no alt text, the title text will hopefully be presented to the user, but there is no guarantee. However, alt text is better for accessibility and should always be included.
• Title text is not generally accessible to screen reader users, keyboard navigators, and mobile users. Therefore, it should not include any content that is not already present on the page and accessible to these users.

Title text does not introduce accessibility issues simply by existing, so it is not an error for an image or other element to have title text. As long as whatever is presented via title text is also clear via other means, you should be fine, but don't include it just for the sake of it.

Other programs may not use the terms alt text and title text consistently. In HTML, "title" and "alt" are the names of the attributes attached to the image. A program like Microsoft Word does not use HTML, so the way it refers to alternative text in an image may be different. Review guides for accessibility in such programs for more information about how best to provide alt text there.

Resources

This is a brief summary of using alt text, as there is some truly excellent information out there. These are a few resources you may want to check out to learn more. You may find them particularly helpful if you use a lot of images.

Audio and Video Media

1. Audio-only content should have a written transcript (or other equivalent text alternative).
2. Video-only content should have an audio track, and/or some form of equivalent text alternative.
3. Synchronized (audio and video) content should have captions. Prerecorded content should also have an audio description.
4. Ensure controls (play, pause, toggle captions, etc.) are accessible for screen readers and keyboard navigation.
5. Do not have videos play by default or loop endlessly. (While some cases of playing a video by default may be accessible, it is harder to ensure this and good practice to avoid it in general.)

Captions

While the primary audience for captions is anyone who is deaf or hard of hearing, there are many, many people who benefit from captions. This includes anyone who is dealing with a technology issue preventing them from playing audio, anyone in a noisy place or lacking headphones in a place where they need to be quiet, and non-native speakers (e.g. non-native English speakers for audio that is in English). Captions are also especially useful when the original audio quality is poor or there is wide variation in volume (i.e. some speech is very soft, but the volume can't be turned up without making other sound effects way too loud). In short, captions are a basic necessity for an accessible video.

1. Make sure it is possible to turn captions on or off. In some cases, captions can actually make a video less accessible. For example, people with ADHD may find it harder to focus on a video when captions are turned on. Additionally, this makes it possible for someone to provide additional captioning options, such as captions in a different language.
2. Give caption text sufficient contrast with the background. Because background colors may vary in a video, a useful technique is to have the text outlined in a color that contrasts well with the actual text color.
3. Do not let captions obscure important background elements. Occasionally, it will be necessary to move captions to a different location, like the top of the screen, if there is something important happening at the bottom where captions are typically shown.
4. Captions are more than subtitles. In addition to spoken words (or sounds), captions should indicate other noises (e.g. *door slams* *upbeat music plays*). They may also need to indicate tone of voice in certain situations.
5. Make sure captions indicate the speaker, when applicable.
6. While it is good to make use of them, do not rely on automatic captioning tools. Starting out with an auto-captioner can make life easier, but it will not be accurate enough for accessibility (and will not indicate other sounds beyond spoken words). Always go back and edit the captions. It may seem like a painful process, but at least it is less painful than creating the captions from scratch.

Transcripts

Typically, transcripts will include the same text as captions, just in a slightly different form.

1. If possible, go for a synchronized transcript. This should be relatively doable when creating a transcript from captions or vice versa, as the time information is required for captions anyhow. Synchronized transcripts can indicate which part of the text is currently active in the video, and even allow viewers to select a section of text to jump directly to that spot in the video.
2. When turning captions into a transcript, remember to consider spacing. Captions typically do not indicate paragraph breaks, which means they may generate a transcript that looks like an intimidating wall of text.
3. If the transcript is serving as alternative text for video content (that is, as text that can be read to a blind or low-vision person who cannot watch the video), make sure it provides the additional content that would be included in an video description (described below).

Video Descriptions

Video descriptions (sometimes also called audio descriptions) are extended descriptions provided for video or video-only content. These descriptions should definitely be provided as text, as that way they can be read by screen readers (for blind or low-vision users) and be output by refreshable braille displays or similar devices (especially necessary for people who are both blind and deaf). Ideally, the description will also be provided as an audio file, as this will be much nicer to hear than the automated voice of a screen reader.

While video descriptions are often ignored when it comes to accessible media, they are essential. People who are blind or low-vision need to be able to know when important content is shown in a video.

1. The necessary content for a video description is normally very dependent on context.
2. The content of the video description should be separate from the default audio or captions. The track for an audio description may be synchronized to play during the default audio without interference, or it may take the place of the default audio entirely. In many cases, the audio description will need to be longer than the default audio, unless there are large enough pauses to fit all the necessary information.
3. Video/audio descriptions are not required for videos of talking heads where there is not any important visual information.
4. Video descriptions should always provide descriptions of included equations, slides, or other text.
5. When including equations, slides, or other text content in a video, it is best to provide written versions of these as well. With slides, this can be as simple as making sure the presentation is accessible and then providing that directly.

Embedding Videos

When embedding videos, make sure that the video is clearly (and succinctly) identified. A common method of embedding videos is to include the HTML embed code within a webpage, which will typically enclose the video within an <iframe> element. In this case, make sure the title of the iframe provides the necessary information. Presumably you will want to put the name of the video and possibly the word "video" within the title. Additional information about the video (what it contains, why it's important, metadata, etc.) can go above or below as appropriate, but should not be provided in the iframe title.

1. Look for <iframe ... title="some text"> within the embed code (assuming it uses an iframe).
2. The title text should be short and informative. If it already is, you may not need to change anything.
3. Assuming the title is not both short and sufficiently informative, replace the default text and add in the title of the video or media you are embedding. If the title does not exist at all, you can add one (to keep this simply, you may want to add it immediately after the iframe begins: <iframe title="some text" ... >. Note that you will likely want to include the word "video" at the end to make sure screen reader users know exactly what to expect.

Animations

1. Avoid automatic or looped animations, blinking objects, and scrolling. These are distracting, can prevent users from having enough time to access content, and can even trigger epileptic seizures or headaches for some users.
2. Avoid animated GIFs. This is covered in the first point, but GIFs are so widely accepted that people may not think of them in the context of inaccessible animations. Animated GIFs can be accessible if you ensure the following:
   1. The animation stops after 5 seconds, or the user is provided a way to pause it.
   2. The GIF has proper alternative text.
   3. The GIF does not contain blinking or flashing content.

References