A Guide to Accessibility Best Practices: No ARIA is Better Than Bad ARIA

Accessibility is at the heart of inclusive design, ensuring that digital products can be used by everyone, regardless of their abilities. One of the tools often employed to improve accessibility is ARIA (Accessible Rich Internet Applications). However, as powerful as ARIA can be, it’s equally potent in creating barriers when misused. This blog post dives into why “No ARIA is better than bad ARIA” and provides practical examples and tips to guide you toward effective implementation.

---

What Is ARIA?

ARIA is a set of attributes that developers can use to improve accessibility for users relying on assistive technologies like screen readers. It allows you to enhance semantics, define roles, and communicate states and properties that are otherwise not available in HTML. For instance:

<div role="button" aria-pressed="false">Like</div>

But ARIA is not a cure-all. Misusing ARIA can confuse assistive technologies, leading to poor user experiences.

---

Why Bad ARIA Is Harmful

Incorrect ARIA usage can:

1. Create Confusion: Misleading or incorrect roles and attributes can make it harder for users to understand the interface.
2. Break Assistive Technology: Some ARIA attributes might conflict with native HTML semantics or fail to work as expected.
3. Add Unnecessary Complexity: Overusing ARIA where native HTML elements suffice adds bloat and complexity without benefit.

Example of bad ARIA:

<span role="button" aria-label="Submit form" onclick="submitForm()">Submit</span>

Issues:

• The <span> element lacks the keyboard and focus behavior of a native <button>, which isn't addressed by ARIA.
• Native HTML buttons (<button>) already come with built-in accessibility.

---

When No ARIA Is Better

Native HTML elements often have built-in accessibility features. Choosing the right semantic element eliminates the need for ARIA:

1. Use <button> instead of <div role="button">.
2. Prefer <header>, <nav>, and <section> instead of adding ARIA roles to <div> or <span>.
3. Employ <label> and <input> for forms rather than custom elements with ARIA attributes.

Here’s an improved version of the earlier bad example:

<button onclick="submitForm()">Submit</button>

This approach respects accessibility defaults, ensuring better compatibility with assistive tools.

---

Common Use Cases Where ARIA Shines

While native elements are ideal, ARIA is indispensable for certain complex UI components. Use ARIA correctly in:

1. Custom Widgets

• Example: Building a dropdown menu

<div role="menu" aria-labelledby="menu-button">
    <div role="menuitem" tabindex="0">Option 1</div>
    <div role="menuitem" tabindex="0">Option 2</div>
</div>

• ARIA communicates that this is a menu to assistive technologies.

2. Dynamic States

• Example: Indicating form validation errors

<input type="text" id="email" aria-invalid="true" aria-describedby="error-msg" />
<span id="error-msg">Invalid email address</span>

• ARIA attributes (aria-invalid, aria-describedby) clarify the issue to users relying on screen readers.

3. Live Regions

• Example: Announcing changes in a live chat

<div aria-live="polite">New message: Hi there!</div>

• ARIA ensures the change is announced to users without disrupting the rest of the interaction.

---

Best Practices for Using ARIA

1. Understand ARIA Roles and Attributes: Learn when and where to apply ARIA effectively.
2. Test with Assistive Technologies: Validate your ARIA usage with screen readers and other tools.
3. Follow the First Rule of ARIA: "Don't use ARIA unless you have to."
4. Avoid Redundant ARIA: Don’t add roles or attributes to elements that already have accessible behavior natively.
5. Keep it Simple: Use the least amount of ARIA needed to achieve your goal.

---

Final Thoughts

ARIA is a double-edged sword: it can either enhance or hinder accessibility depending on its use. By prioritizing semantic HTML and applying ARIA only where necessary, you can create experiences that truly include all users.

So, remember: No ARIA is better than bad ARIA. Accessibility isn’t just about compliance—it’s about making everyone feel welcome and capable online.