tailwindcss-accessibility

Tailwind CSS のアクセシビリティパターン（WCAG 2.2 - 2025/2026）

WCAG 2.2 の概要（現行規格）

WCAG 2.2 は現行の W3C 規格です。Tailwind に関連する主な追加項目は次のとおりです。

• 2.5.8 ターゲットサイズ（レベル AA）：最小 24x24 CSS ピクセル、推奨サイズは 44x44
• 2.4.11 フォーカスが隠れないこと：フォーカスインジケーターを見える状態にする必要があります
• 2.4.13 フォーカスの外観：フォーカスインジケーターに関する要件の強化
• 3.3.7 冗長な入力：情報の再入力を要求しないでください
• 3.2.6 一貫したヘルプ：ヘルプ機能を一貫した場所に配置します

フォーカス管理

フォーカスリングユーティリティ

<button class="focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
  Button
</button>


<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
  Only shows ring for keyboard focus
</button>


<div class="focus-within:ring-2 focus-within:ring-brand-500 rounded-lg p-1">
  <input type="text" class="border-none focus:outline-none" />
</div>

@layer components {
  .focus-ring {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2;
  }

  .focus-ring-inset {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-inset;
  }
}

スキップリンク

<a
  href="#main-content"
  class="
    sr-only focus:not-sr-only
    focus:absolute focus:top-4 focus:left-4 focus:z-50
    focus:bg-white focus:px-4 focus:py-2 focus:rounded-md focus:shadow-lg
    focus:ring-2 focus:ring-brand-500
  "
>
  Skip to main content
</a>

<header>Navigation...</header>
<main id="main-content" tabindex="-1">
  Main content
</main>

フォーカストラップパターン

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  class="fixed inset-0 z-50 flex items-center justify-center"
>
  <div class="fixed inset-0 bg-black/50" aria-hidden="true"></div>
  <div
    class="relative bg-white rounded-xl p-6 max-w-md w-full"
    role="document"
  >
    <h2 id="modal-title" class="text-lg font-semibold">Modal Title</h2>
    <p>Modal content</p>
    <button class="focus-ring">Close</button>
  </div>
</div>

スクリーンリーダー用ユーティリティ

視覚的に隠されたコンテンツ

<span class="sr-only">Additional context for screen readers</span>


<a href="#main" class="sr-only focus:not-sr-only">Skip to main</a>


<button>
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Close menu</span>
</button>


<label>
  <span class="sr-only">Search</span>
  <input type="search" placeholder="Search..." />
</label>

動的コンテンツの通知

<div
  role="status"
  aria-live="polite"
  aria-atomic="true"
  class="sr-only"
>
  
  3 items added to cart
</div>


<div
  role="alert"
  aria-live="assertive"
  class="bg-red-100 text-red-800 p-4 rounded-lg"
>
  Error: Please correct the form
</div>

色のコントラスト

高コントラストパターン

<p class="text-gray-700 bg-white">4.5:1 contrast ratio</p>
<p class="text-gray-500 bg-white">May not meet WCAG AA (3:1 min for large text)</p>


<h1 class="text-4xl text-gray-600 bg-white">Large text - 3:1 ratio OK</h1>


<button class="
  bg-brand-500 text-white
  border-2 border-brand-500
  focus:ring-2 focus:ring-brand-500 focus:ring-offset-2
">
  Accessible Button
</button>

ダークモードのコントラスト

<p class="text-gray-900 dark:text-gray-100">
  High contrast text
</p>

<p class="text-gray-600 dark:text-gray-400">
  Secondary text with adequate contrast
</p>


<p class="text-gray-400 dark:text-gray-600">
  ⚠️ May have contrast issues in dark mode
</p>

フォーカスインジケーターのコントラスト

@theme {
  /* High contrast focus ring */
  --color-focus: oklch(0.55 0.25 250);
  --color-focus-offset: oklch(1 0 0);
}

<button class="
  focus:outline-none
  focus-visible:ring-2
  focus-visible:ring-[var(--color-focus)]
  focus-visible:ring-offset-2
  focus-visible:ring-offset-[var(--color-focus-offset)]
">
  High contrast focus
</button>

動きとアニメーション

モーションの低減

<div class="
  animate-bounce
  motion-reduce:animate-none
">
  Bouncing element (static for motion-sensitive users)
