ARIA is a powerful accessibility tool, but it should only be used when necessary. The golden rule is that using semantic HTML is always better than using incorrect ARIA.
For example, instead of assigning role="button" to a <div>, simply use a native <button> element to save time and avoid added complexity. Overusing ARIA attributes like aria-label or aria-labelledby can cause redundant or confusing screen reader output.
When HTML is coded semantically – such as associating labels with input fields using for and id – ARIA is often unnecessary. Always ask: do I truly need ARIA, or will HTML handle this better on its own?
Transcript
Aria is a very powerful tool. But like all powerful tools, the first thing you need to do is ask, should you be using it in the first place? The first rule of Aria is that no Aria is better than bad Aria.
What that means is to use semantic HTML first and to only use Aria when you actually need to. The most common example here is div role button. In this case, you’re going to have to add a whole bunch of JavaScript to do all the normal button handling that would be taken care of by the browser for you.
HTML5
Instead, you should use the HTML5 element, just a simple button tag. This saves you so much work and so much testing. The rule is to avoid adding Aria role, state, or property unless you actually need to.
Another really common example is the overuse of Aria label and Aria labeled by. When we have our proper semantic HTML label, we We don’t need to add any additional aria label to it because that will actually create a double red label, which can be really annoying.
Proper Labels
Similarly, when we properly associate a label and an input field, we don’t need to add place folder text or Aria labeled by.
Again, this can cause redundant reading, which is really annoying. What you want to do is just use a proper label with the for element identifying the ID of the input. When we do this, we don’t need to add any Aria.
Everything is handled by native HTML5, and the browser takes care of everything for us. No additional JavaScript, no extra work. It’s the best solution.
Conclusion
Remember, when you’re considering whether or not to use Aria, always ask yourself, Is there a better way? Do I really need to bring out this big tool? Or can I handle everything with just semantic HTML? Thanks so much for watching.
If you found this video helpful, please give it a and share with your friends. And always remember to subscribe to the channel for more tips on accessibility.