11. ARIA for Dummies22 May 2020
The thumb rule of accessibility is to use HTML5 native tags. However, in today's rich UI experience we know that there are many modules developers are developing for which they are no HTML5 tags. The challenge is how to make these modules identify by the assistive technologies? ARIA- comes here to make these accessible. Not just helping in identifying, ARIA- also support adding states and properties of the custom module of tag developers are developing.
ARIA works by changing and augmenting the standard DOM accessibility tree. It doesn't add any keyboard focus or event-listeners to the element.
This can be done by using - role, properties, or state. ARIA-role, ARIA-properties, ARIA-state
Let's see how to make tabs accessible for the screen readers? We don't have the tab tag in HTML. Hence, screen readers won't be able to identify what it is? For them it'll be just
div. To make them, identified by screen readers we will give them names by using
role. Now, screen readers will read aloud this as well as this will also tell assistive technologies that it should follow the
ARIA properties support the role of assistive technology. These properties are static and explain the 'nature' or 'relationship' of the elements/tag to the screen readers. ARIA Properties are not expected to be change most of the time. Eg: aria-label will speak aloud the
aria-label even though the text is already provided by assistive technologies. Similarly,
aria-labelled will make the relationship between the tabpanel and corresponding tabpanel, one more is
aria-required will inform the user of assistive technology this input is required.
Next, interaction. Visually it is easy to see what happened when the user interacted with the tabs but for screen readers, it is going to be a challenge as we are using non-native HTML tags. Hence, using
aria-state will help the screen reader users to understand when the interaction happened and what change on the DOM. Eg: in case of tabs - we selected a tab (
aria-selected='true') and corrosponding tabpanel is shown (
If you are developing UI modules for which there are no HTML-semantics or HTML standardized tags then you can use ARIA tags with HTML tags. This works changing the Standard Accessibility DOM. ARIA-roles help in identifying the tag by screen readers as well as ARIA-role means that this tag should behave like this. ARIA-properties & state support the role. ARIA-properties are static and won't be accepted to be change and ARIA-state are dynamic.