Making the Web Accessible with ARIA

As an autistic woman, I know how frustrating it can be when technology isn’t designed with different ways of thinking and interacting in mind. Imagine trying to order food online, apply for a job, or book a ticket—but the site doesn’t tell you what’s selected, which button to press, or whether a dropdown is open or closed. For many of us, this isn’t just an occasional inconvenience—it’s an everyday struggle.

The good news? We, as developers, have the power to fix this.

ARIA (Accessible Rich Internet Applications) is a tool that helps make websites usable for everyone. Let’s talk about what it is, why it matters, and how you can start using it today.

What is ARIA?

ARIA is a set of attributes that help assistive technologies, like screen readers, understand interactive elements on a webpage. It doesn’t change how things look or behave, but it fills in the gaps where native HTML isn’t enough.

Here’s what ARIA does:

• Roles – Define what an element is (e.g., role="button" tells assistive tech that a div acts like a button).
• States – Indicate dynamic changes (e.g., aria-expanded="true" for a dropdown menu).
• Properties – Provide additional context (e.g., aria-label="Search" so a screen reader knows what a button does).

Think of ARIA as a way to explain your website to people using assistive tech, making sure they get the same experience as everyone else.

Why Should You Care?

1. It’s the Law

Accessibility isn’t just the right thing to do—it’s legally required in many places.

• Americans with Disabilities Act (ADA) in the U.S.
• Web Content Accessibility Guidelines (WCAG) used globally.
• Equality Act 2010 in the UK.

Companies have been sued for not meeting accessibility standards. Avoid the legal risk and make your site accessible from the start.

2. It Expands Your Audience

Over 15% of the world’s population has a disability. That’s millions of potential users who might struggle to use your site if it’s not accessible.

3. It Improves UX and SEO

Accessibility-friendly sites tend to have better structure, easier navigation, and higher engagement, which also benefits search rankings.

How ARIA Works (With Examples)

Problem: A Dropdown Menu Without ARIA

Here’s an example of a dropdown menu that isn’t accessible:

<div onclick="toggleMenu()">Menu</div>
<ul>
    <li>Option 1</li>
    <li>Option 2</li>
</ul>

Problem: A screen reader has no idea this is a menu—it just sees a list of items.

Solution: Adding ARIA

<div role="button" aria-expanded="false" tabindex="0" onclick="toggleMenu()">
    Menu
</div>
<ul role="menu">
    <li role="menuitem">Option 1</li>
    <li role="menuitem">Option 2</li>
</ul>

Now, assistive technologies recognize:

• The div as a button.
• The aria-expanded state, indicating if the menu is open or closed.
• The ul as a menu and each li as a menu item.

This small change can completely transform how a person with a disability experiences your website.

ARIA Best Practices

Before you start adding ARIA everywhere, keep these golden rules in mind:

• Use Native HTML First – A <button> is better than div role="button".
• Keep ARIA Updated – If a menu opens, make sure aria-expanded="true" updates dynamically.
• Test with a Screen Reader – Tools like NVDA, VoiceOver, or ChromeVox can help you hear what users experience.
• Follow W3C Best Practices – The ARIA Authoring Practices Guide is an excellent resource for getting things right.

Bad ARIA is worse than no ARIA. Misusing it can make things more confusing for assistive tech users.

The Bigger Picture

At the end of the day, the web is for everyone. Ignoring accessibility excludes people, while embracing it makes the internet better for all of us.

What You Can Do Right Now:

• Check your site’s accessibility.
• Try navigating with a screen reader.
• Start using ARIA where it makes sense.

Even small tweaks can make a world of difference for someone who relies on assistive tech.

Let’s build a better, more inclusive web—together.

Want to Learn More?

• W3C ARIA Authoring Practices
• WebAIM ARIA Guide