Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Dugan
Courses Plus Student 13,165 PointsUsing ARIA in HTML
Hey Folks,
Just took Nick Pettit's course on accessibility. It was a great primer, however I was hoping that it would dive in to the use of ARIA roles in markup. That's what what much of my accessibility questions are about.
One of the questions that I have is where frontend devs draw the distinction between using anchor elements vs button elements. There seem to be two prominent schools of thought:
1) Use the button element when in the ui the element represents a button. 2) Only use buttons for form actions, if you are representing an anchor link as a button use role="button" on the anchor element
I tend to go with the second approach. However when reading the Using WIA-ARIA in HTML doc, they seem to recommend the first approach.
"If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."
What are developers out there actually doing?
thanks!
3 Answers
Paul Graham
1,396 PointsOnce you understand the purpose of ARIA, it actually becomes pretty obvious when you should and shouldn't use ARIA tags. The basic premise of ARIA is it's a way to give semantic value to things which do not carry semantic value. So if I say, can't use a nav tag for some reason, I can easily use a role="nav" attribute to specify to screenreaders that the element is the primary nav. If you used the nav tag, that DOES carry semantic value, and you would not use the ARIA tag.
Another example would be <main> vs <div role="main">. And of course you just named another, using role="button" if you have a anchor tag styled and functioning as a button. So yes, the spec is right when they say the native tag does carry more semantic value and generally will be a better choice both for maintainability and ease of reading. There's nothing "wrong" with using role="button" if you do need to use an anchor and modern screenreaders will generally be able to handle these exactly the same. There are of course benefits to using anchor tags since you have to override the default styling of any button to heavily customize it.
Of course, it's crucial to remember exactly what you said about using the role for forms only, it's the SEMANTICS of how the tag is used that's important, not the appearance. So just because something looks like a button doesn't mean it should have a role="button" attribute. If it doesn't function as a button and is just a link, leave the ARIA attribute off (example would be a fat "PURCHASE NOW" button-y anchor. It might look like a button but needs no ARIA attribute because it isn't actually a button semantically speaking.)
Shawn Denham
Python Development Techdegree Student 17,802 PointsHey John,
I also tend towards #2, but I never use role="button" in my navigation, which is almost always a list of anchor links shaped to look like....buttons!
What do you do with navs?
Shawn Denham
Python Development Techdegree Student 17,802 PointsGreat explanation, thanks Paul!
James Nelson
23,956 PointsJames Nelson
23,956 PointsPaul I have seen in many applications that have used bootstrap as a framework, they have marked up call to action buttons as anchor links. Although this is semantically correct, css has then been used to style these links differently. The majority of call to action buttons I have seen act as links regardless, would it make semantic sense to add ARIA role="button" in this context?