Alt text (literally the text that is an alternative to the image) is read by a screen reader when the user cannot see the image. This is where you want to make sure that you’re conveying the same information that is contained in the image. Most users of screen readers indicate they do not want alt text for decorative images, which is documented here at webaim, for example. Decorative images tend to be present mostly for visual appeal, rather than conveying information.
Like many areas of accessibility, there is no “one size fits all” or clear-cut formulaic way to determine the best alt text for an image, but there are some things to keep in mind. You need to take into account the context and your intent. Try asking yourself the following questions:
- What text surrounds the image?
- What did I mean to convey when I decided to include the image?
- Why did I include an image here, rather than no image at all?
- Does the image contain text that needs to be conveyed?
These questions should be answered in the alt text of the image, in a concise manner.
Here is the image from the top of this entry again:
The alt text for this image is “Screenshot of arrow showing that the alt text box in WordPress is the fourth entry field from the top when uploading media. Text overlay indicates that alt text should only be used for content images, not for decorative images.” This describes the location of the alt text box, which is the main take away message from the image, as the arrow is clearly pointing to the alt text box to indicate its location. It also describes the included text overlaid on the image, as this is not accessible to a screen reader (for the screen reader, the text is just a part of the image; it’s not actually interactive text).
This is not the one and only perfect alt text for this image. However, it includes pertinent information at the generally acceptable level of description; it describes the overall image and its intent clearly and concisely. It is longer than is generally typical because it includes a text overlay that is not accessible to the screen reader; however, it does not go overboard by describing unimportant characteristics, such as colors, fonts, or other text fields that are in the screenshot, but not related to the purpose of the image.
If you want to learn even more about alt text, Webaim has a deeper exploration that is well worth exploring.
Videos are a great way to enrich an experience, demonstrate a task, or provide a visual supplement. When using video, it’s imperative that videos be captioned, so that there is text available for those who cannot hear the audio in a video.
For the most common form of website video–embedded YouTube videos–captions are not always readily available and even when they are, accuracy is not always optimal. There are two things to keep in mind with captioning with YouTube videos:
1. Is it captioned at all?
The vast majority of the time, the video owner is responsible for making sure that captions are available. You can check and see if a video is captioned by looking in the bottom right hand corner of the video player; if a “CC” is present, such as in the image below of a TEDTalk, the owner of the video opted to have the item captioned. If a “CC” is not present, your video is not captioned.
2. How accurate is the captioning?
All captioning is not equal. Make sure to watch your video with the sound off and captioning on prior to using it on your site. Can you understand the captioning? Does it cover everything it needs to? By doing this, you can check to see if the captioning provided allows for the understanding you are aiming for by using a video supplement. If it doesn’t then you can fix it.