Writing text descriptions
Really good accessibility takes a strong strategy, thoughtful design, and robust technical implementation, but often it’s the small things that make all the difference to the person consuming your content.
Text descriptions for images are among the most basic of accessibility requirements, yet they’re also amongst the most difficult to get right.
Text descriptions make it possible for anyone who is unable to see an image to understand what the image contains. This includes people with permanent disabilities like being blind or low vision, people with temporary disabilities like eye-strain, or people with situational disabilities like images failing to load properly.
The best way to provide a text description is to use the alt attribute on the img element. It is possible to do this in most Content Management Systems (CMS), and the resulting text description is almost universally supported in browsers, Assistive Technologies (AT) like screen readers, and voice assistants like Siri.
The trick to providing the right text description is knowing the purpose of the image. Ask yourself why the image is present on the page: does it provide useful information, perform a function, provide a label for an interactive element, add to the aesthetics of the page, or is it purely decorative?
Images in links or buttons
If the image is the only content of a link or button, the text description should describe the purpose of the control. The content of the image itself isn’t important, but the purpose of the link or button is. For example, the buttons in the toolbar of a text editor:
<ul>
<li><button><img src=”b.png” alt=”Bold”></button></li>
<li><button><img src=”i.png” alt=”Italics”></button></li>
<li><button><img src=”strike.png” alt=”Strike through”></button></li>
<li><button><img src=”blist.png” alt=”Bulleted list”></button></li>
<li><button><img src=”nlist.png” alt=”Numbered list”></button></li>
</ul>
Data visualisation images
If the image contains complex data, the first step is to provide a text description that briefly describes the data. For example, an image that shows the current market share for browsers in common use on the web:
<img src=”browser-pie-chart.png” alt=”Pie chart showing browser market share”>
If the data in the image requires a more detailed description, this should be included in the (visible) content of the page because it will be helpful to everyone. The lengthier description can also be associated with the image using the aria-described attribute, which means screen reader users will be informed that the longer description is available.
<img src=”browser-pie-chart.png” alt=”Pie chart showing browser market share” aria-describedby=”pie-chart-description”>
<div id=”pie-chart-description”>
Pie chart showing Chrome with 40.7%, Safari with 23.9%, IE with 15.3%, and Firefox with 11% of browser market share.
</div>
Images that include text
Don’t use raister images (like PNG or JPG) that contain text. The text does not scale and rapidly becomes unreadable when viewed at high magnification or zoom. If the text has to be presented using a custom design, use CSS to style standard text content.
If it isn’t possible to avoid using text in an image or to use CSS to achieve the required style, use SVG as the image format because it scales well under magnification. Either way, the text description should be a duplicate of the text displayed in the image.
<img src=”text.png” alt=”Get happy!”>
Aesthetic images
Images are often used to add “atmosphere” to a page, to evoke particular emotions, or convey a particular mood. The text descriptions for these images should aim to convey the same sense of meaning, which means they can afford to be a little more imaginative than other forms of text description. For example, the text description for the Inclusive Design Principles logo:
<img src=”balloons.svg” alt=”three hot air balloons hang together in a calm, sunny sky”>
Purely decorative images
These are the images used to provide visual embellishments to a page, but which serve no purpose other than that. Such images do not need a text description, but the alt attribute must still be present on the img element. When the alt attribute is present but entirely empty, the image is completely ignored by AT and voice assistants.
<img src=”bar.png” alt=””>
No matter what the purpose of the image, it must have a text description (even if that description is empty). Think carefully about the reason the image is present on the page, then create the appropriate text description. As a general rule of thumb, keep the text description short and to the point, so it’s easy to read and understand.
