Accessibility Auditor

あらゆる能力を持つユーザーに対応し、WCAG標準に準拠したアクセシブルなウェブ体験を構築するための包括的なガイダンスです。

このスキルを使う場面

このスキルは以下の場合に使用してください：

• Webサイトのアクセシビリティコンプライアンス監査
• WCAG 2.1 Level AA または AAA標準の実装
• アクセシビリティ違反エラーの修正
• スクリーンリーダー（NVDA、JAWS、VoiceOver）でのテスト
• キーボードナビゲーションが正しく動作することを確認
• ARIA属性とランドマークの実装
• ADA または Section 508 コンプライアンス監査の準備
• インクルーシブなユーザー体験の設計

WCAG 2.1 の原則（POUR）

1. 知覚可能性（Perceivable）

ユーザーは提示される情報を知覚できる必要があります。

2. 操作可能性（Operable）

ユーザーはインターフェースを操作できる必要があります。

3. 理解可能性（Understandable）

ユーザーは情報とインターフェースを理解できる必要があります。

4. 堅牢性（Robust）

コンテンツは現在および将来の技術で機能するのに十分な堅牢性を持つ必要があります。

一般的なアクセシビリティ問題と修正方法

1. 画像の代替テキストが不足している

❌ 問題:

<img src="/products/shoes.jpg">

✅ 解決策:

<!-- 情報を含む画像 -->
<img src="/products/shoes.jpg" alt="白いスウッシュ付きの赤いNike Air Maxランニングシューズ">

<!-- 装飾画像 -->
<img src="/decorative-pattern.svg" alt="" role="presentation">

<!-- リンク機能を持つロゴ -->
<a href="/">
  <img src="/logo.png" alt="Company Name - ホーム">
</a>

ルール：

• 情報を含む画像：コンテンツ/機能を説明
• 装飾画像：空のalt属性を使用（alt=""）
• 機能を持つ画像：アクションを説明
• 複雑な画像：詳細説明を近くに記載

2. 低いカラーコントラスト

❌ 問題:

/* コントラスト比 2.5:1 - WCAG 不合格 */
.text {
  color: #767676;
  background: #ffffff;
}

✅ 解決策:

/* コントラスト比 4.5:1以上 - AA 合格 */
.text {
  color: #595959;
  background: #ffffff;
}

/* コントラスト比 7:1以上 - AAA 合格 */
.text-high-contrast {
  color: #333333;
  background: #ffffff;
}

要件：

• 通常のテキスト（< 18px）：4.5:1以上（AA）、7:1以上（AAA）
• 大きいテキスト（≥ 18px または ≥ 14px太字）：3:1以上（AA）、4.5:1以上（AAA）
• UI コンポーネントとグラフィックス：3:1以上

3. セマンティックHTMLが不適切

❌ 問題:

<div class="button" onclick="submitForm()">送信</div>
<div class="heading">ページタイトル</div>
<div class="nav-menu">...</div>

✅ 解決策:

<button type="submit" onclick="submitForm()">送信</button>
<h1>ページタイトル</h1>
<nav aria-label="メインナビゲーション">...</nav>

セマンティック要素：

• <button> - ボタン
• <a> - リンク
• <h1> - <h6> - 見出し（階層的）
• <nav>、<main>、<aside>、<article>、<section> - ランドマーク
• <ul>、<ol>、<li> - リスト
• <table>、<th>、<td> - 表形式データ

4. フォームラベルの不足

❌ 問題:

<input type="email" placeholder="メールアドレスを入力">

✅ 解決策:

<!-- 明示的なラベル -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

<!-- 暗黙的なラベル -->
<label>
  メールアドレス
  <input type="email" name="email">
</label>

<!-- 隠し文字のラベル（レイアウトが狭い場合） -->
<label for="search" class="sr-only">検索</label>
<input type="text" id="search" placeholder="検索...">

ベストプラクティス：

• すべてのフォームフィールドに関連するラベルが必要
• ラベルは表示される必要がある（placeholderに依存しない）
• aria-labelは視覚的なラベルが不可能な場合のみ使用
• 関連フィールドを <fieldset> と <legend> でグループ化

