Accessibility in depth: keyboard, ARIA and WCAG

WCAG 2.2 in simple words

In beginner-3 you met alt text, labels, real buttons, lang and colour contrast. Now we go deeper. WCAG (Web Content Accessibility Guidelines) comes from the W3C, and version 2.2 (October 2023) is the current one. Each rule, called a success criterion, has a level: A is the bare minimum, AA is the normal target that laws and companies ask for, and AAA is the strictest. Its four principles spell POUR: Perceivable, Operable, Understandable and Robust.

Keyboard and visible focus

Keyboard users press Tab to move forward, Shift+Tab to go back, Enter to follow links and press buttons, Space to tick boxes and press buttons, arrow keys inside radio groups and menus, and Escape to close pop-ups. Links, buttons and form fields can get focus on their own. Never remove the focus outline without giving a better one.

/* Bad: hides focus for everyone */
/* button:focus { outline: none; } */

/* Good: a clear ring when the user is using the keyboard */
:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>... logo and 30 menu links ...</header>
  <main id="main">
    <h1>Train timetable</h1>
  </main>
</body>

• tabindex="0" adds an element to the normal Tab order. Use it only for a custom widget; a real <button> needs nothing.
• tabindex="-1" lets JavaScript focus an element with element.focus() but keeps it out of the Tab order, for example an error summary you move focus to.
• Never use a positive tabindex such as tabindex="3". It forces a custom order that breaks the natural one and confuses everyone. Fix the order in the HTML instead.

Landmarks and headings

Screen reader users move around a page by landmarks (header, nav, main, aside, footer) and by headings, like using the contents page of a book. Use one h1 for the page topic, then h2 for sections and h3 inside them, without skipping levels just to get a smaller font. If you have two nav elements, name them: <nav aria-label="Main"> and <nav aria-label="Footer">.

ARIA: only to fill gaps

ARIA (Accessible Rich Internet Applications) is a set of attributes that add roles, names and states for assistive technology. It changes nothing for mouse users and adds no keyboard behaviour. The first rule of ARIA: if a native HTML element does the job, use it. A wrong role or a state that is never updated misleads users more than no ARIA at all, which is why people say "no ARIA is better than bad ARIA".

<!-- An icon-only button needs a name -->
<button type="button" aria-label="Close">&times;</button>

<!-- A menu toggle tells whether it is open (JavaScript updates it) -->
<button type="button" aria-expanded="false" aria-controls="site-menu">Menu</button>
<nav id="site-menu" hidden>...</nav>

<!-- Text that appears later is read out without moving focus -->
<p id="cart-status" aria-live="polite"></p>

The accessible name is what a screen reader calls a control. It comes from the text inside a button or link, a connected <label>, the alt of an image, or aria-label and aria-labelledby. "Click here" and "Read more" are poor names when a user lists all links; "Read more about NEET results" is clear. For messages that appear later, such as "Saved" or "3 errors in the form", use a live region: aria-live="polite" (or role="status") waits for a pause, while role="alert" interrupts and is only for urgent errors.

<button type="button" id="open-confirm">Cancel booking</button>

<dialog id="confirm-dialog" aria-labelledby="confirm-title">
  <h2 id="confirm-title">Cancel this booking?</h2>
  <form method="dialog">
    <button value="no">Keep it</button>
    <button value="yes">Yes, cancel</button>
  </form>
</dialog>

<script>
  const dialog = document.querySelector('#confirm-dialog');
  document.querySelector('#open-confirm')
    .addEventListener('click', () => dialog.showModal());
</script>

How to test

• Put the mouse away and Tab through the whole page. Can you always see the focus? Can you reach and use everything? Do pop-ups close with Escape?
• Use a screen reader: NVDA (free) or Narrator on Windows, VoiceOver on Mac and iPhone, TalkBack on Android. Listen to a form and a menu.
• Zoom to 200% and check that nothing is cut off. Turn on "reduce motion" on your phone and check big animations stop (you met prefers-reduced-motion in intermediate-1).
• Run the Lighthouse Accessibility audit and the axe DevTools browser extension.