Alternative text is the textual alternative for media for people who have visual issues and utilize technology such as screen readers when browsing a website. Simply put: the alternative text is what supplements the media for someone who can not see the media. Accessibility Policies for alternative text do not just apply to images. The Web Content Accessibility Guidelines (WCAG) success criteria for alternative text apply for all media types, including videos and animations, embedded within your website.
The most common type of media used within a website is images. This is why there is such an emphasis on alternative text for images. Images have a built-in tag called "alt text," so it is commonly where the brain goes when talking about alternative text. "Oh, alt text!"
All of that said, I do want to focus on alternative text practices for this blog. Quality alternative text does not mean just having something filled in. There is even debate on whether filling in alternative text for images always makes sense. For instance, if the image is just for aesthetics, some schools of thought teach to leave the alt text blank and add the attribute role=”presentation” to the image tag. Most screen readers would then skip over the image and not waste the visitors' time describing an image that is really just an accent to the page’s content.
However, one thing to note with alt text is that it isn’t just used for visitors utilizing a screen reader. It is also displayed with a broken image icon if the image fails to load on a page. This additional functionality is why I always suggest filling in alternative text. I would rather a web visitor with limited bandwidth who sees broken image icons know what is not displaying rather than having them wonder what could be there.
Automated crawlers typically detect whether you have images with empty or blank alt text. This is the out of the box behavior that DubBot uses for flagging pages.
That brings me to my next point; having something filled in doesn’t necessarily mean that what is filled in is quality content. It is, however, sometimes step one for remediating a website. Give me all pages with images with no alt text. After that, you will want to start reviewing what alt text is included.
Alternative text for images should describe the image or the image's function if the image is being used as a link. This can sometimes mean that instead of describing what is depicted in the image, it is important to describe the image’s function. For instance, an image displaying students graduating with text included as part of the image that says, "Your Future Starts Here. Apply Now" that serves as a link to your Apply page should be described as "Your future starts here. Apply Now" rather than "students walking at graduation."
Programmatically speaking, there is no tried and true way to determine whether the alt text included is actually quality. There is no easy way to currently check that images do not contain text embedded within them.
There is, however, the ability to create additional programmatic tests for raising flags for things that are likely not quality alt text.
With DubBot, we often use Custom Checks to flag pages with images that match the following:
- Alt text that contains the image's filename
- Alt text that contains the word "image."
- Alt text that is only one word
- Alt text that contains default content that a CMS may input as a backup
What is your policy for alternative text for images? Do you believe that leaving alt text blank is better than describing it in the alt text?
The W3C has a great tutorial to learn more about alt text and image types.
I’d love to hear your thoughts!