5. キーボードナビゲーションの問題

❌ 問題:

<div onclick="handleClick()">クリックしてください</div>
<a href="javascript:void(0)" onclick="doSomething()">アクション</a>

✅ 解決策:

<!-- 適切なボタンを使用 -->
<button onclick="handleClick()">クリックしてください</button>

<!-- divが必要な場合、アクセシブルにする -->
<div
  role="button"
  tabindex="0"
  onclick="handleClick()"
  onkeydown="handleKeyPress(event)"
>
  クリックしてください
</div>

<script>
function handleKeyPress(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    handleClick();
  }
}
</script>

キーボード要件：

• すべてのインタラクティブ要素はキーボードでアクセス可能である必要がある
• 目に見えるフォーカスインジケーター（アウトラインまたはカスタムスタイル）
• 論理的なタブ順序（視覚的な流れに一致）
• 繰り返されるコンテンツ用のスキップリンク
• キーボードトラップなし（ユーザーはナビゲートして移動可能）

6. ARIA ランドマークの不足

❌ 問題:

<div class="header">...</div>
<div class="main-content">...</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

✅ 解決策:

<header role="banner">
  <nav aria-label="メインナビゲーション">...</nav>
</header>

<main role="main">
  <h1>ページタイトル</h1>
  <article>...</article>
</main>

<aside role="complementary" aria-label="関連記事">
  ...
</aside>

<footer role="contentinfo">
  ...
</footer>

一般的なランドマーク：

• banner - サイトヘッダー
• navigation - ナビゲーションメニュー
• main - プライマリコンテンツ（ページあたり1つ）
• complementary - サポートコンテンツ
• contentinfo - サイトフッター
• search - 検索機能
• form - フォーム領域

7. アクセシブルでないモーダル/ダイアログ

❌ 問題:

<div class="modal">
  <div class="content">
    モーダルコンテンツ
    <button onclick="closeModal()">閉じる</button>
  </div>
</div>

✅ 解決策:

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-desc"
>
  <h2 id="modal-title">アクションを確認</h2>
  <p id="modal-desc">このアイテムを削除してもよろしいですか？</p>

  <button onclick="confirmAction()">確認</button>
  <button onclick="closeModal()">キャンセル</button>
</div>

<script>
// フォーカス管理
function openModal() {
  const modal = document.querySelector('[role="dialog"]');
  const focusableElements = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );

  // 前のフォーカスを保存
  previousFocus = document.activeElement;

  // 最初の要素にフォーカス
  focusableElements[0].focus();

  // フォーカスをトラップ
  modal.addEventListener('keydown', trapFocus);
}

function closeModal() {
  // フォーカスを復帰
  if (previousFocus) previousFocus.focus();
}

function trapFocus(event) {
  if (event.key !== 'Tab') return;

  const focusableElements = Array.from(
    modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
  );

  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  if (event.shiftKey && document.activeElement === firstElement) {
    lastElement.focus();
    event.preventDefault();
  } else if (!event.shiftKey && document.activeElement === lastElement) {
    firstElement.focus();
    event.preventDefault();
  }
}
</script>

モーダル要件：

• role="dialog" または role="alertdialog"
• aria-modal="true" でモーダル動作を示す
• aria-labelledby でタイトルを参照
• aria-describedby で説明（オプション）
• フォーカス管理（トラップと復帰）
• Escapeキーで閉じる
• 背景スクロールを防ぐ

8. スキップリンクの不足

✅ 解決策:

<a href="#main-content" class="skip-link">
  メインコンテンツにスキップ
</a>

<header>
  <nav>...</nav>
</header>

<main id="main-content" tabindex="-1">
  <!-- ページコンテンツ -->
</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}
</style>

ARIA ベストプラクティス

ARIA 属性リファレンス

状態：

• aria-checked - チェックボックス/ラジオボタンの状態
• aria-disabled - 無効状態
• aria-expanded - 展開/折りたたみ状態
• aria-hidden - 補助技術から隠す
• aria-pressed - トグルボタン状態
• aria-selected - 選択状態

プロパティ：

