frontend-accessibility-best-practices

Accessibility Best Practices

Accessibility patterns for building inclusive React applications following WCAG standards. Contains 7 rules across 4 categories focused on semantic HTML, screen reader support, keyboard navigation, and user preferences.

When to Apply

Reference these guidelines when:

• Creating new UI components
• Building forms and interactive elements
• Adding dynamic content or notifications
• Implementing navigation patterns
• Reviewing code for accessibility

Rules Summary

Semantic HTML & Structure (HIGH)

semantic-html-landmarks - @rules/semantic-html-landmarks.md

Use semantic HTML elements for page structure.

// Bad: divs with class names
<div className="header">...</div>
<div className="nav">...</div>
<div className="content">...</div>

// Good: semantic elements
<header>...</header>
<nav aria-label={t("Primary")}>...</nav>
<main>...</main>
<footer>...</footer>

Screen Readers (MEDIUM)

screen-reader-sr-only - @rules/screen-reader-sr-only.md

Use sr-only class for visually hidden text.

// Icon-only buttons need accessible labels
<Button variant="icon" onPress={onClose}>
  <XMarkIcon aria-hidden="true" />
  <span className="sr-only">{t("Close")}</span>
</Button>

// Visually hidden section headings
<section>
  <h2 className="sr-only">{t("Search results")}</h2>
  <SearchResultsList />
</section>

aria-live-regions - @rules/aria-live-regions.md

Announce dynamic content changes to screen readers.

// Error messages - announced immediately
{
  error && (
    <p role="alert" className="text-failure-600">
      {error}
    </p>
  );
}

// Status updates - announced politely
<div role="status" aria-live="polite">
  {t("{{count}} results found", { count })}
</div>;

Keyboard & Focus (HIGH)

keyboard-navigation - @rules/keyboard-navigation.md

Use semantic elements for built-in keyboard support.

// Bad: div with onClick not keyboard accessible
<div onClick={handleClick}>Click me</div>

// Good: button has Enter/Space support
<button onClick={handleClick}>Click me</button>

// Good: react-aria Button handles everything
import { Button } from "react-aria-components";
<Button onPress={handlePress}>Click me</Button>