Aria-Label Attribute Explained: Ally Guide

Hello Everyone! Welcome to my Aria-Label Attribute article. Recently I got the chance to work on quite a few web accessibility projects. However, I was pretty shocked to find that there isn’t a lot of information about accessibility compliance for programmers out there. Meaning, there isn’t a lot of info about how to actually make things accessible.

Therefore, I decided to launch a whole new category that will be dedicated to WEBSITE ACCESSIBILITY. This article is just the first of many to come within this subject.

A quick note before we begin, Be advised, there are a few accessibility compliance standards out there. Therefore, make sure which compliance you fall under. They are similar in nature, but nonetheless, they do have differences.

Just for general information, if you dont know already, the main types are:

  • ADA
  • WCAG
  • 508

Finally, without any further delay, let’s begin!

Aria-Label Attribute

First of all, Very important, on one hand, we have the aria-label attribute. On the other hand, we have its “brother” aria-labelledby. Do not mistake aria-label and aria-labelledby.

These two are similar but serve a slightly different purpose. my next article in this series will be about aria-labelledby. After we got that out of the way, What are aria-labels?

MDN quote:

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen

In short, aria-labels are attributes that help screen readers (amongst other technologies) attach a “readable” label to HTML elements. Finally, you can read more about it at the official WCAG for aria-label attribute here.

Take a look at the example below to better grasp it:

<a href="#" id="closeMenu">X</a> 

You have an anchor tag used to close a menu. However, this does not meet any Ally(Accessibility) Compliance. Im going to follow the guidelines and add an aria-label attribute to it:

<a aria-label="Close Menu" href="#" id="closeMenu">X</a> 

As you see in the code above, I added a label to this element. In doing so I provided a “readable” and understandable label for screen readers. Meaning, Anchor links are focusable elements by default and they are passed along to the screen reader by default. However, if you have an unusual text inside, for instance: “X” to close a menu, the screen reader will only read X.

This is where the aria-label attribute comes into play. It provides a label for this element. Instead of reading “X”. It will now read “Close Menu”.

Aria-Label Attribute: Complete Accessibility Compliance Standart Example

Pretty straightforward right? However, in the case of our example, this element is not 100% accessible yet. Meaning, if we have a “close menu” button than im guessing that we have an expanded menu right? It’s missing the aria-expande attribute. Which in the following case equals “true”. Mush like so:

<a aria-label="Close Menu" href="#" id="closeMenu" aria-expanded="true" >X</a> 

Now, it’s 100 percent accessible. By the way, I will have a separate article for the aria-expanded attribute soon.

Practical Implementation

Now, Accessibility Implementation is done in almost all cases in PURE JavaScript for best results. Im going to show you a standard approach of adding aria-labels via javascript. Take a look at the code below:

<!-- OUR TARGET ELEMENT !-->

<a href="#" id="closeMenu">X</a>

<script>
    // THE STRUCTURE OF THE FILES IS PRETTY MUCH DEPENDENT 
    // ON THE SYSTEM/CMS/APP YOUR WORKING IN
    // QUICK MAIN METHODOLOGY RUN DOWN
    // (USED ON WP SITES) -> EXTERNAL FILE TO HOLD ALLY CONSTANTS AND JS CODE

    // TARGET ELEMENTS WILL HAVE A DEFINED CONSTANT SET 
    // FOR DOM MANIPULATION, ATTRIBUTES, ETC
    // IN OUR CASE WE CAN USE getByID

    const menuBtn = document.getElementById('closeMenu');

    // THIS AINT NO SISSY JQUERY :) DONT FORGET TO CHECK 
    // FOR A VALUE TO PERVERT ERRORS ACROSS YOUR WEBSITES PAGES

    if (menuBtn != null){

        // ONCE SET AND INSIDE, EXECUTE CODE

        menuBtn.setAttribute('aria-label','Close Menu');
    }
</script>

Pretty simple right? Fetch the element check for value, execute code. This is the practical principle here.

Wrapping up

Well, we reached the end of today’s article. I really hope my article simplified things for you. Finally, as I said before, this is the first article in the series and more will follow shortly. Visit my Accsibillity category here for more posts about accessibility.

Leave a Reply

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