Accessibility! aria-label vs. title attribute

Ignatius Bagus. #accessibility#html

What's the difference and which one should you choose between these two.

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

Making the web accessible isn't doing anyone a favor, it's us doing our job properly as a web developer, in the front end.

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.

My recommendation is to use aria-label and roll your own tooltip based on the contents of the label using CSS attribute selectors and pseudo-elements. It will be better than relying on the title tooltip from browsers that cannot be styled or doesn’t zoom with the rest of the elements in some cases. For more complex stuff, you may need to implement a custom one based on your needs and specifications.

	
		
			
			
		
	

	/* arrow pointing to the element */
[aria-label]::before {
  content: '';
  opacity: 0;
  pointer-events: none;
  position: absolute;

  /* customize this yourself */
  bottom: -0.2rem;
  left: 2.5rem;
  border-right: 0.5rem solid transparent;
  border-bottom: 0.5rem solid rgb(48, 64, 81);
  border-left: 0.5rem solid transparent;
  transition: opacity 0.2s;
}
/* tooltip text container */
[aria-label]::after {
  content: attr(aria-label);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;

  /* customize this yourself */
  bottom: 0;
  left: 0;
  display: flex;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
  transition: opacity 0.2s;
  transform: translateY(100%);
  background-color: rgb(48, 64, 81);
  color: white;
}
/* only show the tooltip on hover */
[aria-label]:hover::after,
[aria-label]:hover::before {
  opacity: 1;
  pointer-events: auto;
}

Reference(s):

See something to improve or fix? In the spirit of open-source, you can create a new issue or contribute directly to this article by sending a Pull Request on GitHub!