Enhancing Accessibility for Screen Reader Users with ARIA

WAI-ARIA is a technical specification from the W3C (World Wide Web Consortium) designed to enhance the accessibility of web content and user interface components for people with disabilities.

An ARIA Backstory

Screen readers are among the most widely used assistive technologies, helping people with disabilities navigate the web. WAI-ARIA adds semantic meaning to unsemantic HTML and JavaScript-generated content, improving the likelihood that screen readers can provide a good user experience.

Like many technologies, WAI-ARIA was created to solve a specific problem. Before semantic HTML elements like <nav> or <header> were widely supported, developers often relied on <div> elements with classes styled to mimic those elements.

<ul class="nav">
	<li><a href="/">Home</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/services">Services</a></li>
	<li><a href="/contact">Contact</a></li>
</ul>

Visually, this looked fine, but semantics is more than just visual appearance. For people with certain disabilities, such as low or no vision, screen readers rely on semantic information to identify which page element a user is currently interacting with. Since elements are purely structural and lack semantic meaning, screen readers often overlook them. Using semantic HTML elements and WAI-ARIA makes it much easier to enhance the user experience for people with disabilities-in this case, screen reader users.

Using ARIA Roles and Attributes to Create Context

Let's start with what these are:

ARIA Roles - Provides semantic meaning to custom or interactive elements, helping screen readers interpret and present them in a way that is both structurally accurate and understandable to users.

ARIA Attributes – Modify an element's state and properties based on the accessibility tree. There are 4 categories of Attribute types, which both hold a variety of useful attributes.

As a UX Technical Consultant, working with healthcare, social impact and cultural institutions, ensuring that content is accurately interpreted by screen readers and other assistive technologies is a crucial part of creating an effective user experience. Many businesses lack a full view of each user's situation. When aiming for the best possible user experience, that can involve a wide range of experiences.

Implementing features like this made a huge impact on all users if done correctly.

ARIA Attribute Example:

The MoMA has a great example of utilizing ARIA attributes to improve its user experience. When using a screen reader (currently on VoiceOver on Mac). The menu item selected reads aloud, “Exhibitions and events, collapsed, button”. Low vision or no vision users may not have context for what the menu items look like. Hearing the item name, and the words “collapsed” and “button” immediately gives them more context that this is a collapsed dropdown item.

If we look at the HTML code of the “Exhibitions and events” menu item, there is an aria-expanded=“true”. aria-expanded is an aria attribute that indicates to screen readers if a control (such as a button) is either collapsed or expanded.

Adding these types of attributes will give users with disabilities a contextual boost and an enhanced experience navigating your website or app.

ARIA Role Example:

Glenstone utilizes semantic HTML to create the role “banner”. By default, when using the <header> tag, screen readers list the section as a banner landmark. This gives users an easy way of navigating between large regions of a webpage.

ARIA State Properties

Websites and apps typically have user interactions that allow users to update, delete, and create new content within the UI. For full vision users, it’s easy to tell if a checkbox on a form is checked or unchecked. For users with disabilities, this can be difficult or impossible if accessibility features aren’t implemented correctly.

In a scenario like this, you're unintentionally locking the door on many of your visitors and customers.

This brings me to the next topic, ARIA state properties.

ARIA state properties — area type of WAI-ARIA attribute that describes the dynamic condition or current state of an HTML element for assistive technologies like screen readers.

These are property attributes that indicate changes in the UI in response to user interaction. Ex. The checkbox scenario I mentioned earlier.

Examples include attributes like:

aria-checked — indicates if a checkbox is selected or unselected.

aria-expanded — Shows whether an expandable element (accordion, dropdown, tree item) is currently expanded or collapsed.

aria-selected — Marks whether an item in a list, tab, grid, or tree is selected.

ARIA State Property Example:

In this instance, Chipotle’s website has an option menu of proteins. For full vision users, there’s a check and a yellow border that signifies you’ve selected a specific protein.

Chipotle uses the aria-label attribute to have screen readers read out if the option is selected or not. Another way would be to add an aria-selected state attribute to each option. This way, when a screen reader user selects a protein, it will say “Selected”.

aria-label ultimately provides a clear, plain-language description of an element’s action when visible text isn’t present.

Conclusion

ARIA properties serve a variety of use cases. As a UX and Accessibility consultant, my goal is to ensure that every user can navigate websites and apps with ease and reach their destination without barriers.

If your website or application needs UX or Accessibility remediation, feel free to reach out. I’d be glad to guide you through the process of making your website or digital product both accessibility compliant and user-friendly.”