Peeking into the World of Accessibility via ARIA

Web accessibility, or a11y, is one of the topics I've been eager to dive into, but given the truckload of dev knowledge already on my learning stack, I regrettably kept putting it off.

The other day, however, I stumbled upon a mysterious attribute (role="button") inside a <div> tag when studying an HTML structure:

      <div
        class="{{ classNames }}"
        data-quantity="1"
        data-variant-id="{{ current_variant.id }}"
        js-ajax-cart="addToCart"
        role="button"
      >Add to cart</div>

A quick look-up brought me to the wonderful world of web accessibility documentation on MDN.

As it turns out, role is a part of ARIA semantics that can be applied to an HTML element. In the example above, role="button" describes a non-semantic button, i.e. <div>, as a button.

With the ever-growing complexity of developing dynamic web apps, ARIA semantics is helpful to screen readers, who in this case won't recognize the element as a button, or a clickable element, without the aid of this ARIA role.

So what is ARIA?

According to MDN documentation, ARIA (Accessible Rich Internet Applications) is:

...a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

ARIA has a list of roles you can use to more accurately reflect the type of HTML elements, such as button, progressbar, and checkbox, just to name a few.

Note that there are also different types of ARIA roles, each having its own states and properties.

Despite its convenience, ARIA merely serves to assist us when there are no other alternatives. As a best practice, we should still use the correct semantic element whenever possible. So, if you can use the <button> element, use the <button> element!

I know I'm barely scratching the surface of accessibility, perhaps this accidental find is a sign for me to jump in and dig deeper.

I plan to start with the MDN tutorials along with these two resources:

• How I fixed accessibility on my website and how you can fix yours
• Inclusively Hiding & Styling Checkboxes and Radio Buttons

I've also subscribed to the Accessibility Weekly newsletter. Let me know if you have any good study tips!