By Emily Kellagher

ALT Tags are invisible descriptions of images which are read aloud to blind users on a screen reader.聽For screen reader users and SEO, it is important to put in alternative text for images that convey the meaning that the image represents. In most cases this is fairly straight forward but there are a few use cases we would like to help clarify for you.

An image and image caption

When using an image caption with an image use a more concise description in the alt text and the expanded聽image description in the caption. The visitor using assistive technology will appreciate not having聽duplicate content in both.

Functional images: State the Purpose

Where an image has a function (e.g., a linked image) be direct and simply give the purpose (e.g., the link destination).聽

Graphical Representations: Charts, diagrams, graphs,聽illustrations

Readers can benefit when content is presented in graphical form, for example as a flowchart, a diagram, or a graph. People unable to see the image for any reason will need the information provided in another form.

Diagrams often convey a lot of information. This means that a textual alternative may be quite lengthy. The content of the alt text should general be limited to a sentence or two. In addition, it may be tedious for someone listening to an audio rendition of a Web page to have to skip over a lengthy description each time they reach the diagram.

An appropriate technique, then, is to have a short description in the alt text such as bar chart of class pets, and then provide a longer description in the form of an image caption if the information is not in the main body of content (best).

Using the expandable shortcode for an image description is also acceptable instead of an image caption.聽Giving the visitor a summation of the data represented will help all visitors understand the significance of the information you are displaying.

Embedded Text

Images of text or images with embedded text are not recommended on Web Express sites. We offer several accessible alternatives such as hero units blocks and block section blocks. If text is embedded into an image, it severely limits accessibility to the textual content. If all the text on the image is not in the body of the page or in the alternative text, you have a situation where some users have access to the content and others do not. Another important factor聽around embedded text is users cannot reformat the text into a more readable style. For example, low vision users, who use screen magnification software to enlarge content so they can see it struggle with embedded text in an image, since the text can become pixelated and illegible when the image is magnified.

There are other accessibility considerations to consider if you have images of text.

Here are just a few:

  • the color contrast between the text color and the background color needs to be accessible ()

  • the font style - some fonts are easier to read

  • the size of the text on the image - can the image be enlarged so the text is still readable

In addition to readability of text within images, using real text instead of text within images provides many other benefits, such as lower bandwidth requirements, easier translation to other languages, better search engine optimization.

In Conclusion

Great image content is an excellent way to build interest in your content and reinforce your message. We recommend that when publishing images, you think carefully about creating the best user experience you can.

  • All images should have quality alternative text that describes what the image represents.
  • When the image is complex,聽such as charts, graphs, etc. where a short description in the alt text field is not adequate.聽The absolute best solution, that would benefit all visitors, would be to include a thorough description of the complex image in the content of the page, immediately before or after the image. This way, everyone would be able to get the full meaning of the chart.
  • Don't embed important text inside images. If an image contains words important to the reader's understanding, the alternative text should contain those words.

If you have questions about alternative text please feel free to email us.

Accessible Images Tutorial

Our Accessibility Checklist has聽more information on checking your site for a

Categories: