Ally-practices

What is this project

WAI-ARIA (Accessible Rich Internet Applications) - is a set of special accessibility attributes which can be added to any markup.

WAI-ARIA contains two categories of attributes - roles and states & properties. This project is about roles - I've implemented in HTML and Javascript almost all of the WAI-ARIA roles.

When to use WAI-ARIAroles

The main purpose of ARIA is to make a web page more accessible, especially for a screen reader users. We should use ARIA attributes as an addition to a semantic markup. For example, we need to use button element instead of using div class="button" role="button". So as button element exists in HTML, we don't need to use the aria-role button. Another example is dialog. We have a dialog element in HTML, but it's not supported by vast majority of browsers. This is a good use case for aria-role alertdialog - div role="alertdialog

More information

Specification is here W3C's Accessible Rich Internet Applications (WAI-ARIA) 1.1

WAI-ARIA on MDN

Examples

WAI-ARIA roles that are likely to be used with HTML language are highlighted in green.