WAI-ARIA or simply ARIA is a set of attributes which can be added to various HTML elements. These attributes are used to communicate property semantics, state and role to assistive technology through the accessibility APIs which are implemented in browsers.

W3C HTML specifications provide information regarding which ARIA attributes can be used on each HTML element.

Developer (un)friendly information

WAI-ARIA’s 3.2.7 section specifies certain requirements but these are not web developer friendly.

These requirements take the form of two large tables which include features with constraints – if you can use an ARIA attribute, the element is not listed. The reason behind this is that the purpose of this information is to be read by conformance checker implements and browsers, not developers.

ARIA attributes can also be used on a particular element – in the past one would have to go to the ARIA section and then go through the tables to find the desired attribute or element in order to locate its ARIA rules.

Developer friendly information

W3C HTML specifications have recently been updated to include ARIA information as well, which until then was absent. Each introduction section of each element definition now features ARIA information such as property attributes or allowed ARIA roles. This means that developers can find the information they need with ease, without having to search for it in the spec.

If an element can have roles set to it, it’s stated in the intro – a button element intro for example includes all possible ARIA role values and indicates the default role of the element, which does not need to be set manually. Each role is also liked to a description within ARIA’s reference section of the HTML spec which also includes a list of allowed aria attributes for each role value with other links to properties states and roles.

The idea behind this is to help developers get all the information they need in order to produce accessible things with HTML.



Recommended Stories

How to Integrate Alexa with Your Drupal 8 Website: A Step-by-Step Guide
Just imagine: a user asks Amazon Alexa to read out loud to him/her the headline of your latest blog post! Or maybe… (Read more)
RADU SIMILEANU / May 18 '2018
When Should You Not Consider Using Node.js? 3 Unsuitable Use Cases
It's undebatable: Node.js has practically laid the foundation of the real-time web! The real-time, two-way… (Read more)
RADU SIMILEANU / May 17 '2018
What Is Node.js Used for? What Projects Can You Build Using It? 7 Best Use Cases
Not exactly the “jumping on the latest trend" type? Therefore, you're still a bit hesitant to get on the Node.js… (Read more)
RADU SIMILEANU / May 10 '2018