ARIA can add meaning to elements, but it should never override native semantics unless absolutely necessary.
Use ARIA roles like role="tab" on non-semantic elements like <div>, not on meaningful elements like <h2>, which already carry inherent meaning.
Changing semantics is only acceptable when the elements have similar purposes – like using role="button" on an anchor tag – but it’s not okay to force interactivity onto non-interactive elements like <div>.
Stick to native HTML5 elements when possible to ensure better accessibility and less complexity.
Transcript
Now, Aria allows us to add semantics or meaning to different HTML elements. This is great when we want to build more complex elements such as tab groups. The second rule of Aria is don’t change native semantics unless you absolutely have to.
Here’s an example of the wrong way and the correct way to build some tabs. In the wrong way, we have an H2 with a role tab.
This is changing the semantics of a semantic element. We don’t want to do that. A correct approach is to use div role tab.
Div Role Tab
This is adding the role of tab to a div. The div doesn’t have any semantic meaning, so this is okay to add. There also is no native tab element within HTML5. Here’s an example of similar semantics and when it’s okay to change them. This is for a non-interactive element that starts. Dives and lists are both non-interactive elements. They’re not by default clickable.
Here we have div role tab, and we can also use a list item. Roll tab. Both of those are acceptable. It can also be acceptable to switch around semantics with interactive elements as long as both elements have a very similar purpose.
Buttons and Links
For example, buttons and links. This gets talked about a lot. We could take an anchor element and add a roll of button to it. This will make it function similarly to a button element. We would still need to do some JavaScript handling of the different keyboard interaction between a button and an anchor link, but for all intents and purposes, this is allowed.
When you have elements of different semantics, this is not permitted. Here we have divs and buttons. This is one of the most classic examples of doing it wrong. Div role button. We are taking a non-interactive element and trying to turn it into an interactive element. Instead, we need to use the actual HTML5 semantics and make it a button element.
I hope you found this video useful. If you did, please give it a like and subscribe to the channel and follow us for more tips on accessibility.