Aria-Labelledby Attribute Explained

Hi There folks. As promised, the second article in the series of my Accessibility articles

Hi There folks. As promised, the second article in the series of my Accessibility articles: The Aria-Labelledby Attribute. Last time I spoke about the sibling attribute of today’s subject. You can read about it here: The Aria-Label Attribute.

Now, before we begin I would like to say that I know that there is some confusion between these two attributes. I would like to point out that you dont have to worry. This article will hold aria-labelledby examples. Making it easier to understand.

So, without further delay, let’s begin!

What Is the aria-labelledby attribute

First, of all, I will begin with a quote from the official MDN page for aria labelled by attributes:

The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple-element IDs in a space-delimited fashion.

In short, the aria-labelledby attribute is designed to provide an “associative” label to an HTML element. By doing so we provide an understandable text for Programs like Screen Readers. Associative Label is the key thing here people. Meaning, think of this attribute as something similar to the relationship between LABEL FOR and its INPUT field.

Finally, if you would like to read more you can visit these links:

Let’s move on to the practical part of this article.

aria-labelledby example

To better understand the concept of this attribute, take a look at the example below:

<div class="post-pox">
<h3>Post Title</h3>
<p>Post Description.....</p>
<a href="postlink">Read More</a>

Looking at the example above we can know its a post box for example. Now, the missing part is the attribute for the anchor link. Much like so:

<div class="post-pox">
<h3> Post Title </h3>
<p> Post Description..... </p>
<a href="postlink" aria-labelledby="Post Title"> Read More </a>

Im, sure now it’s pretty clear. However, in case it’s not, let’s use another example.

Let’s look at a final example:

<div class="about-section">
<h1> Our clinic </h1>
<p> Our Clinic Text..... </p>
<a href="postlink" aria-labelledby="Read About Our Clinic"> Read More </a>

As I previously mentioned, think about it as you think about the relationship between label for and its input field. easy peasy.

Final Words

We reached the end of this article. I hope things are clearer on this subject now. Moreover, if you want to take a look at a practical JS implementation of attributes, check out the last section of this article. Until next time!

Leave a Reply

Your email address will not be published. Required fields are marked *