If the only way to understand an object, image, link, or button is visually, then it is not accessible to someone who is blind. Appropriate labeling and alternative text ensures users have more than one way to gather information about a given element. Labels and alternative text are programmatically determinable information that is vital for assistive technology, including screen readers and braille displays, that many blind people rely on. This video of a screen reader user unable to access content demonstrates what a user's experience is like when the necessary information is and is not present. This video demonstrates how providing only visual information complicates navigation.
Adding Programmatic Information to Visual Content
Programmatically determinable information refers to the ability of a user’s technology to extract and display information in whatever way works best for the user. For example, one person may choose to view an image as the page displays it, while someone else may enlarge it and change some of the colors, and a third person may prefer to read the alt text. Having programmatically determinable information means all three people can access the information the way they want.
To help decide what programmatic text to use, think of what you would say if you could not use an image or graphic.
Types of Programmatically Determinable Information
Alt text for images and objects
Images and objects that are important to understanding the surrounding content should have a concise description that communicates the core of the meaning of the graphic. If an image is only for aesthetic purposes or if a graphic only emphasizes a character that is already in the text—for example, a graphic exclamation point following a sentence that ends with an exclamation point in the text—then it should be assigned the null alt text so a screen reader will skip over it. As a quick test, set your browser to not show any images and see if the content makes sense.
For more information and tips, read about alt text on WebAIM
Information in a video
There are several ways to make sure video information is accessible, and the best option partially depends on factors such as the length and density of the information and surrounding context.
- Audio description is when a narrator uses pauses in the audio of a video to explain information that is otherwise only communicated visually. WGBH in Boston is one organization that has created a number of audio described programs and pieces of media. This page from the American Council for the Blind’s Audio Description Project provides several samples of audio description.
- Transcripts are not just for deaf or hearing impaired viewers. Some visually impaired users prefer to read transcripts, because they can do so faster than watching the content and a transcript can include text about what is happening visually in addition to the dialog commonly associated with a transcript.
- Static descriptions of a video might appear next to the viewing frame to aid those with vision or hearing impairments. This is particularly useful if the video is short and demonstrates a single concept.
This video of an erupting volcano could have the following text accompanying it: “The accompanying volcanic eruption goes through several stages, beginning with white smoke coming out of the top of the mountain, moving to explosive lava, then lava combined with dark smoke and detritus, and finally the eruption subsiding into gray smoke.”
Proper labeling of links and buttons
If a button or link is unlabeled, the screen reader user will only hear “button” or “link” when they navigate to it, even if a sighted user can see associated text. A graphic, including a graphic of text, over the control might make the purpose clear to a sighted user, but a screen reader winds up reading it as whatever surrounding information it can find, including a URL or the name of the graphic, and that is meaningless to the user. Make sure that all buttons and labels have the proper semantic markup, complete with a label.
WeBAIM’s article about alt text provides information on labeling functional images and graphics.
Using proper basic semantic code will provide the necessary programmatic information to supply the text and labels a screen reader user relies on. Every image or graphic needs an alt attribute, although the content of each depends on content and context.