5.2. Complete non-explicit links and buttons using aria-label or title

A link or button is non-explicit when the label alone does not suffice to describe its destination or function.

  • Link labels, such as “Read More”, “Learn More”, “More Information”, “Click Here” are considered as non-explicit by nature.
  • So is the “OK” button.

In these cases, the aria-label attribute or the title attribute can be used to specify the destination of the link or the function of the button.

As an introduction to these two techniques, let us consider the example below of a “Read more” link pointing to a page of the AcceDe 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 /> tag.
  2. Populate this attribute by entering the exact label of the link or button followed by the information to make the link or button explicit.
<a href="…" aria-label="Read more: the AcceDe Web project">
   Read more
</a>

The title attribute

Note

The title attribute is only partly supported by browsers and assistive technologies.

Although it is an accepted technique, it is preferable to use the aria-label 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 /> tag.
  2. Populate this attribute by entering the exact label of the link or button followed by the information to make the link or button explicit.
<a href="…" title="Read more: the AcceDe Web project">
   Read more
</a>

Tip

Good practice is to populate these attributes by first entering the label then providing the necessary information to make the link or button more explicit.

Note

One of these two techniques must also be used to distinguish links or buttons whose labels might be considered as explicit but which lead to different pages or trigger different 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" />

Note

Note that a link can be considered as explicit though its context when the surrounding elements can help understand its meaning.

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

All fields are mandatory.

Back to top