Accessible Images

July 16, 2022
  1. Good Alternate Text
  2. Decorative Images
  3. Images In Links
  4. Background Images
  5. Image with Text
  6. Accessible Inline SVGs

Since images cannot be seen by the visually impaired, we need to provide alternative text to those users. A lot of guides provide solutions for those who are completely blind and use screen readers, but rarely those who have minor vision loss and don’t need a screen reader. We will cover that in this article.

Good Alternate Text

To be inclusive it’s important to be as descriptive as possible. We can avoid starting the description with “photo of” because the user already know it’s an image or photo. Just get straight to the description.

For 8 years I worked alongside one of my clients SEO team who would always tell me what the alt tags should be. There was a photo of a woman sitting on the beach drinking their wine and they’d tell me to make the alt text say, “Best Red Wine.” That’s not helpful. The past couple years I refused to make such edits because the legal team informed me that accessibility needs to some before everything. So, I made the alt text “woman sitting on the beach drinking Brand Name’s wine.”

Decorative Images

Let’s start with the easy stuff. Decorative images like the one below have no value to those using screen readers. You can leave the alt attribute empty, and the screen reader will ignore it.

If you have an image inside of a link and there isn’t any other text inside that <a> tag then you need and alt tag even if the image is decorative. The alt tag should tell the user where the link is going.

Examples:

A logo on the top of the page that links to the home page should have “home” alt text.

A menu that uses only images to tell the user where it will navigate. This should never be done honestly, but it you’re fixing an existing site this is a decent temporary fix.

A WordPress blog listing page where the image and title each have their own separate link. The screen reader user needs to know where they will end up if they select the image. This one is tricky because it will announce the image and the title links separately and can be very annoying for screen readers. You can avoid this altogether by not linking the image.

Background Images

Some developers, myself included, use background images to avoid the double linking issue mentioned above. Here’s how you can add alt text to the background image if it’s needed.

<div style="background-image:url('path/to/image')">
	<span role="img" aria-label="describe image here"></span>
	Additional Content Here
</div>

Image with Text

Note: If you are striving for level AAA compliancy text cannot be on images under any circumstance

There are very few scenarios where text is okay on an image. Here’s why. Some users have special tools that allow them to change the text on the page to make it easier for them to read. You can’t always be sure the text will be visible on all screen sizes. The solution is to place the exact text in the alt attribute UNLESS the text is too long such as in a case of an infographic. In this case you can create a div or span after the image with the full text, then place an aria-describedby on the image itself. Example:

<img src="image-with-too-much-text" alt="short description of image" aria-describedby="#moreInfo">
<div id="moreInfo">All the text from the image goes here</div>

You can apply screen reader only CSS to the #moreInfo div if you like, but remember, not all visually impaired folks need a screen reader. If you’re worried about there being too much content on the page, you can link to another page and place the text there instead.

Now, for those not using screen readers you will need to make sure they can zoom in to the image to be able to read it. To do this you’ll need to look at the head of the document and look for a meta tag named “viewport” and make sure the content does not contain the text “maximum-scale” and if it does, it should never be less than 3. A lot of older sites have it set to 1 because it was an easy solution to poor web structure. Here is an example of a good viewport setup: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Accessible Inline SVGs

If you’re embedding an SVG in an img tag you use the normal alt attribute. However, if you need to embed it directly onto the page you can use title and or desc tags inside the svg itself.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
	<title>Short description of image</title>
	<desc>This is a much longer description of the image and will probably rarely be used. But just in case, here I am.</desc>
	<path d="M9.372 86.63C-3.124 74.13-3.124 53.87 9.372 41.37C21.87 28.88 42.13 28.88 54.63 41.37L246.6 233.4C259.1 245.9 259.1 266.1 246.6 278.6L54.63 470.6C42.13 483.1 21.87 483.1 9.372 470.6C-3.124 458.1-3.124 437.9 9.372 425.4L178.7 256L9.372 86.63zM544 416C561.7 416 576 430.3 576 448C576 465.7 561.7 480 544 480H256C238.3 480 224 465.7 224 448C224 430.3 238.3 416 256 416H544z"/>
</svg>