If you’ve ever used WordPress (and there’s a pretty good chance you have), you may have noticed that they provide some convenient, albeit confusing, options on ways to add secondary content to your images. So, how do these settings affect screen readers and image metadata? I figured I’d dive into this and other methods of adding additional context to imagery and see which are universally supported.

I used this Codepen, the following screen readers (JAWS, Voiceover (MacOS and iOS), NVDA, and Android Talkback), and the following browsers (Safari, Firefox, Chromium Edge, and Chrome) to evaluate the current state of support.

Alt or Alternative text

If you are unfamiliar, Alternate text in WordPress adds an Alt attribute to your image. This Alt text is critical in two ways. One, if images can’t load, this is the only way a user would be able to understand what the context of the image is.

Two, it provides the context of the image for those who are using an assistive technology, such as NVDA, Voiceover, or JAWS. Also, when screen readers read back the image details, Alt text is read back first (with some exceptions we’ll get to in a minute).

Title attribute

The Title attribute is a global attribute that can be added to any HTML element. It is secondary contextual data, and when read back via a screen reader, it is read back after the primary metadata from Alt (or its alternative) is read back. However, not all screen readers will read this content back, so do not rely on title attribute for any element alone.

One interesting bonus to the title element is that it will add a browser native tooltip on mouse hover after a small amount of time.

Caption

The Caption, when supported by screen readers, is either the last item read back to the screen reader, after Alt text and the Title text, or the only thing read back to the user.

Captions are different than Alt text, where Alt text is meant to describe what’s happening in the image, Captions are meant to draw a conclusion or summary of why the image or content is being called out in the first place. Think of Caption as the “why” versus the “what” of Alt text. Addtionally, Captions are visually displayed at all times (unless surpressed by CSS).

While captions aren’t exclusively meant for images alone, they are often used this way.

Description (WordPress’ variant)

So here’s where things get odd. Apparently WordPress’ Description is a way to add blog-like content to a stand-alone image post. This is not Aria-describedby and the content does not appear on the image attributes themselves.

Aria-label and Aria-describedby

Finally, the global attributes Aria-label and Aria-describedby are available to use as well. These are exclusively to provide content to screen readers, and take priority over other sorts of metadata.

In the case of Aria-label and Aria-labelledby, they overwrite the Alt text. In the case of Aria-describedby, it overwrites the Title text on an image.

It is generally recommended not to use Aria attributes if there are already viable alternatives for the element in question. In this case, Aria-label doesn’t make sense, but Aria-describedby may if you need secondary content for whatever the reason and don’t want that tooltip displayed or are worried about the Title attribute support issues.

Conclusion

Only the Alt tag is consistenly handled on imagery, and provides the bonus of providing context when an image doesn’t load. Additionally, if you do want to use Captions, be aware that they may at times surpress your Alt text content, so if using Captions in addition to Alt text, make Captions provide enough context for your images as well. Now you know the best way to manage screen readers and image metadata!

Bonus: Having images wrapped in the Figure tag, Picture tag, or Source tag seems to not break any sort of labelling content. Just remember to add your content the Image tag within your Picture element, and the browser will do the rest.

If you want to dive into other aspects of my accessibility support tests, check out my other posts on Accessibility.