Michael Samuel Naeem

ARIA Patterns That Actually Help

By Michael Samuel Naeem · March 9, 2026 · 11 min read

Engineering
Share on LinkedIn Share on X Share on Reddit Share on HN Share on Bluesky

title: "ARIA Patterns That Actually Help" slug: "web-accessibility-aria-patterns" description: "Use ARIA effectively without making things worse: roles, states, properties, live regions, and the patterns that fix real accessibility problems in web applications." datePublished: "2026-03-09" dateModified: "2026-07-17" tags:

title: "web-accessibility-aria-patterns" slug: "web-accessibility-aria-patterns" description: "" datePublished: "2026-07-17" dateModified: "2026-07-17" tags:

title: "web-accessibility-aria-patterns" slug: "web-accessibility-aria-patterns" description: "" datePublished: "2026-07-17" dateModified: "2026-07-17" tags:

title: "web-accessibility-aria-patterns" slug: "web-accessibility-aria-patterns" description: "" datePublished: "2026-07-17" dateModified: "2026-07-17" tags:

title: "web-accessibility-aria-patterns" slug: "web-accessibility-aria-patterns" description: "" datePublished: "2026-07-17" dateModified: "2026-07-17" tags:

title: "web-accessibility-aria-patterns" slug: "web-accessibility-aria-patterns" description: "" datePublished: "2026-07-17" dateModified: "2026-07-17" tags:

title: "ARIA Patterns That Actually Help" slug: "web-accessibility-aria-patterns" description: "Use ARIA effectively without making things worse: roles, states, properties, live regions, and the patterns that fix real accessibility problems in web applications." datePublished: "2026-03-09" dateModified: "2026-07-17" tags:

A client ran an accessibility audit and got flagged for 47 ARIA violations — and 31 of them were on pages where developers had added ARIA thinking they were helping. role="button" on a <button>, aria-label duplicating visible text, role="navigation" on a <nav>. The pages were less accessible after the ARIA pass than before. ARIA is a power tool: used correctly it makes custom widgets usable by screen readers; used incorrectly it overrides the browser's built-in semantics and confuses assistive technology. Here's how to get it right.

Rule zero: native HTML first

Before reaching for ARIA, check if HTML already solves it:

Need Use this Not this
Button <button> <div role="button" tabindex="0">
Link <a href="..."> <span role="link">
Navigation <nav> <div role="navigation">
Heading <h1>–<h6> <div role="heading" aria-level="1">
Text input <input type="text"> <div contenteditable role="textbox">
Checkbox <input type="checkbox"> <div role="checkbox" aria-checked>

Native elements come with keyboard handling, focus management, and screen reader support for free.

When ARIA is necessary

Custom widgets that have no HTML equivalent:

For these, follow the WAI-ARIA Authoring Practices Guide patterns exactly. They specify roles, keyboard interactions, and focus management for each widget.

Roles: what something is

<!-- Tab interface -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Account
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Settings
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Account content
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  Settings content
</div>

Each role carries expected keyboard behavior. Tabs require Arrow key navigation, Home/End, and automatic activation or manual activation depending on the pattern.

States: what changes

States update as the user interacts:

<!-- Disclosure widget -->
<button aria-expanded="false" aria-controls="details-section">
  Show details
</button>
<div id="details-section" hidden>
  Detail content here
</div>

<script>
  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!expanded));
    details.hidden = expanded;
  });
</script>

Critical states:

Properties: relationships

<!-- Form field with label and error -->
<label id="email-label" for="email">Email</label>
<input id="email" type="email"
       aria-labelledby="email-label"
       aria-describedby="email-error"
       aria-invalid="true">
<span id="email-error" role="alert">Enter a valid email address</span>

Live regions: announce dynamic changes

<!-- Search results count -->
<div aria-live="polite" aria-atomic="true" class="sr-only">
  {{ resultCount }} results found
</div>

<!-- Error alert -->
<div role="alert" aria-live="assertive">
  Your session has expired. Please log in again.
</div>

<!-- Loading status -->
<div role="status" aria-live="polite">
  Loading results...
</div>
Attribute Behavior
aria-live="polite" Announces when user is idle
aria-live="assertive" Interrupts current speech
aria-atomic="true" Reads entire region, not just changes
role="alert" Implicit assertive live region
role="status" Implicit polite live region

Use polite for most updates. Reserve assertive for errors and urgent warnings.

Common mistakes

Redundant ARIA. Don't add role="button" to <button> or aria-label="Close" when the button text already says "Close."

Missing keyboard support. role="button" on a <div> requires you to implement Enter/Space key handling and focus management. Use <button> instead.

