A label tag

Introduction

Providing labels on your links is an important and useful feature for those who visit your website using a screen reader. The image below depicts a layout similar to what we might see in a blog roll. A sighted visitor to your website can easily see that each “Read More” link relates to the heading and content above.

The image below shows the HTML markup for this page at this moment in time:

A person visiting your site using a screenreader will have difficulty in obtaining information as to what the links actually refer to. This is due to the manner in which assistive technology deals with links and anchor text.

Link Text & Link Purpose

There are 3 main screenreader interactions that use link text:

  1. Tabbing through the interactive elements on the webpage. Each time the website visitor presses the tab key, the link text is read out.
  2. Using the screenreader “links list” command to read out the anchor text of the links on the page.
  3. Sequential reading where the link is read as part of the text.

In the first two cases, link text needs to make sense out of context by clearly identifying link purpose.

In particular, labelling your links as “click here” or “read more” renders them useless to a screenreader unless the person using it is reading sequentially (which is a laborious and slow process).

Using ARIA-Label

The image below is a screenshot of the “links list” dialogue menu provided by the NVDA screenreader when this particular page is being viewed.

As we can deduce, all of the links are labelled “Read More” and no information can be obtained as to what article each link refers to. Basically the screen reader is obtaining the element’s ‘accessible name’ from the link text.

Quite often what we want to do is have the link visually say “Read More” but from an accessibility point of view we want them to have a little more text. This provides more context for non-sighted users, and improves the experience for them.

To do this, we can add some ARIA to the HTML markup. In the anchor tag (<a>) we can add the aria-label=”…” attribute, with some further contextual information between the quotes. This provides a little more information about the content to the accessibility tool, as seen below:

Now when I launch NVDA and fire up the links list view I can see that more meaningful information is provided to the screenreader:

Conclusion

Adding the aria-label attribute to your HTML markup can really enhance the content meaning for those who access your website or app using an access tool such as the NVDA screenreader. Including accessibility techniques such as these as part of your project workflow is a positive step and shows that your business is mindful of all users of every ability.

UX Accessibility Designer