Today, UI libraries do a great job handling accessibility for the components they provide, but this doesn't absolve us from ensuring that the solutions we create for the business meet the necessary requirements. There are many more ARIA attributes than the ones listed below, but my goal is to highlight the most commonly used ones. Being aware of accessibility (A11y) requirements will allow you to dive deeper into more specific use cases if you encounter them.
aria-current
Helps users with assistive technologies identify the currently selected element in the context of displayed pages or views in the application. It is often used in navigation, pagination, or multi-step forms.
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about" aria-current="page">About</a></li>
</ul>
</nav>
aria-controls
Indicates a component whose state is controlled by the current element, such as an accordion or widget.
<button aria-controls="info-box" aria-expanded="false">Toggle view</button>
<div id="info-box">
...
</div>
aria-expanded
Indicates whether a collapsible element is expanded or collapsed. Code example is in line with aria-controls.
aria-live
Indicates a component whose content is dynamically updated, informing screen readers of changes to the content. It is used in cases like error messages, toast notifications, or chat systems.
<div aria-live="polite">Please, verify your credentials</div>
In the example above, polite will wait for ongoing interactions to finish, while assertive will announce the message immediately.
aria-hidden
Hides an element and its nested components from users (hidden from the accessibility tree). The hidden attribute should not be used on focusable elements.
<a href="#" target="_blank" rel="noopener">
<img src="/media-icon.svg" aria-hidden="true"/>
<span>Social Media</span>
</a>
aria-haspopup
Indicates that the element may open an additional view, such as a menu or modal. Its value specifies the type of component that appears.
<button aria-haspopup="dialog" aria-controls="dialog-box">Open</button>
aria-label
Provides a label for an element that is not visible on the screen but is read by assistive technologies.
<button aria-label="Close">X</button>
aria-labelledby
Links an element to another, which then serves as the label for the referenced element.
<h2 id="heading-post">Very specific heading of a blog post</h2>
<div>
<p>Lorem ipsum…</p>
<a href="#" aria-labelledby="heading-post">Go to read more</a>
</div>
aria-describedby
Provides an additional information about a given element.
<button aria-describedby="delete-info">Delete</button>
<p id="delete-info">
Deleted item will be permanently removed from our database.
</p>
aria-invalid
Indicates that the value of an element is invalid. It is used to communicate form errors during validation.
<input type="email" aria-invalid="true" />
aria-atomic
Specifies whether the entire content of an element should be read by a screen reader, even when only part of the text changes.
<button aria-live="polite" aria-atomic="true">
Cart. <span id="items">3</span> <span class="visually-hidden">Items</span>
</button>
aria-busy
Indicates that the element is being updated and should not be read in the meantime.
<div aria-busy="true">Loading...</div>
role
Defines the role of an element within the application, helping assistive technologies understand the type of element.
<button id="menubutton" aria-haspopup="true" aria-controls="menu">
<img src="/menu-icon.svg" alt="Pages menu" />
</button>
<ul id="menu" role="menu" aria-labelledby="menubutton">
<li><a href="/home">Home</a></li>
<li><a href="/about" aria-current="page">About</a></li>
</ul>
To help maintain accessibility standards across your application, it is recommended to use tools that automatically check the correctness of your implementation. One such tool is eslint-plugin-jsx-a11y – an ESLint plugin that helps enforce accessibility rules in React applications.
Go back to articles