Building an accessible website: Writing accessible alt tags for images

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 web accessibility.

What is the alt tag?

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.  

What goes in the alt tag?

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.

Orange 1956 Chevy 150 2 door post front view

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:

• "Orange one thousand nine hundred and fifty six Chevy one hundred and fifty 2 door post front view"

Instead, you may want to consider:

• "Orange nineteen fifty six Chevy one fifty 2 door post front view"

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.

What does not go in the alt tag?

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.

Is your website accessible to people with disabilities?

Get our beginner's guide to website accessibility

Download your FREE copy

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.  

Tapping into the power of Content Management Systems (CMS)

Modern content management systems can be a powerful ally in creating effective and properly formed alt tags.

• Use the CMS to enforce alt tags. A comprehensive CMS such as eZ Publish allows for the entering of alt tags when inserting images directly into content or as a content object. The CMS might have to be customized to enforce these rules, and in fact Mugo Web has performed such a customization for eZ Publish. Make sure to enforce good alt tags and not just any alt tags. This can be challenging, but you can have character minimums and maximums, and you can disallow filenames as a minimum. Don't forget to account for all the scenarios where an image can be loaded or edited, such as if your system allows objects to be edited from where they are embedded.
• Use the CMS templates to automate alt tags. Once your CMS system is enforcing alt tags, you can use your page templates to make sure these alt tags make it into your pages and that every image has an alt tag. Special cases where a null alt tag (alt="") is needed should also be handled at the template level. A popular method is to place the image filename in the alt tag when no suitable text is available. This is not acceptable, and in fact makes no difference for most screen readers, which read out the file name in the complete absence of an alt tag anyway. Remember - a descriptive alt tag should always be available to your templates.
• Use the CMS to separate visual and non-visual content. In our orange Chevy example above, we used both an alt tag and a caption to describe an image. An image object in your CMS can - and should - have separate attributes for caption and alt tag. A well constructed template can make use of these two object attributes to insert the alt tag and add a caption complete with role="presentation".  

Special Cases

Images of text

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 with text

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>

Use this:

<div>
    <img src="/images/246920-1-eng-US/ology_means_2x_medium.png" alt="Ology means the study of">
</div>

Logos

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:

• Serving as a purely decorative element such as a stationery style border
• Images that are part of the page structure such as content breaks and spacer images, button graphics and arrows, etc.
• Images with links. If your image is within a link, the temptation is to enter the target in the alt tag. Instead, use the null alt tag (alt="") and enter a description of the link destination page in the <a> tag "title" attribute. Remember, no URLs - "View cart" not "https://mysite/viewcart.php".   

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.

Large existing images archives

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? Sign up to receive a copy of our website accessibility guide or contact us anytime for a free consultation.