Creating alt tags that conform to Web Content Accessibility Guidelines (WCAG) ensures all of your readers can have access to your website's images. Here's a look at how to create effective alt tags for accessibility.
The alternative text attribute of the image tag - commonly referred to as the "alt tag" - is one of the original HTML tools developed to support the accessibility of web content.
Simply put, the alt tag should contain a description of the image displayed. Think of how you would describe a picture to someone who cannot see the picture, as over the phone for instance. The more detail the better, but it is important to be efficient. A balance among verbosity, brevity, and detail is required.
In the above image, you could say "car" or "orange car", but in this case you can be quite specific and paint a vivid picture: "Orange 1956 Chevy 150 2 door post front view". However, there's a gotcha in this alt tag. It seems fully detailed, but we must take care to recognize how we want the information to be relayed to those using screen readers. A screen reader will read the example as:
Instead, you may want to consider:
This solves our problem but opens up another issue. What if we would like to have a caption that is visible to all users, and which may be redundant to those using screen readers? It's clear that our nicely formed alt tag will appear cumbersome in a visible caption. Also, if we include a caption adjacent to the image that is very similar to the alt tag, a screen reader will read both - perhaps causing confusion. You can remove the caption from the accessibility tree and thus the screen reader by adding role="presentation" to the caption:
<div class="attribute-image"> <img src="IMG_1515_portfolio.jpg" alt="Orange nineteen fifty six Chevy one fifty 2 door post front view"> </div> <div class="attribute-caption" role="presentation"> <p>Orange 1956 Chevy 150 2 door post front view</p> </div>
Remember, role="presentation" is to be used only if it enhances the experience for all users. Take care not to exclude content for one set of users that may require the use of the accessibility tool set.
On websites that display product images, the product name is an obvious candidate for the alt tag, but make sure to include details that may distinguish the image from images of the same product - front view, back view, red in colour, etc.
It is important to remember that the alt tag serves a very specific purpose - to describe the image. Therefore, anything that does not describe the image is incorrect.
The alt tag should never contain the image's file name or path. The use of the filename in the alt tag will certainly get flagged by tools designed to automatically check web pages for adherence to the WCAG. Most large systems use filenames that make no sense to human interpretation.
The alt tag should not be a URL. If the image is being used as a link the destination of the link should be handled by the title attribute of the link. In this case the alt tag can be null (alt="").
What about Search Engine Optimization (SEO) considerations?
Although the alt tag has become a focus of SEO solutions, accessibility is the alt tag's foremost raison d'être. Never put information in an alt tag that does not describe the image or the image's purpose for the sake of SEO considerations. Using alt tags to meet accessibility requirements will benefit your SEO in a more meaningful way.
Modern content management systems can be a powerful ally in creating effective and properly formed alt tags.
Images of text are often used to support graphic fonts or to provide a visually different way of displaying content, or to combine images and text in one element. This, by itself, is not a failure of the WCAG, as long as the alt tag matches the displayed text exactly in most cases. In our example below the image is being used as an elaborate button. The alt tag should then be a combination of the button or link purpose and the graphic itself:
<img src="images/246916-1-eng-US/cuba-rotunda-tout-fall2016_medium.png" alt="Read the fall 2016 Rotunda Member Magazine featuring a Cuban anole on the cover">
Backgrounds do not support alt tags. Therefore, care must be taken if a background image contributes to the content in any way. In other words, backgrounds should not display text that is not otherwise available in the content. This issue gets tricky in that automated checkers will not flag backgrounds as not having alt tags. Therefore, a visual review of the website is needed to identify these edge cases. The best solution in this case is to pull the image out of the background and create an inline image. You now have an "Image of text" which can be handled by adding an appropriate alt tag as above.
Instead of this:
<div style="background: url('/images/246920-1-eng-US/ology_means_2x_medium.png');"> </div>
<div> <img src="/images/246920-1-eng-US/ology_means_2x_medium.png" alt="Ology means the study of"> </div>
Sometimes a site will display a logo that includes text. Here it is better to simply enter "Company X logo" in the alt tag. If the logo serves as a link to that company's site, the alt tag should read: "visit Company X".
When is an alt tag not needed?
There are instances where images do not require alt tags, for example:
It is important to remember that in the above cases a null alt tag must be provided. Omitting the alt tag altogether is a failure of the WCAG Level A (1.1.1 Non-text Content). The blank or null alt tag instructs that the image is to be ignored by accessibility tools such as screen readers. This is a subtle difference that should be documented. Automatic accessibility checkers will always flag null alt tags as well as missing ones, as these tools cannot interpret the image context.
What about a site that has thousands or tens of thousands of archival images that are in need of alt tags to be brought in line with the WCAG? This is where a sophisticated CMS can be instrumental in achieving accessibility. By instituting mandatory alt tags in the CMS, you can prevent the problem from getting worse as you move forward. There are crowd-sourcing packages out there, such as Scribe, to aid in data entry on a large scale, but this is by no means a drop-in solution. Care must be taken to review what is being entered and what the context of the image is within the site.
Ready to make your website accessible? We can help. Contact us anytime.
We're a group of web experts who solve complex web problems.Learn more about us »
Many years of experience with complex websites allows us to offer total solutions.Learn more about what we can do »
We've solved problems across North America and around the world.Learn more about what we've done »
Follow us on Twitter for the latest Mugo happenings