This unusable information can hinder their experience as well as their perception of your company - which can prove costly. Luckily, with our clever tips below on what web content needs an alternative presentation and why, your website shouldn’t have people scratching their heads.
What needs an alternative?
Here is a list of some of the typical types of content that often come without alternatives.
- Image maps
- Information based on sensory characteristics
- Frames, Objects
- Embedded content, Flash content and the likes
Why does it need an alternative?
The screen reader’s purpose is to navigate content and then report it to the user. While a screen reader can let the user know that an image is present, without an alternative text it cannot let the user know what the image displays or its purpose. “2012/left_bar_pic_420x360” is a prime example of why it’s important to use alternative text for images.
Sometimes a text alternative isn’t appropriate, such as when using a CAPTCHA, since doing so would ruin the purpose of having the image in the first place. In these cases you should use a different type of alternative text, which we’ll cover further below.
Another benefit of providing alternative text for images, besides helping users of assistive technologies, is that it will help your search results. As a search engine is often referred to as a “blind user,” it will help your SEO to provide text alternatives for non-text content.
The accessibility guidelines, WCAG 2.0, advise that you should “avoid instructions provided for understanding and operating content relying solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.” Visitors with poor or no vision cannot see content, so identifying content by shape or color is impossible. These visitors use screen readers, which reads content aloud in one long sequence - so identifying “the box on the right hand side” is also impossible.
Audio / Video
Visually disabled visitors may not be able to see videos, but are still able to listen to the audio. Other users may be the reverse: able to see the video, but not able to hear it.
Some visitors may have problems understanding everything being said in a video even if they aren’t disabled. Non-native English speakers, people in loud places, and those watching before they’ve had their morning coffee all may have trouble following the audio. Providing alternatives such as subtitles will help many users.
If you load content or embed content through an object, a frame or similar, it is important to let users know what kind of content to expect here and the purpose of the content.
How do you provide alternatives?
A good alternative text represents the function of an image and not necessarily what is shown on the image. Consider the following:
- Decorative images: Don’t provide alternative text, but still have the tag alt=””, this way the screen reader will know to bypass the image. Without the tag, the screen reader will compensate and often read the file path for the image.
Hearing “http://www.example.com/files/images/014/dump/2012/04/13/left_bar__pic_420x360” read aloud for every image on every page becomes very frustrating very quickly.
- Images conveying relevant information: Describe the information
- Images linking: Describe the destination
Also note that alternative text (alt=““) and a tooltip (title=““) are not the same. The alternative text is only for users of screen readers to compensate for the lack of visual interpretation. The tooltip is for supplemental information available for all users and visual when hovering over an image.
For images that contain a lot of information, such as graphs, it isn’t always plausible to provide the description through an alt attribute. In these cases, link to a place where the description can be found. Click here for procedures and examples of linking to a long description.
Make sure that the map itself has a description and also that each active region of the map has an alternative text.
Some solutions give an audio alternative for CAPTCHA. Often these do not work well. Other solutions ask a simple question such as: What does not belong? Cat / dog / lady bug. These types of solutions however are not very safe. So if implementing these types of security questions as an accessible alternative, do some research on the possibilities. Some use the mobile phone solution of sending a one-time password to the user’s phone. Another option would be to use dynamic markup along with either cryptographic algorithms or obfuscation to make it more difficult to parse the content of the CAPTCHA.
If you upload an audio file, provide a transcript of the speech in text.
The guidelines for accessible web WCAG 2.0 include a lot of criteria for making video content accessible:
- If you load the video as an object for instance, make sure you have a short description of the video contained within the object tag.
- Provide captions
- Have a text alternate for the content in the video such as a transcript or on a higher conformance level provide audio description.
When using sensory characteristics be sure to give a text description as well, such as, “The box on your right titled ‘Related links,’ or the green button ‘Confirm,’” and so forth.
Frames and Objects
For frames and iFrames the title attribute (title=””) can be used to say something about the content within the frame. As mentioned in connection with video content, whatever is loaded within an object tag or similar needs to have a short description.
Flash and Silverlight content
For content such as Flash, Silverlight, etc. where there are elements such as active regions, buttons, images, and others, alternative texts must be provided. However, it is important to note that these elements aren’t always supported by user agents, and as such when using them to convey important information you should consider that some users may not be able to access the information. In many cases the alternate option may be to mark the content as decorative.
For detailed descriptions of how to do this in a variation of scenarios, the WCAG Techniques provide examples and you can filter by technology (html, flash, pdf, ARIA etc.).