Introduction: The Power and the Peril of ARIA If you’ve ever built a website, you’ve likely seen attributes starting with aria- (like aria-label or role=”button”). This stands for Accessible Rich Internet Applications. It’s a powerful toolkit that helps screen readers understand complex web features. But there is a famous “First Rule of ARIA” that every developer needs to memorize: If you can use a native HTML element that already has the behavior you need, do that instead.
Why Native is King
Imagine you need a button. You have two choices:
- Use the native tag.
- Use a , style it to look like a button, and add role=”button”.
The native comes with “superpowers” for free. It automatically works with the “Enter” and “Space” keys. It tells screen readers exactly what it is. It even changes its look when it’s disabled. If you use the version, you have to write extra JavaScript to handle the keyboard, extra CSS for the states, and extra ARIA to explain it. At Aditya Catalyst, we often find that the most accessible sites are the ones with the least amount of ARIA, because they rely on strong, native HTML.
When ARIA is Actually Necessary
So, why does ARIA exist? It’s for the stuff HTML can’t do yet. If you are building a complex drag-and-drop interface, a tree view, or a live-updating stock ticker, native HTML doesn’t have a specific tag for those. That’s when you reach for ARIA. Think of ARIA like a prosthetic—it’s there to provide support where the natural structure (HTML) is missing. But you wouldn’t use a prosthetic if your natural limb was working perfectly, right? Use native HTML first, and save ARIA for the heavy lifting.