Design practice

Build an Accessible Component from Scratch

Implement a fully accessible component with compound patterns and ARIA

Start the exercise

01 / Prepare

What you’ll
work on.

Design and implement a disclosure (accordion) component that is fully accessible: keyboard navigable, screen reader compatible, and properly documented. Practice the compound component pattern with ARIA attributes.

Before you begin

  • React fundamentals (hooks, composition)
  • Basic understanding of ARIA roles and attributes
  • Familiarity with keyboard navigation patterns
  • A screen reader installed for testing (VoiceOver on macOS, NVDA on Windows)

02 / Practice

The work,
step by step.

Work through these 5 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Research the Pattern

    30 min

    1. Read the WAI-ARIA Accordion Pattern at https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

    2. Note the requirements: role="region" on each panel, aria-expanded on trigger buttons, aria-controls linking triggers to panels, keyboard support for Enter/Space to toggle and Tab to navigate between triggers, and optionally Up/Down arrows to move between triggers and Home/End for first/last

  2. Design the API

    30 min

    1. Define the compound component API

      <Accordion>
  <Accordion.Item>
    <Accordion.Trigger>Section title</Accordion.Trigger>
    <Accordion.Panel>Panel content</Accordion.Panel>
  </Accordion.Item>
</Accordion>

    2. Define props: defaultOpen, allowMultiple, onChange

    3. Plan state management: Context-based, no prop drilling

  3. Implement

    120 min

    1. Build the compound component with React Context

    2. Implement all ARIA attributes

    3. Implement keyboard handling (Enter, Space, Tab, optionally Up/Down/Home/End)

    4. Add transition animation for panel expand/collapse

    5. Respect prefers-reduced-motion

  4. Test

    60 min

    1. Keyboard test — Navigate the entire component without a mouse

    2. Screen reader test — Use VoiceOver/NVDA. Does it announce expanded/collapsed state? Can you navigate by headings?

    3. Contrast test — Check all text meets WCAG AA (4.5:1)

    4. Focus test — Is the focus indicator visible at all times?

  5. Document

    30 min

    1. Write a brief component spec: props, keyboard interactions, ARIA attributes

    2. Include a usage example

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • Working React component (Accordion with compound pattern)
  • All ARIA attributes implemented
  • Keyboard navigation working
  • Screen reader tested (note any issues found)
  • Brief component spec document

How to assess your work

ARIA correctness
All required attributes present and dynamically updated
Keyboard
Full keyboard operation matching WAI-ARIA spec
Screen reader
Announces state changes, navigable by region/heading
Code quality
Compound pattern with Context, no prop drilling, clean API
Motion
Respects prefers-reduced-motion

Choose your
next exercise.

Browse all exercises