</div>


<div class="
  transition-opacity duration-300
  motion-reduce:transition-none
">
  Fades in (instant for motion-sensitive)
</div>


<div class="
  transition-all
  hover:scale-105 hover:shadow-lg
  motion-reduce:hover:scale-100 motion-reduce:hover:shadow-md
">
  Scales on hover (shadow only for motion-sensitive)
</div>

安全なアニメーションパターン

@layer components {
  /* Animations that respect reduced motion */
  .animate-fade-in {
    @apply animate-in fade-in duration-300;
    @apply motion-reduce:animate-none motion-reduce:opacity-100;
  }

  .animate-slide-up {
    @apply animate-in slide-in-from-bottom-4 duration-300;
    @apply motion-reduce:animate-none motion-reduce:translate-y-0;
  }
}

ホバー時にアニメーションを一時停止

<div class="
  animate-spin
  hover:animate-pause
  motion-reduce:animate-none
">
  Loading spinner
</div>

フォームのアクセシビリティ

アクセシブルなフォームフィールド

<div class="space-y-4">
  
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">
      Email address
      <span class="text-red-500" aria-hidden="true">*</span>
    </label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-hint email-error"
      class="
        mt-1 block w-full rounded-md border-gray-300
        focus:border-brand-500 focus:ring-brand-500
        aria-invalid:border-red-500 aria-invalid:ring-red-500
      "
    />
    <p id="email-hint" class="mt-1 text-sm text-gray-500">
      We'll never share your email
    </p>
    <p id="email-error" class="mt-1 text-sm text-red-600 hidden" role="alert">
      Please enter a valid email
    </p>
  </div>

  
  <div class="flex items-start gap-3">
    <input
      type="checkbox"
      id="terms"
      name="terms"
      class="
        h-4 w-4 rounded border-gray-300 text-brand-500
        focus:ring-brand-500
      "
    />
    <label for="terms" class="text-sm text-gray-700">
      I agree to the
      <a href="/terms" class="text-brand-500 underline">terms and conditions</a>
    </label>
  </div>

  
  <fieldset>
    <legend class="text-sm font-medium text-gray-700">Notification preference</legend>
    <div class="mt-2 space-y-2">
      <div class="flex items-center gap-3">
        <input type="radio" id="email-pref" name="notification" value="email" class="h-4 w-4" />
        <label for="email-pref">Email</label>
      </div>
      <div class="flex items-center gap-3">
        <input type="radio" id="sms-pref" name="notification" value="sms" class="h-4 w-4" />
        <label for="sms-pref">SMS</label>
      </div>
    </div>
  </fieldset>
</div>

エラー状態

<div>
  <label for="password" class="block text-sm font-medium text-gray-700">
    Password
  </label>
  <input
    type="password"
    id="password"
    aria-invalid="true"
    aria-describedby="password-error"
    class="
      mt-1 block w-full rounded-md
      border-red-500 text-red-900
      focus:border-red-500 focus:ring-red-500
    "
  />
  <p id="password-error" class="mt-1 text-sm text-red-600" role="alert">
    <span class="sr-only">Error:</span>
    Password must be at least 8 characters
  </p>
</div>

フォーム検証のフィードバック

/* Style based on aria-invalid attribute */
@custom-variant aria-invalid (&[aria-invalid="true"]);

<input
  class="
    border-gray-300
    aria-invalid:border-red-500
    aria-invalid:text-red-900
    aria-invalid:focus:ring-red-500
  "
  aria-invalid="true"
/>

インタラクティブコンポーネント

アクセシブルなボタン

<button
  type="submit"
  aria-busy="true"
  aria-disabled="true"
  class="
    relative
    aria-busy:cursor-wait
    aria-disabled:opacity-50 aria-disabled:cursor-not-allowed
  "
>
  <span class="aria-busy:invisible">Submit</span>
  <span class="absolute inset-0 flex items-center justify-center aria-busy:visible invisible">
    <svg class="animate-spin h-5 w-5" aria-hidden="true">...</svg>
    <span class="sr-only">Loading...</span>
  </span>
</button>


<button
  type="button"
  aria-label="Close dialog"
  class="rounded-full p-2 hover:bg-gray-100 focus-ring"
>
  <svg aria-hidden="true" class="h-5 w-5">...</svg>
