DEV Community

Beginning to Demystify ARIA

Lindsey Kopacz on February 12, 2019

Originally posted on a11ywithlindsey.com If you didn’t know this already, I usually cross post all these on DEV. When I cross-posted about why...

Read full post

Andrew Bone • Feb 12 '19

Semantic HTML is just better for everyone it makes your code accessible for people using the site and for other devs coming to make changes later.

I've quite commonly seen things like this, which quickly becomes too much to keep track of.

Max Antonucci • Feb 12 '19

The good, if also somewhat disheartening thing, is that many more developers would likely get on board if it was pointed out that semantic HTML means much less work for them and cleaner JS code.

Lindsey Kopacz • Feb 14 '19

Exactly. You're making your life SO MUCH EASIER.

That's why I never understood why people de-prioritized it so much in the beginning. There are certainly challenging things that are highly customized - I am learning about that as I start to tackle d3 and accessibility. But things like forms as pretty low hanging fruit.

Andrew Bone • Feb 12 '19

I think part of the problem has been that HTML has changed a lot, and at quite a pace, since the jQuery UI days but people are slower to change.

Lindsey Kopacz • Feb 12 '19

haha exactly, Semantic HTML is a win-win for everyone. I love ARIA but when adding more context vs replacing Semantic HTML

Al Romano • Feb 13 '19 • Edited

This is a great write up on ARIA, I can't count how many times I've explained this to junior developers looking to improve on accessibility.

Your button example is the go-to semantic example for me to help drive this home, another is using <dataset> to denote actual sets of data rather than list items inside input elements. HTML has the tools! People need to really learn how to use them.

Hopefully with more info like this available developers can start to make better choices when it comes to accessibility development and design!

Lindsey Kopacz • Feb 13 '19

Thank you so much, Al! I really think that people overthink ARIA a bit instead of thinking about Semantic HTML first and if needed, ARIA second.

Mattia Astorino • Feb 12 '19

Semantic HTML + ARIA widgets should be the basics for all ui developers. We should all learn technologies, not frameworks.

Marcus Herrmann • Feb 14 '19

Great post! Both a "handout" for developers struggling with ARIA and a plea for sensible usage 🤝

Regarding:

I honestly think that this markup could be changed to a <button> because, at the time of this reading, I cannot use the link to go to the href attribute value (/settings) and acts like a button.

I think that's a Progressive Enhancement measure. If, for any reason some or all of the JS would not get loaded it would still function as a link to "/settings"