WebアクセシビリティとWCAG 2.1ガイド：UIデザイナーが知るべき対応の基礎と実践

Webアクセシビリティとは、障がいの有無に関わらずすべての人が平等にWebを利用できる状態を指します。視覚・聴覚・運動・認知機能に制限のあるユーザーへの配慮は、単なる義務ではなく、より良いUIデザインの実践でもあります。本記事では、UIデザイナーが知るべきアクセシビリティの基礎とWCAG 2.1の主要ガイドラインを解説します。

なぜアクセシビリティが重要か

対象者は少数ではない：

世界保健機関（WHO）の報告によると、世界人口の約15%が何らかの障がいを持っています。日本でも高齢化の進展により、視覚・運動機能の低下したユーザーが増加しています。

ビジネス上のメリット：

アクセシビリティ対応はSEO（検索エンジン最適化）にも貢献します。適切なセマンティックHTML・代替テキスト・構造化された見出しはスクリーンリーダーと検索エンジンの両方に理解されやすくなります。

法的要件：

日本では令和6年（2024年）施行の改正障害者情報アクセシビリティ・コミュニケーション施策推進法で、情報アクセシビリティの向上が促進されています。行政サービス・公共性の高いWebサービスでは特に対応が求められます。

WCAG 2.1の4原則

知覚可能（Perceivable）：

すべての情報・UIコンポーネントはユーザーが知覚できる方法で提示されなければなりません。

操作可能（Operable）：

UIコンポーネントとナビゲーションはユーザーが操作できなければなりません。

理解可能（Understandable）：

情報とUIの操作はユーザーが理解できなければなりません。

堅牢（Robust）：

コンテンツは支援技術を含む様々なユーザーエージェントで解釈できるよう、十分堅牢でなければなりません。

カラーコントラスト（WCAG 1.4.3）

AA基準（最低要件）：

• 通常テキスト（18px未満 regular / 14px未満 bold）: コントラスト比 4.5:1以上
• 大テキスト（18px以上 regular / 14px以上 bold）: 3:1以上
• UIコンポーネントの境界・グラフィック要素: 3:1以上

確認ツール：

• WebAIM Contrast Checker（web）
• Figmaプラグイン「Contrast」「A11y - Color Contrast Checker」
• Chrome DevToolsのアクセシビリティツール

フォーカス管理（WCAG 2.4.7・2.4.11）

フォーカスインジケーターを削除しない：

キーボードユーザーにとってフォーカスインジケーター（デフォルトのブラウザアウトライン）は操作位置を知る唯一の手がかりです。outline: none を安易に設定しないこと。ブランドに合わせた独自のフォーカスインジケーターを設計するのが最善です。

フォーカスの論理的な順序：

Tabキーでのフォーカス移動がページの視覚的な順序と一致するよう、DOMの順序を適切に管理します。

代替テキストと画像（WCAG 1.1.1）

意味のある画像：

情報を伝える画像には alt 属性に内容を説明するテキストを設定します。「写真」「画像」のような汎用的な説明は避け、「赤いリンゴのクローズアップ写真」のように具体的に記述します。

装飾的な画像：

純粋に装飾目的の画像（背景パターン・アイコン装飾など）は alt="" を設定してスクリーンリーダーに無視させます。

フォームのアクセシビリティ（WCAG 1.3.1・3.3.1・3.3.2）

ラベルと入力フィールドの紐付け：

すべての入力フィールドには関連するラベルが必要です：

<label for="email">メールアドレス <span aria-hidden="true">*</span></label>
<input type="email" id="email" required aria-describedby="email-hint" />
<span id="email-hint">example@mail.com の形式で入力してください</span>

エラーメッセージ：

エラー発生時は aria-invalid="true" と aria-describedby でエラーメッセージIDを関連付けます。

キーボードナビゲーション（WCAG 2.1.1）

すべてのインタラクティブ要素にキーボードアクセス：

マウスでできる操作はすべてキーボードでも可能でなければなりません。カスタムドロップダウン・モーダル・タブUI等は特に注意が必要です。

キーボード操作のパターン：

• Tab/Shift+Tab: フォーカスの前後移動
• Enter/Space: ボタン・リンクのアクティベート
• 矢印キー: ラジオボタングループ・セレクト・スライダー内での移動
• ESC: ダイアログ・ドロップダウンを閉じる

動画・音声コンテンツ（WCAG 1.2.x）

動画には字幕（キャプション）を提供します。音声コンテンツにはトランスクリプトを提供します。自動再生の音声は原則禁止（ユーザーがコントロールできる場合を除く）です。

まとめ

アクセシビリティ対応は「特定のユーザーのための特別な配慮」ではなく、「すべてのユーザーにとってより良いUI」の実現です。WCAG 2.1のAA基準を最低ラインとして、カラーコントラスト・フォーカス管理・代替テキスト・フォームアクセシビリティを設計の最初から組み込むことで、インクルーシブなUIが完成します。UI ZUKANではアクセシビリティに配慮したUIサンプルを掲載しています。