</button>


<button
  type="button"
  aria-pressed="false"
  class="
    px-4 py-2 rounded-lg border
    aria-pressed:bg-brand-500 aria-pressed:text-white aria-pressed:border-brand-500
  "
>
  <span class="sr-only">Toggle feature</span>
  Feature
</button>

アクセシブルなドロップダウン

<div class="relative">
  <button
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="dropdown-menu"
    class="flex items-center gap-2 px-4 py-2 rounded-lg border focus-ring"
  >
    Options
    <svg aria-hidden="true" class="h-4 w-4">...</svg>
  </button>

  <ul
    id="dropdown-menu"
    role="menu"
    aria-labelledby="dropdown-button"
    class="
      absolute top-full mt-1 w-48 rounded-lg bg-white shadow-lg border
      hidden aria-expanded:block
    "
  >
    <li role="none">
      <a
        href="#"
        role="menuitem"
        tabindex="-1"
        class="block px-4 py-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
      >
        Edit
      </a>
    </li>
    <li role="none">
      <a
        href="#"
        role="menuitem"
        tabindex="-1"
        class="block px-4 py-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
      >
        Delete
      </a>
    </li>
  </ul>
</div>

アクセシブルなタブ

<div>
  <div role="tablist" aria-label="Account settings" class="flex border-b">
    <button
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      class="
        px-4 py-2 border-b-2
        aria-selected:border-brand-500 aria-selected:text-brand-500
        hover:text-gray-700
        focus-visible:ring-2 focus-visible:ring-inset
      "
    >
      Profile
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1"
      class="px-4 py-2 border-b-2 border-transparent"
    >
      Settings
    </button>
  </div>

  <div
    role="tabpanel"
    id="panel-1"
    aria-labelledby="tab-1"
    tabindex="0"
    class="p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset"
  >
    Profile content
  </div>

  <div
    role="tabpanel"
    id="panel-2"
    aria-labelledby="tab-2"
    tabindex="0"
    hidden
    class="p-4"
  >
    Settings content
  </div>
</div>

タッチターゲット（WCAG 2.2 - 2025/2026 年に特に重要）

WCAG 2.2 のターゲットサイズ要件

レベル	要件	Tailwind クラス
AA (2.5.8)	最小 24x24 CSS ピクセル	min-h-6 min-w-6
推奨	44x44 CSS ピクセル	min-h-11 min-w-11
AAA (2.5.5)	44x44 CSS ピクセル	min-h-11 min-w-11
最適	48x48 CSS ピクセル	min-h-12 min-w-12

プラットフォームのガイドラインとの比較：

• Apple iOS：最小 44x44 ポイント
• Google Android：最小 48x48 dp
• Microsoft Fluent：最小 44x44 ピクセル

最小タッチターゲットサイズ

<button class="min-h-6 min-w-6 p-1">
  <svg class="h-4 w-4">...</svg>
</button>


<button class="min-h-11 min-w-11 p-2.5">
  <svg class="h-6 w-6" aria-hidden="true">...</svg>
  <span class="sr-only">Action</span>
</button>


<button class="min-h-12 min-w-12 px-6 py-3 text-base font-medium">
  Primary Action
</button>

表示要素を超えてタッチターゲットを拡張する

<a href="#" class="relative inline-block text-sm">
  Small Link Text
  <span class="absolute -inset-3" aria-hidden="true"></span>
</a>


<button class="relative p-2 -m-2 rounded-lg hover:bg-gray-100">
  <svg class="h-5 w-5" aria-hidden="true">...</svg>
  <span class="sr-only">Close menu</span>
</button>


<article class="relative p-4 rounded-lg border hover:shadow-md">
  <h3>Card Title</h3>
  <p>Description text</p>
  <a href="/details" class="after:absolute after:inset-0">
    <span class="sr-only">View details</span>
  </a>
</article>

インタラクティブ要素間の間隔

WCAG 2.2 では、24px の間隔を設けるか、ターゲットを最小 24px にする必要があります。

<div class="flex gap-3">
  <button class="min-h-11 px-4 py-2">Button 1</button>
  <button class="min-h-11 px-4 py-2">Button 2</button>
</div>


