alt, aria-label, title: a11y the right way.

There are many ways to add data to an element that are not directly visible, each with a different purpose. I often see them used interchangeably, although they have distinct purposes and effects. This post attempts to shed some clarity on that landscape.

Title

This might come as a surprise to the experts, as it actually has no accessibility purpose. title is not intended for accessibility, and in many cases, it even works against it:

Conversely, content being put in the title attribute is being hidden from the (probable) majority of your users. If information is being hidden from the majority of your users, then it’s likely not necessary.

So, the title is mostly useless in most cases. When do we use it anyway?

1. With <iframe> elements
2. When you want to use a label where a text label is redundant

That’s it. All other situations are pointless.

An example of option 2 is the following image:

Note: If you use a title on an image, make sure it is exactly the same as your alt.

Alt text

All images that are not purely decorative need an alt text. Images that are decorative do not need an alt text but do need an alt attribute. This can be done by literally leaving the attribute empty:

<img src="puppy.jpg" alt="">

If the image serves a purpose, it needs an alt text. Ensure that the alt text adds actual value. Describe the purpose of the image more than what is seen in the image.

Note: If an alt attribute is provided (which should always be the case if done correctly!), it is also used as a replacement if the image is not present or cannot be loaded. It has higher priority than the title, which rarely belongs on an image anyway.

Aria-label

I see this used much less frequently, but an aria-label is an important part of good accessibility. It is the text used primarily by screen readers when there is no text in the element. For example, if you have a button with only an image (like a hamburger menu), you can still make the purpose clear with an aria-label:

<button aria-label="menu">
  <img src="hamburger.jpg" alt="">
</button>

Notice how I did not provide an alt text for the image here because it is purely decorative. Through the aria-label attribute, I can still make the purpose clear to people with disabilities.

Further reading

Want to read more about these attributes in the context of accessibility? I recommend these sources:

• https://www.a11yproject.com/posts/title-attributes/
• https://www.a11yproject.com/posts/alt-text/
• https://www.aditus.io/aria/aria-label/