Accessibility! aria-label vs. title attribute

author profile
Ignatius Bagussuputra
Edit
1 min read Share
#accessibility#html

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):

Find an issue with this post? Have something to add, update, or clarify? All my posts here are editable.

Just create a new Issue or PR on GitHub, any fix or addition is much appreciated! Edit