Favour native HTML over ARIA.

The Web Accessibility Initiative's accessible rich internet applications specification (WAI-ARIA, or just ARIA) is good for bridging areas with accessibility issues that can't be managed with native HTML.

ARIA does not affect how a page is visually presented. It only changes the information used by assistive technologies.

The first rule of using ARIA is to favour using native HTML instead of re-purposing an element by adding an ARIA role, state or property to make it accessible.

By using the semantic HTML you not only get an implicit ARIA role, so the browser knows how to interpret the element, but also other standard functionality such as focus, keyboard and mouse support.

The main situation where ARIA can improve the usability even when semantic HTML has been used is with live regions .

Live regions mean that any dynamic changes within it will be read out to assistive technologies, useful to identify errors or of a status change, for example.

To make an element a live region, use thearia-live attribute or a specialised live regionrole such asrole=”alert” .

If you do have to add ARIA to unsemantic HTML, remember it’s not just about applying the rightrole , you also need to ensure all the other standard functionality is also applied including focus, keyboard and mouse support.

To learn more about ARIA:

Understanding when and how to use ARIA is key to improving the experience of assistive technology users. Even using ARIA where it’s not needed on semantic HTML can cause undesired effects on assistive technology.

Deque’s WAI-ARIA: Top 6 Mistakes to avoid states that “misuse of ARIA creates a more inaccessible experience than one without ARIA”.