ARIA: Use With Care

Prerequisites

Before you start:

Learners should understand:

• semantic HTML
• keyboard navigation
• basic JavaScript interactions
• accessible forms
• the difference between links and buttons

Core explanation

ARIA stands for Accessible Rich Internet Applications.

ARIA attributes can add information for assistive technologies when HTML alone is not enough.

ARIA can describe:

• what something is
• what state it is in
• what it is connected to
• whether content has changed
• whether a control is expanded or collapsed
• what accessible name a control should have

ARIA does not usually change visual appearance or browser behaviour. It changes accessibility information.

That means ARIA can create a mismatch if the code says one thing and the visible interface does another.

Three basic ARIA ideas

Roles

Roles say what something is.

<div role="button">Open menu</div>

This says the div should be treated as a button.

However, this is usually worse than:

<button type="button">Open menu</button>

The real button already includes keyboard behaviour and correct semantics.

Properties

Properties describe relationships or extra information.

<input 
  id="email" 
  name="email" 
  type="email" 
  aria-describedby="email-help"
>
<p id="email-help">Use the address you check most often.</p>

States

States describe changing conditions.

<button 
  type="button" 
  aria-expanded="false" 
  aria-controls="site-menu"
>
  Menu
</button>

When the menu opens, JavaScript should update the state:

aria-expanded="true"

Useful ARIA attributes

aria-label

Gives an accessible name when visible text is not available.

<button type="button" aria-label="Close dialog">
  ×
</button>

Use carefully. Visible text is usually better.

aria-labelledby

Uses existing visible text as the accessible name.

<section aria-labelledby="featured-heading">
  <h2 id="featured-heading">Featured tutorials</h2>
  ...
</section>

aria-describedby

Connects extra description text.

<label for="username">Username</label>
<p id="username-help">Use 6 to 20 characters.</p>
<input id="username" name="username" aria-describedby="username-help">

aria-expanded

Indicates whether a collapsible area is open or closed.

<button 
  type="button" 
  aria-expanded="false" 
  aria-controls="faq-answer-1"
>
  What is accessibility?
</button>

<div id="faq-answer-1" hidden>
  <p>Accessibility means making websites usable by people with different needs and technologies.</p>
</div>

Starter code

<div class="accordion">
  <div class="accordion-title" onclick="toggleAnswer()">
    What is semantic HTML?
  </div>

  <div class="accordion-panel">
    <p>Semantic HTML uses elements according to their meaning.</p>
  </div>
</div>

Problems:

• The clickable title is a div.
• It may not be keyboard accessible.
• It does not communicate expanded or collapsed state.
• The relationship between title and panel is unclear.

Improved code

<div class="accordion">
  <h2>
    <button 
      type="button" 
      class="accordion-trigger"
      aria-expanded="false"
      aria-controls="semantic-html-panel"
      id="semantic-html-trigger"
    >
      What is semantic HTML?
    </button>
  </h2>

  <div 
    id="semantic-html-panel" 
    class="accordion-panel" 
    aria-labelledby="semantic-html-trigger"
    hidden
  >
    <p>Semantic HTML uses elements according to their meaning.</p>
  </div>
</div>

Supporting JavaScript

const trigger = document.querySelector('.accordion-trigger');
const panel = document.querySelector('#semantic-html-panel');

trigger.addEventListener('click', () => {
  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';

  trigger.setAttribute('aria-expanded', String(!isExpanded));
  panel.hidden = isExpanded;
});

Supporting CSS

.accordion-trigger {
  width: 100%;
  font: inherit;
  font-weight: 700;
  text-align: left;
  padding: 1rem;
  border: 2px solid #d4d4d4;
  background: #ffffff;
  cursor: pointer;
}

.accordion-trigger:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

.accordion-panel {
  padding: 1rem;
  border: 2px solid #d4d4d4;
  border-top: 0;
}

How and why this improves the component

• The trigger is a native button.
• The button can receive focus and respond to keyboard activation.
• aria-expanded communicates whether the panel is open.
• aria-controls identifies the controlled panel.
• hidden removes collapsed content from the page until it is shown.
• JavaScript keeps the visual state and accessibility state aligned.

Native HTML before ARIA examples

Prefer this:

<button type="button">Open menu</button>

Instead of this:

<div role="button" tabindex="0">Open menu</div>

Prefer this:

<nav aria-label="Main navigation">
  ...
</nav>

Instead of this:

<div role="navigation">
  ...
</div>

Prefer this:

<label for="search">Search tutorials</label>
<input id="search" name="search" type="search">

Instead of this:

<input type="search" aria-label="Search tutorials">

The ARIA version can be valid when no visible label fits the design, although visible labels are often clearer for everyone.