Search code examples
htmlwai-ariawcag2.0

Do I need to implement WAI ARIA to comply with WCAG 2.0 AA?

I am building a site that needs to conform to WCAG 2.0 Level AA.

My question is how many of the ARIA roles do I implement?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

Solution

  • If you are using proper semantic and structural HTML, probably none. For those cases where you have to use the wrong element (such as a broken library or framework), then you may have to but that is not the way to start.

    As always, context is key and blanket statements do not always apply.

    If it is helpful, there are three (five) "rules" of ARIA use (they are suggestions, but you should treat them as rules for best effect):

    1. First rule of ARIA use: If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

    2. Second rule of ARIA use: Do not change native semantics, unless you really have to.

    3. Third rule of ARIA use: All interactive ARIA controls must be usable with the keyboard.

    4. Fourth rule of ARIA use: Do not use role="presentation" or aria-hidden="true" on a visible focusable element. Using either of these on a visible focusable element will result in some users focusing on 'nothing'.

    5. Fifth rule of ARIA use: All interactive elements must have an accessible name. An interactive element only has an accessible name when its Accessibility API accessible name (or equivalent) property has a value.