5.2 Make link and button labels explicit with aria-label or the title attribute

A link or button is not explicit when the label alone does not sufficiently describe its destination or function.

In these cases use the aria-label attribute or the title attribute to add detail.

Consider the following examples of a link pointing to a page of the AccesDe Web project.

The aria-label attribute

A link or button can be made more explicit using the aria-label:

  1. Add the aria-label attribute to the <a>, <button> or <input /> element.
  2. Populate this attribute with first the exact text of the link or button itself followed by the text that makes the link or button more explicit.
<a href="…" aria-label="Read more: the AcceDe Web project">
   Read more
</a>

Tip

Good practice is to give the exact text of the link or button first followed by the text to make the link or button more explicit.

The title attribute

A link or button can be made more explicit using the title attribute:

  1. Add the title attribute to the <a>, <button> or <input /> element.
  2. Populate this attribute with first the exact text of the link or button itself followed by the text that makes the link or button more explicit.
<a href="…" title="Read more: the AcceDe Web project">
   Read more
</a>

Tip

Good practice is to give the exact text of the link or button first followed by the text to make the link or button more explicit.


Note

One of these two techniques must also be used to distinguish links or buttons that seem to provide explicit information but lead to different pages or actions.

If there are two “Search” buttons on the same page, for example, they need to be distinguished:

<input type="submit" value="Search" aria-label="Search a news" />
[…]
<input type="submit" value="Search" aria-label="Search a person in the directory" />

Find out more

  1. Associated accessibility guideline for the graphic design: 4.1. Provide an explicit link text for each link and each button.
  2. Other way to explicit links and buttons: Tooltips simulated using ARIA.

Comments

Add a comment

Required fields are marked *.

Back to top