Accessibility! aria-label vs. title attribute
Making the web accessible isn't doing anyone a favor, it's you doing your job properly as a web developer, in the front end.
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.
Many of these widgets were later incorporated into HTML5, and developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists. For instance, native elements have built-in keyboard accessibility, roles and states. However, if you choose to use ARIA, you are responsible for mimicking (the equivalent) browser behavior in script. Source: MDN
The title attribute is read by screen readers, but so does aria-label. They seem to serve the same purpose, so what’s the difference?
Title allows you to add a native tooltip on hover, so if you’re not planning to make you own tooltip but needs or wants your element to have one, then add a title attribute. On the other hand, aria labels are supported by default and are used by screen readers. It’s not to say that title isn’t read by screen readers, but aria is the preferred choice for accessibility support.
The answer is to simply use both aria-label and title attribute if you need the tooltip, otherwise aria-label is the preferred choice for accessibility support, especially if your elements doesn’t have any text content, like a linked icon for example.
Reference(s):
- https://stackoverflow.com/questions/27953425/what-is-the-difference-between-aria-label-and-title-attributes
- https://dev.opera.com/articles/ux-accessibility-aria-label/#accessible-name-calculation
Found a typo or something to improve?
In the spirit of open source, you can create a new issue or contribute directly to this article by submitting a PR on GitHub