Aaron Preece
When implementing accessibility for people who are blind or have low vision, the techniques are generally quite binary such as, "Does your button have a label?" or "Can someone access this content with a screen reader?". When it comes to providing accessibility for non-text content, particularly images and videos, it becomes more complex. In this piece, I will walk you through the basics of providing descriptions for static images as well as providing audio description for videos. In addition, I will include various tips and suggestions for producing high-quality alternatives for non-text content, as well as link to resources where you can find much more information.
Creating alternative text or audio description is an art more than a science. For this article, I will base my suggestions on what I have learned about these subjects after working in the field of accessibility as well as what I have found most valuable as someone who himself is blind and makes use of descriptions. There will be many resources linked throughout this article and I highly recommend giving them a look, everyone will have their own take on how to design description and all is valuable as you determine the strategy you want to use for your own content.
Descriptions for static images
For this piece, I will be focusing specifically on creating alternative text (Alt Text) that is spoken when a screen reader user focuses on an image. It is always possible to provide external descriptions directly included as regular text. The suggestions here will be helpful when creating descriptions as a whole, but descriptions that are included as plain text generally can benefit by being longer and more detailed.
It is possible to include Alt Text in nearly every instance where you may have an image. Alt Text can be included for images on the web, both those you create on your own site or post on social media. See the resources section for details on including Alt Text for each of these instances. Alt Text should be possible when working with most programming languages either for mobile apps or desktop software, but you will need to see your specific language's documentation for details.
When you include Alt text on your site, you need only compose Alt Text for content relevant images. If the image only serves the purpose of decoration, it should not have Alt Text and it should also be hidden from screen readers. Again, see the resources at the end of this section for how to accomplish this. Important images include anything that contribute to a full understanding of the page or content. For example, some articles include a key image that is not necessary for understanding the piece but are included for visual flair. In this case, the image should have a brief description for the user's reference, but it can be brief and relatively undetailed.
When composing Alt Text, the driving goal should be to present the information contained in an image that is most important for the user to have full understanding of the page. In addition, when possible, it is best to keep the Alt Text fairly brief, communicating only the needed information. For example, many sites have an image link of their logo to take the user to the homepage. In this case, you would not need to describe what the logo looks like, only the text "(Name of company) logo". As an example, you may write something similar to "American Foundation for the Blind logo" or "AFB Logo". To be more precise and let the user know this will take them to the homepage, you could write something like "AFB Logo: Home". If you have an About page on your site where your logo appears, this would be a good place to describe it, as this info may be interesting to users and would not cause unneeded clutter.
Alt Text can be combined with a caption or other text-based description for better effect. Consider a theoretical article about a company releasing a new product. In the article, there is a photo of the CEO of the company speaking at a press conference about the product. In this instance, we may have Alt Text that says something like "A Caucasian woman with green eyes and brown shoulder-length hair wearing a blue shirt speaks at a podium." The caption could then be "Jane Doe, CEO of (Company name), speaks about the features of the company's newly released (product name)". This can also be a helpful way to describe graphs or other images of data. The Alt Text could identify the type of graph and the overall data that it is showing, while a caption that follows could explain the data points in detail. Remember, especially when navigating using arrow keys or other manual methods, long Alt Text may require that the user scrolls past several lines before coming to new content if they are using a screen reader.
Alt Text Resources
There are many exceptional resources that provide guidance on developing Alt Text, here, I include several.
- How to Write Alt Text and Image Descriptions for the visually impaired: This piece from the Perkins School for the Blind is a fantastic resource covering many aspects of Alt Text and image description in general. The article is also helpful in that it explains how to include Alt Text on various social media platforms.
- Alt Text Decision Tree by the World Wide Web Consortium (W3C): This decision tree guides you through a set of questions regarding the image you wish to describe and provides guidance on doing so based on your answers about the image. It is a great way for developing solid and consistent Alt Text for your images.
- Success Criterion 1.1.1 of the Web Content Accessibility Guidelines (WCAG): The WCAG is a set of guidelines produced by the W3C that thoroughly details accessibility standards for the web and is considered the gold standard for guidelines on web accessibility. This success criterion specifically deals with providing alternatives for non-text content, including images.
- Informational page on the HTML
alt Attribute: This page, again from the W3C, provides the technical details on including Alt Text on the web.
Audio Description
Audio Description is audio narration during a video or film that describes visual information so that the media can be comprehended by someone who is blind or has low vision. Traditionally, audio description was considered for primarily film and TV but with the ubiquity of video content on the web it has become important to understand and implement audio description to provide a fully accessible web experience.
In basic terms, audio description provides a direct explanation of what is occurring visually in a video. Though the idea may be straightforward, there are many aspects that must be kept in mind when developing an audio description track for a video.
Generally, audio description tracks are added after the video has been fully completed so that the describer can have the most information possible when crafting the script. For example, when including audio description, it is key to not include description when other speech is being spoken in the primary language of the audience. This could be either dialogue between characters or speech provided by a narrator during a documentary. With this taken into account, a video is going to have wildly varying spaces of free audio real estate where description can be included. As an example, let's take a look at the audio described trailer for Star Wars Eclipse, an upcoming video game.
Though there is no speaking in this trailer, the crafter of the audio description script had specific choices to make. Notice that scenes in this trailer often flash by quickly, leaving little time to describe what is happening. This is most noticeable when different alien species are identified. Normally, when there is time, the appearance of alien species would be something to describe in detail, but with the fast passage of scenes, there is not time to do so. The describer assumes that the viewer either knows what the aliens look like or can look up this information online.
Something that this piece demonstrates is the order of importance of information. It will differ depending on the contents of a video, but when developing an audio description script, the focus should be on the crucial information in the video. For television and film, this generally means that actions should be described first with scenery and characters second and only when there is time. After action, whether describing scenery or the characters/people who are speaking in the video will differ. For example, if diversity is important to the content of the video, being sure to describe the individuals speaking may be quite important. Conversely, if the video is a documentary on ancient Greek temples, the description should focus on the appearance of the temples, not the people talking about them.
Where Audio description is such a venerable institution, there are many resources that aim to aid in following best practices for its creation. The Audio Description International Guidelines Committee (ATI) drafted a document detailing their proposed best practices for creating audio description. Though the document was created in 2003, the contents are still relevant today. The University of South Carolina has also produced a document detailing audio description best practices. Harvard University) has produced a similar document with links to further resources.
This is a small selection of resources, again, considering the age of audio description, resources are plentiful online.
The Bottom Line
It is helpful to remember that providing Alt Text and the option to have video content described is useful for users aside from those who are blind or low vision. Alt Text is displayed when images cannot be loaded or when the user turns images off on the web. People who can normally see a video may not be able to do so for various reasons and may appreciate the ability to use audio description in that circumstance.
As mentioned previously, in many instances, providing description for non-text content can be more an art than a science. The suggestions in this article are based on the knowledge I've gained from working in the access industry for the past decade as well as what I have found helpful as someone who uses a screen reader themselves. The resources in this article may suggest other methods for some of the scenarios detailed here.
I hope that this article has prompted you to consider providing description for non-text content if this subject is new to you. I also hope that, in general, the tips and suggestions I have provided, as well as the perspectives of the resources detailed here, are valuable as you implement descriptions for your images and videos.
