DEV Community

Cover image for 5 Rules of ARIA

5 Rules of ARIA

Konstantin Rouda on February 25, 2023

Have you ever heard about ARIA? It might sound weird and maybe even intimidating at first. In this post, I'd like to talk about the 5 essential r...
Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
konrud profile image
Konstantin Rouda

Thank you. I'll try.

Collapse
 
lso profile image
Louis Sommer

Such precious information. Thank you !

Collapse
 
fredysandoval profile image
Fredy Sandoval

Beautiful post, one of the best for this topic, which is really hard to digest.

Collapse
 
konrud profile image
Konstantin Rouda

Thank you for these words.
I really tried to make it succinct and understandable as much as possible.

Collapse
 
lukeecart profile image
Luke Cartwright

What resources do you use to make your HTML more accessible?

MSN? Or is there another resource that is good?

I find it really hard to find what each aria means

Collapse
 
konrud profile image
Konstantin Rouda • Edited

Thank you @lukeecart for your question.
I mostly use the official documentation by W3C or MDN.

I do agree, though, that it's not easy to find the needed information, when one's trying to write HTML in a more accessible way.

For the most part, this is the reason why I had decided to write an article in the first place.

Collapse
 
nikhilkandhare22 profile image
NikhilKandhare22

Which tools can I use in my next project which will be the best

Collapse
 
konrud profile image
Konstantin Rouda

Not sure what you mean by "tools".
Could you possibly elaborate a bit more?

For A11y testing, you can use Chrome dev tools Audits

Axe (dev tools extension)
or Accessibility Insights for Web (browser extension)

As for writing accessible HTML, most of the time just prefer using native HTML elements (e.g. <button>, <ul>, etc...) over custom ones and follow the 5 ARIA rules.
That should be enough for most of the cases.

Collapse
 
nikhilkandhare22 profile image
NikhilKandhare22

I want to say for back-end and database

Collapse
 
hellonehha profile image
Neha Sharma

Chrome lighthouse would be a good start. use it with combination of Wave extension

Collapse
 
nikhilkandhare22 profile image
NikhilKandhare22

Thank you so much 🧡