Image Accessibility for Screen Readers

When we're thinking about images, we think about how lovely they'll look, how they're really going to make our page pop, and maybe even how they can break a up a lot of text to make a site more visually inviting. 👁 👁

When it comes to accessibility, that last one is important. However, what about your users that utilize screen readers(SR)? What does the inclusion of images do for, or against, them?

Since this article is in regards to images, it relates primarily to visually impaired users. This might not be only those who are blind, it could be those who's vision has deteriorated with age, or even someone who recently had cataract surgery (temporary disability) and is trying to navigate a screen reader with little to no experience.

With these examples in mind, we need to ensure that our images have proper markup, that they're sensible and in the proper amount.

Describing Images

Ye Olde Standby: alt text

You probably already know about, and have used, alt text. You move your cursor to your <img src='something.jpg'> tag and you throw in a little alt description. <img src='something.jpg' alt='A red something sitting atop a table.'> Now your image is accessible!

Whoot! you've done it, article over. 🥳

... well maybe in some circumstances, but let's slow down. Image accessibility is a nuanced topic. To begin with, there are many types of images including

• • Informative images: Images that provide information on the topic, such as article illustrations, photos of the facility being discussed, etc.

    • Decorative images: Images that are purely visual/presentational

    • Functional images: An image that functions as a button or link.

    • Images of text

    • Complex images Infographics, graphs and diagrams.

In this article I am concerned with screen reader interactions, but there are accessibility concerns for images that go beyond SRs. They will likely come up in a future article. For now, even the screen reader side of things is a little more nuanced.

When a screen reader hits an image.. say something like below...

<img src='123abc.jpeg'>

What does the screen reader say? Ring a ding ding.. no, sorry, don't mind me.. Since there is no alt text, the only thing it can say is the filename, and that's what it'll do. You likely agree that 123abc.jpeg is not the most informative description. A lot of people upload images from their phones which come with even more unreadable file names like DC1V03495729202. So what do we do? You probably know, to start, that you should add alt text.

<img src='123abc.jpeg' alt='A class of pre-schoolers looking at the picture book. The book is ZACH IS IN OUR CLASS: JUST LIKE ALL OF US'>

This looks pretty good. For the above alt text scenario, I imagine it is a picture included on a private schools website. They're using this image to emphasize their principals of inclusion. This image shows that their students are learning about different types of people from a very young age. This is an informative image, meant to complement the school's mission. In this case, the details of the image are important.

Now, say the same image was just a decorative banner image, the alt text should be null.

<img src='123abc.jpeg' alt=''>

Screen readers will skip images with empty alt text, it will assume that the image is decorative. Null alt text is not the same as no alt text. No alt text results in the above example where the SR reads the file name.

📖 Tips and Tricks for Alt Text by W3

SVG accessibility

See the below example to make your SVG accessible.

<svg role="img" aria-labelledby="catTitle catDesc">
  <title id='imageTitle'>[title]</title>
  <desc id='imageDesc'>[long description]</desc>
  ...
</svg>

SVG's are generally ignored by screen readers, so the role='img' is what will make the SR take note. That is what tells your SR to stop and pay attention, the title tells it what to say

Icon Accessibility

Icons, even when using an icon font, requires a text alternative. This can be accomplished with a visually-hidden span discussed later.

<a href="#" class="homeIcon"> 
    <span class="visually-hidden">home</span>
</a>

Figure and Figure Captions

Figure and Figure Captions are native html5 elements, therefore they have accessibility built in by default. The accessible name is the caption.

<figure>
  <img src="thisimage.png" alt="description here" />
  <figcaption>The Figure: The caption</figcaption>
</figure>

ARIA

📖 ARIA : The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

aria-labelledby:

This markup links an element to the id of another element containing text meant to describe it.

<span id='complexDescription'>
Insert a description of an infographic showing accessibility examples... 
</span>
<div>    
    <div id="chapterTitle">Chapter 4: Accessibility in images</div>
    <img src="someimage.jpg" aria-labelledby="chapterTitle complexDescription"/>
</div>

• Notice you can connect your image to multiple descriptions (read in the order entered)

• Overrides all other accessible naming techniques including the inner text and aria-label.

• aria-describedby works similarly but has less browser support.

• You cannot reference an id that also has an aria-describedby.

What to hide?

Well let's look at a WCAG criteria which relates to this.

Success Criteria 1.1.1. Non Text Content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, with some exceptions.

The exceptions are things such as

• inputs

• captcha's

• decorative images

If it is meaningful and available to the sighted user, it MUST BE AVAILABLE to your non-sighted users.

Perhaps you have a complicated graph or chart. 📊 You want to show that to your sighted users, but you want the information it represents to be available to your SR users.

Example: I previously worked on a project that displayed a dynamic graph showing a students test scores compared to the average test scores reccommended for their chosen career. There's no point in creating an alt text that says 'bar graph for math scores' and 'icon representing users score.' This was a set of images meant to convey a particular bit of information, the look of it isn't important.

To begin, I needed to hide this series of images that created the dynamic bar chart. I applied aria-hidden to the div that surrounded them.

Now I needed a text description that provided all of the information found within the dynamic graph. I didn't need it visually as there were helper tool tips as well to further explain the chart for users who had difficulties understanding the chart, and the client was resistant to the extra text.

I created a dynamic paragraph that read the average score required, the students score and explained the difference between them. To this I applied a visually-hidden class such as the one below.

Visually Hidden

.visually-hidden:not(:focus):not(:active) {
 position: absolute;
 left: -9999px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

You may be tempted to try display:none but that also hides it from the accessibility tree, and therefore your SR.

The above example shoves it off the screen so it can't be seen or interacted with by sighted users. However, it is still accessible to someone using a screen reader.

An extra non-image note

This class is useful if you are creating a "skip links" button. This is a button that you place at the beginning of your page to allow someone to skip past the logo, profile information, and other extraneous information that may be at the top of your page.

This prevents forcing a person to tab through them every single page load. This concept applies to decorative images. They are not of value to the content of the page, and therefore they should have an empty alt attribute, so that they are skippable and not just another thing the user has to tab past.

Resources

1. https://www.w3.org/WAI/tutorials/images/tips/ tips and tricks for images

2. https://css-tricks.com/html-for-icon-font-usage/

3. https://w3c.github.io/html-aria/