What is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of attributes defined by the W3C that allows to enrich the semantics of HTML elements when native language is not enough to describe their function or status. These attributes are added directly to the markup and are interpreted by assistance technologies, as screen readers, to offer a more understandable experience to people with visual, motor or cognitive disabilities.
Why is ARIA important?
Although HTML5 has incorporated many semantic elements, there are still complex interface components (drop-down menus, tabs, leaders, modal dialogues, etc.) that do not have a clear native equivalent. ARIA covers these gaps, allowing developers to explicitly indicate the role, properties and status of these components. Without ARIA, users of assistance technologies may be lost, unable to understand what certain controls do or how to interact with them.
Main roles of ARIA
- role =»button»: indicates that an element behaves like a button, useful when using a
<div>or<span>as interactive control. - role =»checkbox»: defines an element as a verification box.
- role =»radio»: represents an option button within a group.
- role =»tablist», role =»tab», role =»tabpanel»: structure a set of tabs and their associated panels.
- role =»dialogue»androle =»alertdialogue»: point to modal windows that require immediate attention.
- role =»navigation»: marks main navigation regions.
- role =»complementary»: indicates complementary content, such as side bars.
Attributes of status and properties
- aria-checked: true, false or mixed, reflects the status of boxes and option buttons.
- aria-expanded: true or false, indicates whether a drop-down element is open or closed.
- aria-hiden: true eliminates the element of the accessibility tree; useful for decorative content that should not be announced.
- aria-labelandaria-labelledby: provide an accessible label when the element has no visible text.
- aria-describedby: associated an additional description to the element.
- aria-live: defines dynamic regions; values such as polite, assertive or off control when changes are announced.
- aria-controls: indicates which element is controlled by the current (e.g. a button that opens a panel).
Good practices when using ARIA
- Use native HTML whenever possible: ARIA is a complement, not a substitute. One
<button>already has the right role and keyboard handling. - Do not duplicate roles: if an element already has an implicit role (such as
<header>with role =»banner»), does not add ARIA which contradicts it. - Maintain state coherence: each time the visual status of a component changes, update the corresponding ARIA attribute (e.g. aria-expanded when opening / closing a menu).
- Provide keyboard support: ARIA does not replace the need for the components to be operated by keyboard (tab, enter, space, arrows).
- Test with screen readers: tools such as NVDA, VoiceOver or JAWS reveal whether the information transmitted is expected.
- Avoid aria-hydrogen in interactive content: accidentally hiding a button or link can make it inaccessible.
Practical example: accessible drop-down menu
<nav>
<ul role="menubar">
<li role="none">
<button aria-haspopup="true" aria-expanded="false" aria-controls="submenu-1">
Producto
</button>
<ul role="menu" id="submenu-1" hidden>
<li role="none"><a role="menuitem" href="/productos/a">Producto A</a></li>
<li role="none"><a role="menuitem" href="/productos/b">Producto B</a></li>
</ul>
</li>
</ul>
</nav>
In this example, the button usesaria-haspopupto point out that it controls an emerging menu,aria-expandedreflects its open / closed state andaria-controlslink with the submenu. The submenu has role =»menu» and each option role =»menuitem». When the submenu is displayed or hidden by JavaScript, it is updatedaria-expandedand the attribute is changedhidden.
ARIA and WCAG
The Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2 consider ARIA to be a sufficient technique to meet several success criteria, especially those related to complex interface components and dynamic content. However, passing an accessibility audit does not only depend on adding ARIA attributes; a combination of good HTML, manageable CSS and respectful JavaScript is required.
Conclusion
ARIA is a powerful tool that, when used with judgment, significantly improves the accessibility of modern web applications. Knowing your roles, states and properties, as well as following best use practices, allows you to create interfaces that are usable for as many people as possible, regardless of your skills. Always remember to try real users and help technologies to validate that the experience is really inclusive.
