DEV Community

Cover image for A11y tips: what is ARIA and when to use it
Carlos Espada
Carlos Espada

Posted on

A11y tips: what is ARIA and when to use it

ARIA stands for Accessible Rich Internet Applications, and consists of a set of attributes and values ​​that are added to HTML tags to offer extra information to assistive technologies and thus improve their experience. It is about communicating what happens on a page, what it means and how you can interact with it.

And when might it be necessary to use ARIA? Only in these cases:

  • If the feature is available in HTML but it is not implemented, or it is implemented but accessibility support is not.
  • If the feature is not currently available in HTML.
  • If the visual design constraints rule out the use of a particular native element, because the element cannot be styled as required.

In other words, ARIA should never be used to fix meaningless or incorrect HTML or to rewrite behaviors that already come natively in the browser using less suitable ones with added ARIA roles.

A very common example might be trying to emulate a button using a <div> with ARIA attributes. Don't do it. Use a <button>, it will always be the best option no matter how hard you try to imitate it.

Remember: the first rule of ARIA is "Don't use ARIA". The less it is used, the better. Try to solve your problems first using what very capable people have thought before, working on our technologies for years.

Discussion (0)