React Project

title: "React Accessibility Module Project" weight: 25 description: "Apply everything learned in this module: build an accessible React application with proper focus management, keyboard navigation, ARIA attributes, semantic HTML, form accessibility, and testing." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, react]

This capstone project combines all React accessibility techniques from this module into a fully accessible React application with focus management, keyboard navigation, ARIA attributes, semantic HTML, accessible forms, and automated testing.

## Project Overview

You will build an accessible React e-commerce product page with product listing, product detail, cart, and checkout. Every component must be accessible.

## Project Steps

```mermaid
flowchart TD
  A[Plan Components] --> B[Semantic Layout]
  B --> C[Interactive Components]
  C --> D[Forms]
  D --> E[Testing]
  E --> F[CI/CD]
  F --> G[Final Review]

Step 1: Layout

Create the app layout with semantic HTML, skip link, and navigation.

function App() {
  return (
    <>
      <SkipLink />
      <header>
        <nav aria-label="Main">...</nav>
      </header>
      <main id="main-content">
        <Outlet />
      </main>
      <footer>...</footer>
    </>
  );
}

Step 2: Components

Build accessible components: ProductCard, Accordion (product details), Tabs (reviews/shipping), Modal (quick view), and Slider (price filter).

Step 3: Forms

Build an accessible checkout form with field validation, error announcements, and live region for submission status.

function CheckoutForm() {
  return (
    <form noValidate>
      <FormField label="Full name" name="name" />
      <FormField label="Email" type="email" name="email" />
      <FormField label="Address" name="address" />
      <button type="submit">Place Order</button>
    </form>
  );
}

Step 4: Testing

Write jest-axe tests for all components. Add eslint-plugin-jsx-a11y. Add cypress-axe for E2E tests.

Deliverables

Submit: source code for the React app, jest-axe test suite, ESLint configuration, CI/CD configuration, and an accessibility report documenting the accessibility features implemented and the test results.

What's Next

PDF and Document Accessibility covers accessibility for PDF documents.