ARIA
ARIA
Introduction
Favour native HTML over ARIA.
The Web Accessibility Initiative's
ARIA does not affect how a page is visually presented. It only changes the information used by assistive technologies.
The first rule or ARIA
The first rule of
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.
Time to use ARIA
The main situation where ARIA can improve the usability even when semantic HTML has been used is with
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.
Learn more about ARIA
To learn more about ARIA:
-
Deque has an easily digestible 3 part blog post for the
ARIA spec for the uninitiated . -
Mozilla also covers
ARIA extensively with tutorials and a range of documentation. -
Google's Web Fundamentals gives a thorough
introduction to ARIA . -
W3’s
using ARIA gives more guidance on how to use ARIA properly including the all five rules of ARIA.
When it goes wrong
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