5.3. Don’t use the `aria-label` or `title` attributes on links and buttons that are already explicit

A link or button is explicit when the label alone and/or the context suffice to describe its destination or function.

For example:

The link “AcceDe Web Project” is explicit by nature.
So is a button labelled “Confirm my order”.

The aria-label attribute (which can be used to make non-explicit links accessible) and the title attribute must not be used for this type of link.

Here are some examples of incorrect use of the aria-label attribute on an <button> tag:

<button aria-label="">Confirm my order</button>

<button aria-label="Validate my order">Confirm my order</button>

And here are some examples of incorrect use of the title attribute on an <a> tag:

<a href="…" title="">AcceDe Web project</a>

<a href="…" title="AcceDe Web">AcceDe Web project</a>

2 comments

Par Gideon, le 30 October 2024 at 7h10.

I have a question: if a website has a home link in the primary navigation but also has a home link on the main logo, should the logo/link have an aria label?

Répondre
- Par Romain Desjardins (Atalan), le 31 October 2024 at 4h08.
  
  Hello Gideon,
  
  Since the logo is included in a link, it should have an accessible name, even if this information is already given within the same page. The accessible name can be an aria-label on the link, or just filling the alt attribute of the img (if your logo uses an img tag).
  
  Regards,
  Romain
  
  Répondre

Updates

28 October 2025: Adjusting code example.

5.3. Don’t use the aria-label or title attributes on links and buttons that are already explicit

2 comments