HTML For Screen Readers - Labelling Elements

To screen readers, a lot of the visual information that is presented on a webpage is lost. Because of this, we need to specifically provide information to them that may be obvious to a person looking at the page.

One common way people define information specifically for screen readers is to wrap the descriptive text in an element with a particular class, such as .screen-reader-text, and hide the element using a method that keeps it visible to screen readers.

Although this does work, we can use ARIA attributes that are specifically for this purpose. There are three attributes we can use to provide descriptive text to screen readers -

• aria-labelledby
• aria-label
• aria-describedby

The Attributes #

aria-labelledby #

This attribute is used to specify the name or label of the current element. User agents use it to generate the "Accessible name", a plain text name, for the element.

To use the attribute, on the element that needs to be labelled, we write the ID of the element that contains the label.

<div aria-labelledby="[ID of labelling element]"></div>

We can specify multiple label elements as well.

<div aria-labelledby="element1 element2 element3"></div>

This attribute should only be used when the labelling element is visible on the screen.

aria-label #

This attribute is also used to specify the name of the current element and generate its "Accessible name". However, it is designed to be used where the label is not visible as another element on screen.

To use the attribute, instead of referenceing another element, we put the string of text directly.

<div aria-label="[Label text]"></div>

aria-describedby #

This attribute is used to specify more descriptive information about the current element. Unlike aria-labelledby, which expects a concisce name for the element, aria-describedby allows for a whole sentence or paragraph to give context to the element.

Similar to aria-labelledby, we use the attribute by passing the ID of the element that contains the description.

<div aria-describedby="[ID of element that contains the description]"></div>

We can also specify multiple elements if necessary.

<div aria-describedby="element1 element2 element3"></div>

The descriptive elements do not necessarily have to be visible on screen.

Using the Attributes #

Here are some examples of how these attributes can be used.

Provide Context For "Continue Reading" Links #

On the homepage of this blog, for example, after the excert of each blog post there is a link with the text "Continue reading". To a screen reader, there is no context for where this link will take you. We can use aria-describedby to reference the title of the excerpt and provide context for the link.

<article class="post-excerpt">
  <h2 id="postID123">Post Title</h2>
  <p>Lorem ipsum dolor sit amet...</p>
  <a aria-describedby="postID123" href="https://example.com/blog/123">Continue reading</a>
</article>

Specify Key Information About a Widget #

We can specify where the key descriptive information about a widget is. We can use aria-labelledby to define the title of the widget and aria-describedby to define the description.

<section role="widget" aria-labelledby="widgetTitle" aria-describedby="widgetDesc">
  <h2 id="widgetTitle">Widget Title</h2>
  <p id="widgetDesc">Lorem ipsum dolor sit amet...</p>

  <p>Quos quidem tibi studiose et diligenter tractandos magnopere censeo</p>
  <p> Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi</p>
</section>

Additional Instructions for Form Fields #

Another use for aria-describedby is to provide additional instructions for form fields. Because the label is generally concise, it can be useful to have more descripive instructions additionally.

<label id="passLabel" for="pass">Password</label>
<p id="passInstructions">Your password needs to be at least 8 characters long and have 1 number</p>

<input id="pass" type="password" aria-describedby="passInstructions" aria-labelledby="passLabel">

Provide Alternative Titles #

In some cases, the title or label for an element may not be in an acceesible text format. We can use aria-label to provide this alternative in these cases.

<button aria-label="Close">X</button>