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 Order”.

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

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

<input type="submit" value="Confirm Order" aria-label="" />

<input type="submit" value="Validate Order" aria-label="Confirm Order" />

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

Add a comment

All fields are mandatory.

Back to top