<nav class="flex flex-col">
  <a href="#" class="py-3 px-4 min-h-11 border-b border-gray-100">Link 1</a>
  <a href="#" class="py-3 px-4 min-h-11 border-b border-gray-100">Link 2</a>
  <a href="#" class="py-3 px-4 min-h-11">Link 3</a>
</nav>


<div class="flex flex-wrap gap-3">
  <button class="min-h-11 px-4 py-2 border rounded-lg">Cancel</button>
  <button class="min-h-11 px-4 py-2 bg-blue-600 text-white rounded-lg">Confirm</button>
</div>

タッチターゲットの例外（WCAG 2.2）

次の場合、ターゲットは 24x24 より小さくてもかまいません。

• 文中のインラインテキストリンク
• ブラウザーが提供するコントロール（スクロールバー）
• 情報の提示にそのサイズが不可欠な場合
• 同じページに、より大きな同等のターゲットが存在する場合

テキストのアクセシビリティ

読みやすいテキスト

<p class="leading-relaxed">
  Long form content with comfortable line height
</p>


<article class="max-w-prose">
  <p class="leading-relaxed">
    Content with optimal line length (45-75 characters)
  </p>
</article>


<div class="space-y-6">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

テキストのサイズ変更

<p class="text-base">Scales with user's font size preferences</p>


<p class="text-[14px]">⚠️ Won't scale with browser zoom</p>


<div class="min-h-[auto]">
  Content height adjusts with text size
</div>

Tailwind でのセマンティック HTML

ランドマーク領域

<body class="min-h-screen flex flex-col">
  <header class="sticky top-0 bg-white shadow z-50">
    <nav aria-label="Main navigation">...</nav>
  </header>

  <main id="main-content" class="flex-1">
    <article>
      <h1>Page Title</h1>
      <section aria-labelledby="section-1">
        <h2 id="section-1">Section Title</h2>
        <p>Content...</p>
      </section>
    </article>

    <aside aria-label="Related content" class="hidden lg:block">
      Sidebar content
    </aside>
  </main>

  <footer class="bg-gray-800 text-white">
    <nav aria-label="Footer navigation">...</nav>
  </footer>
</body>

見出しの階層

<article class="prose">
  <h1 class="text-4xl font-bold">Main Title (H1)</h1>

  <section>
    <h2 class="text-2xl font-semibold">Section (H2)</h2>

    <section>
      <h3 class="text-xl font-medium">Subsection (H3)</h3>
      <p>Content...</p>
    </section>
  </section>
</article>

アクセシビリティのテスト

ブラウザの DevTools チェックリスト

1. 色のコントラスト：コントラストチェッカーを使用します
2. フォーカス順序：Tab キーでページ内を移動します
3. ズーム：200% のズームでテストします
4. モーションの低減：OS の設定で有効にします

自動テスト

// axe-core integration
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('component is accessible', async () => {
  const { container } = render(<Component />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

ベストプラクティスのまとめ

パターン	実装	WCAG レベル
フォーカスを見える状態にする	focus-visible:ring-2 focus-visible:ring-offset-2	2.4.7 (AA)
スクリーンリーダー専用	sr-only	1.3.1 (A)
スキップリンク	sr-only focus:not-sr-only focus:absolute	2.4.1 (A)
モーションの低減	motion-reduce:animate-none motion-reduce:transition-none	2.3.3 (AAA)
タッチターゲット（最小）	min-h-6 min-w-6 (24px)	2.5.8 (AA)
タッチターゲット（推奨）	min-h-11 min-w-11 (44px)	2.5.5 (AAA)
タッチ間隔	gap-3 (ターゲット間の最小間隔 12px)	2.5.8 (AA)
テキストのコントラスト	通常のテキストは 4.5:1、大きなテキストは 3:1	1.4.3 (AA)
フォームのエラー	aria-invalid="true" + role="alert"	3.3.1 (A)
フォーカスが隠れないこと	フォーカス中の要素を覆う z-index を避けます	2.4.11 (AA)

タッチ操作に適したボタン

<button
  type="button"
  class="
    min-h-11 min-w-11 px-4 py-2.5
    text-sm md:text-base font-medium
    bg-blue-600 text-white hover:bg-blue-700
    focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
    rounded-lg disabled:opacity-50 disabled:cursor-not-allowed
    transition-colors motion-reduce:transition-none
  "
>
  Button Text
</button>