アクセシビリティベストプラクティス

WCAG 標準に準拠した包括的な React アプリケーション構築のためのアクセシビリティパターン。セマンティック HTML、スクリーンリーダーサポート、キーボードナビゲーション、ユーザー設定に焦点を当てた 4 つのカテゴリーにわたる 7 つのルールを含みます。

適用のタイミング

以下の場合にこれらのガイドラインを参照してください:

• 新しい UI コンポーネントを作成するとき
• フォームとインタラクティブ要素を構築するとき
• 動的コンテンツまたは通知を追加するとき
• ナビゲーションパターンを実装するとき
• アクセシビリティコンプライアンスのためにコードをレビューするとき

ルール概要

セマンティック HTML と構造 (HIGH)

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

ページ構造にはセマンティック HTML 要素を使用します。

// 悪い例: クラス名を持つ div
<div className="header">...</div>
<div className="nav">...</div>
<div className="content">...</div>

// 良い例: セマンティック要素
<header>...</header>
<nav aria-label={t("Primary")}>...</nav>
<main>...</main>
<footer>...</footer>

スクリーンリーダー (MEDIUM)

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

視覚的に隠されたテキストには sr-only クラスを使用します。

// アイコンのみのボタンは アクセシブルなラベルが必要
<Button variant="icon" onPress={onClose}>
  <XMarkIcon aria-hidden="true" />
  <span className="sr-only">{t("Close")}</span>
</Button>

// 視覚的に隠されたセクション見出し
<section>
  <h2 className="sr-only">{t("Search results")}</h2>
  <SearchResultsList />
</section>

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

動的なコンテンツ変更をスクリーンリーダーに通知します。

// エラーメッセージ - 即座に通知
{
  error && (
    <p role="alert" className="text-failure-600">
      {error}
    </p>
  );
}

// ステータス更新 - 丁寧に通知
<div role="status" aria-live="polite">
  {t("{{count}} results found", { count })}
</div>;

キーボード及びフォーカス (HIGH)

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

キーボードサポートを組み込むためにセマンティック要素を使用します。

// 悪い例: onClick を持つ div はキーボードアクセス不可
<div onClick={handleClick}>Click me</div>

// 良い例: button には Enter/Space サポートが組み込まれている
<button onClick={handleClick}>Click me</button>

// 良い例: react-aria Button がすべてを処理
import { Button } from "react-aria-components";
<Button onPress={handlePress}>Click me</Button>

focus-management - @rules/focus-management.md

目に見えるフォーカスインジケーターを表示し、モーダルでフォーカスをトラップします。

// フォーカススタイルには常に focus-visible を使用
<button className="focus-visible:ring-2 focus-visible:ring-teal-600">
  Click me
</button>;

// react-aria Modal はフォーカストラッピングを自動的に処理
import { Modal, Dialog } from "react-aria-components";
<Modal isOpen={isOpen}>
  <Dialog>{/* フォーカスはここに自動的にトラップされます */}</Dialog>
</Modal>;

ユーザー設定 (MEDIUM)

reduced-motion - @rules/reduced-motion.md

prefers-reduced-motion 設定を尊重します。

import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion";

// CSS アプローチ
<div className="animate-bounce motion-reduce:animate-none">
  Bouncing content
</div>;

// JS アプローチ
function AnimatedCounter({ value }) {
  let prefersReducedMotion = usePrefersReducedMotion();
  if (prefersReducedMotion) return <span>{value}</span>;
  return <CountUp target={value} />;
}

touch-targets - @rules/touch-targets.md

44x44px 以上の最小タッチターゲットを確保します。

// アイコンボタンは明示的なサイズが必要
<Button variant="icon" className="h-11 w-11">
  <XMarkIcon className="h-5 w-5" />
  <span className="sr-only">{t("Close")}</span>
</Button>

// リンクはタップ可能な領域のためにパディングが必要
<Link to={href} className="block py-3 px-4">
  {label}
</Link>

主要ファイル

• app/components/heading.tsx - Region、Heading、Main コンポーネント
• app/hooks/use-prefers-reduced-motion.ts - 動きの軽減フック
• app/components/field/field.tsx - アクセシブルなフォームフィールドコンポーネント