aria-hidden on focusable elements. Never hide interactive elements with aria-hidden="true" — screen readers skip them but keyboard users can still tab to them.

Stale states. If aria-expanded doesn't update when the panel opens, screen readers report the wrong state. Keep ARIA states in sync with visual state.

Over-nesting roles. One role per element. Don't put role="tab" inside role="tablist" inside role="navigation" inside role="main" unless each is semantically correct.

Testing ARIA

  1. Automated scan — axe-core or Lighthouse catch missing labels and invalid roles
  2. Screen reader test — VoiceOver (macOS), NVDA (Windows), or TalkBack (Android)
  3. Keyboard-only navigation — Tab through the page, verify focus is visible and actions work
  4. Inspect accessibility tree — Chrome DevTools → Elements → Accessibility pane

Automated tools catch ~30% of accessibility issues. Screen reader testing catches the rest.

Landmarks and document structure

Combine ARIA with semantic landmarks:

<header role="banner">...</header>
<nav aria-label="Main">...</nav>
<main id="main">...</main>
<aside aria-label="Related articles">...</aside>
<footer role="contentinfo">...</footer>

One main per page. Multiple nav elements need distinct aria-label values—"Main", "Footer", "Account".

Heading hierarchy: do not skip levels for styling—h1 once, h2 sections, h3 subsections. Screen reader users navigate by heading rotor.

aria-describedby for hints and errors

<input id="pw" aria-describedby="pw-hint pw-error" />
<p id="pw-hint">Minimum 12 characters</p>
<p id="pw-error" role="alert" hidden>...</p>

Space-separated IDs in aria-describedby concatenate announcements. Toggle error visibility and hidden attribute together.

Dialog and menu roles without implementation bugs

If using ARIA menu pattern, implement full keyboard spec or use native <select>. Half-implemented role="menu" is worse than styled native controls—audit with APG checklist before shipping.

First rule of ARIA

No ARIA is better than bad ARIA — prefer native button over div role=button. Audit with axe then manual keyboard test — axe passes 30% of serious SR bugs per WebAIM surveys.

aria-live politeness

Assertive live regions interrupt screen reader — reserve for critical errors. Success toasts use polite or status role. Multiple assertive regions talking over each other is common failure mode in chat apps.

Practical follow-through (1)

Ship the smallest vertical slice first — one route, one widget, one index configuration — with rollback documented before expanding scope. Baseline the user-visible metric this work protects (latency, recall, conversion, task success rate) for seven days before change and seven days after in your largest market.

Compare canary p75 to control before full rollout. Exercise edge paths manually: refresh, back navigation, double-submit, offline mode, and keyboard-only flows. When assumptions change — traffic doubles, vendor upgrades, org restructure — revisit whether the original design still fits; quiet periods hide drift until the next incident.

Practical follow-through (2)

Ship the smallest vertical slice first — one route, one widget, one index configuration — with rollback documented before expanding scope. Baseline the user-visible metric this work protects (latency, recall, conversion, task success rate) for seven days before change and seven days after in your largest market.

Compare canary p75 to control before full rollout. Exercise edge paths manually: refresh, back navigation, double-submit, offline mode, and keyboard-only flows. When assumptions change — traffic doubles, vendor upgrades, org restructure — revisit whether the original design still fits; quiet periods hide drift until the next incident.

Practical follow-through (3)

Ship the smallest vertical slice first — one route, one widget, one index configuration — with rollback documented before expanding scope. Baseline the user-visible metric this work protects (latency, recall, conversion, task success rate) for seven days before change and seven days after in your largest market.

Compare canary p75 to control before full rollout. Exercise edge paths manually: refresh, back navigation, double-submit, offline mode, and keyboard-only flows. When assumptions change — traffic doubles, vendor upgrades, org restructure — revisit whether the original design still fits; quiet periods hide drift until the next incident.

Resources

Frequently asked questions

What is the main production risk with web accessibility aria patterns?

Teams ship without field measurement—web accessibility aria patterns failures appear as silent UX regressions, cost drift, or audit findings rather than clear errors.

When should we prioritize web accessibility aria patterns?

Prioritize when user research, CrUX, support tickets, or compliance requirements show pain on critical paths—not when a checklist mentions it abstractly.

How do we validate web accessibility aria patterns changes?

Baseline RUM before changes, compare p75 after deploy, and keep rollback via feature flags or cache purge documented in the PR.

Hiring a senior Android / Flutter engineer?

I architect and ship production mobile software — Kotlin, Jetpack Compose, Flutter — for robotics, EV infrastructure, fintech, and real-time systems. Open to remote roles in Europe and the US.

Get in touch →