Syllabus

HTML Accessibility (ARIA, Screen Readers)

Badar KhalilUpdated September 27, 2026 2 min read

HTML Accessibility (ARIA, Screen Readers)

Web accessibility means building pages that everyone can use, including people who rely on screen readers, keyboard-only navigation, switch devices, or other assistive technology. It isn't an optional extra — in many countries it's a legal requirement (like the ADA in the US or the EN 301 549 standard in the EU), and it also improves usability for every visitor, not just those with disabilities.

Start with Semantic HTML

The single biggest accessibility win is simply using the correct native HTML element for the job — a real <button> instead of a styled <div>, a real <nav> instead of a generic wrapper. Native elements already come with built-in keyboard support, focus handling, and screen-reader announcements for free.

What is ARIA?

ARIA (Accessible Rich Internet Applications) is a set of extra HTML attributes that describe roles, states, and properties to assistive technology, used to fill gaps when semantic HTML alone isn't enough — for example, in complex custom widgets like tab panels, modals, or autocomplete menus. The golden rule of ARIA is: "No ARIA is better than bad ARIA" — always prefer a native element first.

Common ARIA Attributes

role — defines what a custom element behaves as (e.g. role="button", role="dialog").
aria-label — provides an accessible name when there's no visible text label.
aria-hidden="true" — hides purely decorative content from screen readers.
aria-expanded — tells screen readers whether a collapsible section is open or closed.
aria-live — announces dynamic content updates (like a form error or a live chat message) without the user needing to navigate to them.

Every interactive element must be reachable and operable using only the Tab, Shift+Tab, Enter, and Space keys, since many users cannot use a mouse at all. Custom interactive components built with <div> elements need tabindex and manual keyboard event handling to behave correctly.

Images, Forms and Color Contrast

Always give meaningful images an alt attribute describing their content, and mark purely decorative images with alt="". Every form input needs an associated <label>. Text and background colors should meet WCAG's minimum contrast ratio so low-vision users can read content comfortably.

Testing Accessibility

Common techniques include navigating a page using only the keyboard, testing with a real screen reader (VoiceOver on Mac, NVDA on Windows), and running automated audit tools like Lighthouse or axe DevTools to catch common issues quickly.

Try it Yourself HTML

<!-- A custom accordion button using ARIA to communicate its expanded state -->
<button aria-expanded='false' aria-controls='panel1' id='accordionBtn'>
  What is included in the plan?
</button>
<div id='panel1' role='region' hidden>
  <p>The plan includes hosting, support, and monthly backups.</p>
</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

// Toggling the accordion and keeping ARIA state in sync
const btn = document.getElementById('accordionBtn');
const panel = document.getElementById('panel1');

btn.addEventListener('click', () => {
  const isExpanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!isExpanded));
  panel.hidden = isExpanded;
});

Output

Press Run to execute.

Try it Yourself HTML

<!-- Accessible form field example -->
<label for='email'>Email address</label>
<input type='email' id='email' name='email' required aria-describedby='emailHelp'>
<small id='emailHelp'>We'll never share your email with anyone else.</small>

Output

Press Run to execute.

Exercise: Fix the Inaccessible ButtonHTML

The code below uses a <div> styled to look like a button, but it can't be focused or activated with a keyboard, and has no accessible name. Rewrite it to be fully accessible.

Try it Yourself HTML

<div class='btn' onclick='submitForm()'>Submit</div>

Output

Press Run to execute.

Show expected output

<button type='button' onclick='submitForm()'>Submit</button> — a real <button> element, which is focusable, keyboard-operable, and announced correctly by screen readers by default.

This is a self-check — compare your result with the expected output above.

Was this page helpful?