• aria-label - アクセシブルな名前
• aria-labelledby - ラベルへのIDリファレンス
• aria-describedby - 説明へのIDリファレンス
• aria-live - ライブリージョン更新
• aria-required - 必須フィールド
• aria-invalid - バリデーション状態

ライブリージョン

<!-- Polite: 音声の一時停止を待つ -->
<div aria-live="polite" aria-atomic="true">
  カートに追加されました
</div>

<!-- Assertive: すぐに割り込む -->
<div aria-live="assertive" role="alert">
  エラー：支払いに失敗しました
</div>

<!-- ステータスメッセージ -->
<div role="status" aria-live="polite">
  変更を保存中...
</div>

カスタムコンポーネント

アコーディオン：

<div class="accordion">
  <button
    aria-expanded="false"
    aria-controls="panel-1"
    id="accordion-1"
  >
    セクション 1
  </button>
  <div id="panel-1" role="region" aria-labelledby="accordion-1" hidden>
    パネルコンテンツ
  </div>
</div>

タブ：

<div role="tablist" aria-label="コンテンツセクション">
  <button
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
  >
    タブ 1
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    タブ 2
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  パネル 1 コンテンツ
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  パネル 2 コンテンツ
</div>

テストチェックリスト

自動テスト

• axe DevTools または WAVE ブラウザ拡張機能を実行
• HTML バリデーション（W3C Validator）をチェック
• カラーコントラスト比を確認
• 見出しの階層を検証
• 不足しているalt テキストを確認

手動テスト

• キーボードのみでサイト全体をナビゲート（Tab、Enter、Escape、矢印キー）
• スクリーンリーダーでテスト（NVDA、JAWS、または VoiceOver）
• フォーカスインジケーターが表示されていることを確認
• フォームバリデーションメッセージが読み上げられていることを確認
• モーダルフォーカストラップをテスト
• スキップリンクが動作することを確認
• ブラウザズーム 200% でテスト
• 異なるビューポートサイズでページが回流することを確認
• JavaScript を無効にして、コア機能を検証
• Windows ハイコントラストモードでテスト

スクリーンリーダーテスト

VoiceOver (Mac):

• 有効化：Cmd + F5
• ナビゲート：Control + Option + 矢印キー
• すべてを読む：Control + Option + A

NVDA (Windows):

• ナビゲート：矢印キー（ブラウズモード）または Tab（フォーカスモード）
• すべてを読む：NVDA + 下矢印キー
• 要素リスト：NVDA + F7

テストシナリオ：

• ユーザーはページ構造を理解できるか？
• 見出しは説明的で階層的か？
• フォームラベルは明確で関連しているか？
• エラーメッセージは読み上げられるか？
• ユーザーは視力なしで主要なタスクを完了できるか？

アクセシビリティステートメント

ウェブサイトに以下を含める：

# アクセシビリティステートメント

私たちは、障害を持つ人々のためのデジタルアクセシビリティを確保することにコミットしています。私たちは継続的にすべての人のためのユーザー体験を改善し、関連するアクセシビリティ標準を適用しています。

## 準拠状況
このウェブサイトは WCAG 2.1 Level AA に部分的に準拠しています。「部分的に準拠」とは、コンテンツの一部がアクセシビリティ標準に完全に準拠していないことを意味します。

## フィードバック
このサイトのアクセシビリティについてのご意見をお待ちしています。以下の方法でお問い合わせください：
- メール：accessibility@example.com
- 電話：+1-555-0123

## 既知の問題
- [既知のアクセシビリティ問題と計画されている修正を列挙]

最終更新：[日付]

リソース

ツール：

• axe DevTools（ブラウザ拡張機能）
• WAVE（ウェブアクセシビリティ評価ツール）
• Lighthouse（Chrome DevTools）
• Colour Contrast Analyser
• スクリーンリーダー：NVDA、JAWS、VoiceOver

ガイドライン：

• WCAG 2.1：https://www.w3.org/WAI/WCAG21/quickref/
• ARIA オーサリングプラクティス：https://www.w3.org/WAI/ARIA/apg/

アクセシビリティはオプションではなく、インクルーシブなウェブ体験を構築するための基本的な要件です。すべてのプロジェクトの開始時から優先し、事後的ではなく対応してください。