Accessibility

Learning objectives#

• Use semantic elements and labels in JSX
• Make everything keyboard-operable
• Manage focus for dialogs and dynamic content
• Announce updates with aria-live and test with tools

Explanation#

Semantic HTML first: <button> for actions, <a href>/<Link> for navigation, <nav>, <main>, headings in order, <ul> for lists. A div with onClick is invisible to keyboards and screen readers.

Every input needs a label (<label htmlFor> — remember htmlFor in JSX). Images need alt text (alt="" for decorative ones).

Keyboard: everything clickable must be reachable with Tab and work with Enter/Space; never remove focus outlines without a visible replacement.

Focus management: when a dialog opens, move focus into it and return focus to the trigger when it closes. The native <dialog> element with showModal() traps focus and handles Escape for you.

Announce dynamic changes (“Added to cart”, form errors) with aria-live="polite" regions or role="alert".

Test with keyboard-only use, a screen reader (NVDA, VoiceOver), Lighthouse and axe; eslint-plugin-jsx-a11y catches many issues while coding.

Syntax#

1<label htmlFor="email">Email</label>
2<input id="email" type="email" aria-describedby="email-help" />
3<p id="email-help">We never share it.</p>
4<div aria-live="polite">{status}</div>

Code example: An accessible dialog and live announcements#

1import { useRef, useState } from 'react';
2

3export default function AddToCart() {
4  const dialogRef = useRef(null);
5  const [qty, setQty] = useState(1);
6  const [message, setMessage] = useState('');
7

8  function openDialog() {
9    dialogRef.current.showModal();           // native modal: focus moves inside, Escape closes
10  }
11

12  function confirm(e) {
13    e.preventDefault();
14    dialogRef.current.close();               // focus returns to the button that opened it
15    setMessage(`Added ${qty} notebook${qty > 1 ? 's' : ''} to your cart.`);
16  }
17

18  return (
19    <main>
20      <h1>Spiral Notebook</h1>
21      <img src="https://picsum.photos/200/120" alt="Blue spiral notebook, A5 size" width={200} height={120} />
22      <button onClick={openDialog}>Add to cart</button>
23

24      <dialog ref={dialogRef} aria-labelledby="dlg-title">
25        <form onSubmit={confirm}>
26          <h2 id="dlg-title">Choose quantity</h2>
27          <label htmlFor="qty">Quantity</label>
28          <input id="qty" type="number" min={1} max={10} value={qty} onChange={e => setQty(Number(e.target.value))} />
29          <button type="submit">Confirm</button>
30          <button type="button" onClick={() => dialogRef.current.close()}>Cancel</button>
31        </form>
32      </dialog>
33

34      <p aria-live="polite">{message}</p>
35    </main>
36  );
37}

Keyboard users can Tab to “Add to cart” and press Enter. The dialog opens with focus inside it; Tab stays within the dialog, Escape or Cancel closes it, and focus returns to the button. After confirming, screen readers announce “Added 2 notebooks to your cart.” from the live region without moving focus.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Real <button> elements give keyboard and screen-reader support for free.
2. The image has descriptive alt text and fixed dimensions.
3. The native <dialog> with showModal() traps focus and supports Escape.
4. aria-labelledby names the dialog after its heading.
5. The aria-live paragraph announces the result politely.

Real-world use case#

Common mistakes#

Best practices#

• Semantic HTML before ARIA
• Label every input and name every button
• Manage focus for dialogs and route changes
• Test with keyboard, screen reader and axe

Remember this#

Practice exercise#

1import { useState } from 'react';
2

3export default function Header() {
4  const [open, setOpen] = useState(false);
5  return (
6    <header>
7      <button aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>☰</button>
8      {open && <nav aria-label="Main">Home · Shop</nav>}
9      <label htmlFor="search">Search</label>
10      <input id="search" type="search" />
11    </header>
12  );
13}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.