DEV Community

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

Posted on

3

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more