Accessibility basics

Learn why accessible components matter.

Accessibility basics

Accessibility (a11y) means anyone using a screen reader, keyboard or voice commands can use your app comfortably. Semantic HTML does most of the work: a <button> is naturally focusable and triggers on Enter.

For custom components you add meaning with role and aria-label. The tab order should match the visual order. Colour alone must never carry meaning; pair it with an icon or text.

Accessibility also comforts everyone who loves keyboard shortcuts.

ARIA and keyboard

ARIA is used only when semantic HTML falls short. The most common attributes are aria-label, aria-expanded and aria-hidden.

In a dropdown the toggle button should announce its state with aria-expanded. A keyboard user navigates with Tab and interacts with Enter and Esc.

Set tabIndex to 0 to put a custom element into the tab order; -1 allows programmatic focus only.

Exercise Write the IconButton component

Write an IconButton component. Take a label prop and render a <button aria-label={label}> containing an <svg>. Export it.

Show example solution

function IconButton({ label }) {
  return (
    <button aria-label={label}>
      <svg width="16" height="16" />
    </button>
  );
}
export default IconButton;

Test yourself

Which is the best choice for an accessible button?
- <button onClick={save}>Save</button>
- <div onclick="...">Save</div>
- <span role="button">Save</span>
- <a href="#">Save</a>
Show answer

<button onClick={save}>Save</button> — button is naturally focusable and keyboard friendly.

Fill in the blank: add state to the dropdown button

function Menu({ open }) {
  return (
    <button aria-expanded={____}>
      Menu
    </button>
  );
}

Show answer

function Menu({ open }) {
  return (
    <button aria-expanded={open}>
      Menu
    </button>
  );
}

Match accessibility concepts

aria-label

Label without visible text
tabIndex 0

Into tab order
role

Adds meaning
Esc

Closes menu

Next lesson: ARIA and keyboard

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies