アクセシビリティ
アクセシビリティとは、障がいのある人々が成果を知覚し、操作し、理解できることを意味します。これには永続的・一時的・状況的な障がいが含まれます。ほとんどの問題は、誰も決定しなかったデザイン上の判断、つまりフォーカススタイル、エラー状態、代替テキスト、見出しレベルの欠如から始まります。このスキルは、そうした判断をチェックリストに変えます。
コントラスト計算、APCA、色覚異常については color → contrast-and-dark-mode.md にあります。プラットフォームのタッチターゲットサイズは media-specs → digital-platforms.md にあります。高齢者、識字率、ディスレクシア、文化については cognitive-psychology → audience-and-culture.md にあります。タイプの最小値は typography → legibility-by-medium.md にあります。
絶対的なルール
- WCAG 2.2 AAを目標とする。ただし、契約や法律で別のバージョンが指定されている場合は除く。これにより2.1 AAおよび2.0 AAも満たします。ただし、2.2で削除された4.1.1 Parsingは除きます。すべてのWCAG要件は [E2] です。
- すべての状態をデザインする。 デフォルト、ホバー、フォーカス、アクティブ、選択済み、無効、エラー、ローディング、空の状態を、両方のカラーモードでデザインします。描かれていない状態はアクセシビリティバグです。
- どこでもフォーカスを可視化する。 社内標準：2pxの実線アウトライン、2pxのオフセット、隣接色とのコントラスト比3:1（AAA 2.4.13を満たす）。代替なしに
outline: noneを使用してはいけません。固定ヘッダーはフォーカスされたアイテムを隠してはいけません（2.4.11）。 - ターゲットサイズは24×24 CSS px以上（2.5.8 AA）、またはそのように間隔を空けます。プラットフォームの最小値はより大きい（iOS 44pt、Android 48dp）ため、タッチUIではそれらを使用します。
- ストロボは禁止、動きの抑制を尊重する。 1秒あたり最大3回のフラッシュ。5秒を超える動きには一時停止コントロール。社内ルールとして
prefers-reduced-motionを尊重します（2.3.3）。 - すべてをキーボードで操作可能に。ドラッグ、ホバー、記憶のみに依存しない。 ドラッグの代わりにシングルタップの代替手段を提供（2.5.7）。ログインにパズルや書き写しを要求しない（3.3.8）。データの再入力を求めない（3.3.7）。
- フォーム： 表示ラベル（プレースホルダーはラベルではない）、フィールドの前に説明、修正方法を示すエラーテキスト、ユーザーがフィールドを離れるまで待つバリデーション。個人データには
autocompleteトークンを使用（1.3.5）。 - 目的に応じたテキスト代替。 W3C代替テキスト判断ツリーに従う：装飾画像は
alt=""、機能画像はアクションを説明、複雑な画像は長い説明文を付ける。文字の画像は禁止。 - 普遍的な障壁を先に修正し、後から調整する。 平易な言語、予測可能なレイアウト、寛容なフォーム、ユーザーコントロールは、認知障がい者、高齢者、低識字率者、第二言語話者、ストレス下のユーザーに一度に役立ちます [E2]。
- 自動ツールは最終判断ではない。 2017年の英国政府監査では、単一のツールで障壁タイプの17～41%しか検出できなかった。手動テストと障がい者によるテストを実施する。
- 法律に関する注記は参考情報であり、法的助言ではない。 引用前に日付を確認。2026年にいくつか変更あり。
設計者向け仕様チェックリスト（ハンドオフ用）
- 見出しレベル、ランドマーク、読み取り/フォーカスの順序を注釈付け（注釈キット：
motion-media-and-forms.md§7）。 - すべてのインタラクティブ要素：名前、役割、全状態、フォーカススタイル、ターゲットサイズ。
- すべての画像：代替テキストまたは装飾マーク。チャートにはテキストまたはテーブル相当物。
- すべてのフォーム：ラベル、ヘルプテキスト、エラーメッセージの記述、必須フィールドのマーク、
autocompleteの指定。 - テキスト、UI境界、フォーカス、アイコンのコントラストを両モードで確認（
color）。 - 動き：動きを抑制したバリアントを指定。フラッシュなし。長時間の動きには一時停止コントロール。
- 動画：キャプション、および音声解説または文字起こし。
- レイアウトは320 CSS pxでリフロー。テキストは200%ズームと1.4.12のスペーシングオーバーライドに耐える（
layout-composition）。 - ヘルプと連絡先は一貫した場所に配置（3.2.6）。記憶テストなしでログイン可能（3.3.8）。
- すべてのコピーに対して平易な言語チェックを実施（
inclusive-and-cognitive.md§5）。
法務スナップショット（2026年10月確認、引用前に再確認）
| 地域 | 規則 | 標準 | 日付 |
|---|---|---|---|
| EU | European Accessibility Act | EN 301 549: V3.2.1 が現在引用。V4.1.1（WCAG 2.2 AA）は2026年9月に公開、Official Journal への引用は未定 | 2025年6月28日から適用 |
| 米国 州/地方政府 | ADA Title II 規則（2024） | WCAG 2.1 AA | 2026年4月に延長：2027年4月26日（人口5万人以上）、2028年4月26日（小規模、特別区） |
| 米国 企業 | ADA Title III | 判例法、通常WCAG 2.x AA | 訴訟主導 |
| 米国 連邦 | Section 508 | WCAG 2.0 AA（Web、ドキュメント、ソフトウェア） | 2018年以降 |
| 英国 公共部門 | PSBAR 2018 | WCAG 2.2 AA + アクセシビリティステートメント | 施行中 |
| カナダ 連邦 | Accessible Canada Act | CAN/ASC-EN 301 549:2024 | 目標2040年 |
| ブラジル | LBI 第63条 | ABNT NBR 17225 (2025); eMAG 3.1（連邦） | 施行中 |
| 日本 | 障害者差別解消法 | JIS X 8341-3:2016 | 民間事業者の合理的配慮義務は2024年4月から |
WCAG 2.2 は ISO/IEC 40500:2025 でもある。WCAG 3 はまだワーキングドラフトであり、発効までには数年を要する。
メディア別
| メディア | 焦点 |
|---|---|
| ネイティブアプリ | 1.3.4 画面の向き、1.4.4 Dynamic Type/フォントスケーリング、2.5.x ポインターとターゲット、3.3.x 入力、4.1.2 名前/役割/値 |
| Web | すべて。特に1.4.10 リフロー、1.4.12 スペーシング、2.4.11 フォーカス非隠蔽が最もよく問題になる。 |
| PDF、スライド | タグ、見出し、読み取り順序、コントラスト、ページタイトル、言語 |
| ソーシャル投稿 | 代替テキストフィールド、動画のキャプション、色のみで意味を伝えない、キャプション内でテキストを繰り返す、ストロビング禁止 |
| 印刷、OOH | WCAGは直接適用されないが、そのコントラストと色のロジックは良い慣行。距離のルールは media-specs にあり。 |
参照ファイル – 開くタイミング
| ファイル | 開くタイミング |
|---|---|
references/wcag-22-in-practice.md | 達成基準の確認、仕様書の作成、2.2の追加詳細、採用推奨のAAA基準、メディア別の適用可能性。 |
references/inclusive-and-cognitive.md | インクルーシブデザイン手法、ペルソナスペクトラム、引用する普及率、状況的障がい、認知アクセシビリティ（COGA）、平易な言語、神経多様性ユーザー、ローカリゼーション/RTLの基本、インクルージョンレビューチェックリスト。 |
references/motion-media-and-forms.md | 動きと点滅、動き抑制のコード、キャプション/音声解説/文字起こし、代替テキストと複雑な画像、フォーカスとキーボード仕様、スキップリンク、フォームとエラー、autocomplete、タッチ/ポインター、スクリーンリーダー用注釈とキット。 |
references/legal-and-testing.md | 法域別の法的質問、設計すべき標準、ツールカバレッジ、WebAIM Million 2026、手動テストチェックリスト、障がい者によるテスト、Figmaハンドオフチェックリスト、アクセシビリティステートメント、VPAT/ACR。 |