RGAA 4 for React Developers: What You Actually Need to Build

What is RGAA 4?

The Référentiel Général d'Amélioration de l'Accessibilité (RGAA) version 4.1.2 is the French national standard for digital accessibility. It is legally mandatory for:

- French public-sector websites and apps (since 2019) - Private sector companies with annual revenue over €250M (since 2020) - All digital services covered by the European Accessibility Act (EAA, enforcement June 2025)

RGAA 4.1.2 is based on WCAG 2.1 Level AA and partially incorporates WCAG 2.2 criteria. It is organized into 106 criteria across 13 thematic topics.

The 13 RGAA topics — what matters most for React

RGAA organizes accessibility requirements into 13 topics. As a React developer, the highest-impact topics are:

Topic 1 — Images: Alt text, decorative images with aria-hidden, complex images with long descriptions.

Topic 3 — Colors: Contrast ratios (4.5:1 for text, 3:1 for UI components), never convey information by color alone.

Topic 5 — Tables: Data tables need <caption> and header cells with scope attributes. Avoid layout tables.

Topic 6 — Links: Every link must have an accessible name. Avoid "click here" — use aria-label for icon links.

Topic 7 — Scripts: Keyboard control of all interactive components, status messages via aria-live, compatible with screen readers.

Topic 8 — Mandatory elements: Page language declaration (lang="fr"), title element, no keyboard traps.

Topic 10 — Presentation: No information conveyed by CSS alone, focus indicators not hidden via outline:none.

Topic 11 — Forms: Labels associated to fields (htmlFor + id), error messages linked via aria-describedby, required fields marked with aria-required.

Critical ARIA patterns for React

These patterns cover the most common RGAA failure points in React applications:

// ✅ CORRECT — RGAA 11.1 + 11.10
<div>
  <label htmlFor="email">
    Email address
    <span aria-hidden="true"> *</span>
    <span className="sr-only"> (required)</span>
  </label>
  <input
    id="email"
    type="email"
    aria-required="true"
    aria-invalid={hasError}
    aria-describedby={hasError ? "email-error" : undefined}
  />
  {hasError && (
    <p id="email-error" role="alert">
      Please enter a valid email address.
    </p>
  )}
</div>

// ✅ CORRECT — RGAA 6.1 + 11.9
<button
  type="button"
  aria-label="Close dialog"
  onClick={onClose}
>
  <XIcon aria-hidden="true" />
</button>

// ❌ INCORRECT — no accessible name
<button type="button" onClick={onClose}>
  <XIcon />
</button>

// ✅ CORRECT — RGAA 7.1 + 7.3
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-desc"
>
  <h2 id="modal-title">Confirm deletion</h2>
  <p id="modal-desc">
    This action cannot be undone.
  </p>
  {/* Focus trap + Escape key handler required */}
</div>

// ✅ CORRECT — RGAA 7.5
// Announce status updates to screen readers
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

// For urgent alerts (errors):
<div role="alert">
  {errorMessage}
</div>

// ✅ CORRECT — RGAA 12.6
// Each page needs labeled landmark regions
<header role="banner">
  <nav aria-label="Main navigation">...</nav>
</header>
<main>...</main>
<nav aria-label="Breadcrumb">...</nav>
<footer role="contentinfo">...</footer>

Keyboard navigation requirements

Every interactive component must be fully keyboard-operable. The minimum keyboard interactions required by RGAA:

All interactive elements: Reachable by Tab key, activated by Enter or Space.

Dropdowns / menus: Arrow keys to navigate options, Escape to close, focus returns to trigger.

Modals / dialogs: Focus moves inside on open, Tab stays within the dialog (focus trap), Escape closes it, focus returns to trigger on close.

Tabs: Arrow keys switch between tabs, Tab moves to the panel content.

Autocomplete: Arrow keys navigate suggestions, Enter selects, Escape dismisses.

Date pickers: Arrow keys navigate the calendar, Enter selects a date, Page Up/Down navigate months.

Compliance boundary: component vs. integration

An important RGAA concept: accessibility conformance is always evaluated on the final rendered page, not on isolated components. This means:

- A well-built component can still fail RGAA if used incorrectly (missing labels, wrong heading hierarchy, poor color contrast in the chosen theme). - Your component library can reduce risk significantly, but cannot fully guarantee RGAA conformance without proper integration.

This is why Konform ships per-criterion audit documentation: to help you understand not just whether a component is built accessibly, but what your integrators need to verify in each usage context.