accessibility

アクセシビリティ

アクセシビリティが答えるのは、次の問いです。

支援技術、別の入力方法、または異なる能力を持つ人でも、これを使えますか？

特に、障害のある人が、スクリーンリーダー、キーボードのみ、スイッチ、音声コントロール、拡大表示、字幕などを使っていても、製品を平等な条件で知覚し、理解し、操作し、利用できることを指します。これは、すべての人に向けた設計における「能力」の側面です。「状況」の側面――言語、文化、デバイス、手頃な価格かどうか、自信――は、関連するインクルーシブデザインスキルで扱います。両者には重なる部分がありますが、焦点は異なります。どちらも薄めてしまわないよう、区別して扱ってください。

使用する場面

このスキルは、タスクに次のいずれかが含まれる場合に使用してください。WCAG 準拠、ARIA、セマンティックマークアップ、スクリーンリーダーへの対応、キーボード／フォーカス管理、色のコントラスト、テキストによる代替情報（代替テキスト、字幕、文字起こし）、利用しやすいフォームやエラーメッセージ、ターゲットサイズ、タイミング／タイムアウト、動きへの過敏さ、認知アクセシビリティ。また、「アクセシブルにしてほしい」という依頼、a11y 監査の実施、障害のあるユーザーがタスクを完了できるかの確認を頼まれた場合にも使用してください。

使用しない場面： 本当の懸念が、状況によって誰が取り残されるかということ――英語以外の言語を話す人、安価なスマートフォンや低速なネットワークを使う人、データ通信料を払えない人、初めて利用する人や不安を感じている人、世界各地の氏名／住所の形式――であれば、それはアクセシビリティではなくインクルージョンの問題です。インクルーシブデザインスキルに切り替えてください。

考え方のモデル：POUR

WCAG では、アクセシビリティ全体を4つの原則に分類しています。監査の視点として活用し、見つけた問題を必ずいずれかの原則に対応づけてください。

• 知覚可能（Perceivable） — ユーザーが何らかの経路でコンテンツを感知できます。単一の感覚だけに頼らないでください。（画像のテキストによる代替情報、音声や動画の字幕／文字起こし、十分な色のコントラスト、意味を伝えるのに色だけを使わないこと、拡大表示してもレイアウトが崩れず、再配置されるコンテンツ。）
• 操作可能（Operable） — ユーザーが利用できるあらゆる入力方法でインターフェースを操作できます。（すべての機能にキーボードでアクセスして使用できること、フォーカスが見えること、キーボードトラップがないこと、十分なターゲットサイズ、余裕のある、または調整可能な時間制限、発作を誘発するような点滅がないこと。）
• 理解可能（Understandable） — ユーザーが動作を予測し、理解できます。（明確なラベル、説明、エラーメッセージ、一貫したナビゲーション、予測可能なインタラクション、読みやすい言葉遣い。）
• 堅牢（Robust） — 支援技術が実際に内容を解析できます。（有効なセマンティック構造、すべてのコントロールに適切な名前／役割／値があること、ネイティブのセマンティクスを優先し、ARIA は不足を補う場合にのみ使用すること。）

どの要素にも、次のテストが役立ちます。見えない、聞こえない、マウスを使えない、または素早く読めない場合でも、このタスクを完了できますか？ いずれかの条件で答えが「いいえ」なら、問題のある原則が見つかったということです。

設計の対象となる人と利用環境

抽象的な「障害のあるユーザー」ではなく、人々が実際に使っている支援技術や入力方法を想定して設計してください。

• スクリーンリーダー（VoiceOver、TalkBack、NVDA、JAWS） — 正しいセマンティクス、読み上げ順序、ラベル、動的な変更の通知が必要です。
• キーボードのみのユーザーとスイッチユーザー — 論理的なフォーカス順序、見えるフォーカス、マウス専用のインタラクションがないことが必要です。
• 音声コントロール — 画面上に表示され、声に出して指定できるラベルがアクセシブルネームと一致している必要があります。
• 画面拡大とズーム — 200％以上でも横スクロールやクリッピングが発生せず、レイアウトが再配置される必要があります。
• 字幕／文字起こしを利用する人 — 聴覚障害のある人だけでなく、騒がしい環境や静かな環境にいる人も含まれます。
• 認知障害や学習障害のある人 — 明確な言葉遣い、記憶への負担の少なさ、やり直しやすいフローが必要です（後述）。

ここで繰り返し現れるパターンに注目してください。これらの工夫のほとんどは、対象となるグループよりはるかに多くの人に役立ちます。これはインクルーシブデザインを推進する考え方と同じです。

迅速な監査チェックリスト

以下を順番に確認します。各項目は、具体的に確認または修正する内容です。

1. キーボード — フロー全体を Tab キーで移動します。すべてのコントロールにアクセスして操作できますか？フォーカスは見えますか？順序は論理的ですか？抜け出せなくなることはありませんか？
2. スクリーンリーダー — すべてのコントロールで、意味のある名前と役割が読み上げられますか？画像にはテキストによる代替情報が設定されていますか（または装飾としてマークされていますか）？動的な更新（エラー、読み込み、トースト）は読み上げられますか？
3. コントラストと色 — テキストはコントラストの最低基準（本文は 4.5:1、大きな文字は 3:1）を満たしていますか？色だけで伝えている意味（例：アイコンやテキストなしで赤色がエラーを表す）はありませんか？
4. 構造 — 見出し、リスト、ランドマーク／領域、ラベルは、見た目だけでなく意味に基づいていますか？読み上げ順序は視覚的な順序と一致していますか？
5. フォームとエラー — すべてのフィールドにラベルがありますか（プレースホルダーだけになっていませんか）？エラーはテキストで示され、該当するフィールドに関連付けられ、修正方法が説明されていますか？
6. ターゲットと時間 — タップターゲットは十分な大きさと間隔を確保していますか？時間制限はないか、十分な余裕があるか、調整可能ですか？データ損失を防ぐため、自動保存を使用していますか？
7. メディアと動き — 音声／動画に字幕や文字起こしがありますか？UI は動きを減らす設定を尊重していますか？1 秒あたり約 3 回を超えて点滅するものはありませんか？
8. ズーム／リフロー — 200％のズーム（またはシステムフォントを大きくした状態）で、コンテンツは欠けたり横スクロールが発生したりせずにリフローしますか？

適合性を超えて：認知アクセシビリティ

WCAG だけでは、認知障害や学習障害（ディスレクシア、ADHD、自閉症、認知症、失語症、記憶や注意力の違い）がある人に必要なすべてを網羅できません。W3C の COGA ガイダンスは、WCAG 適合に必須ではなく、補足的なものです。そして、多くの人に大きな効果をもたらす改善策が最も多く含まれている分野でもあります。たとえば、わかりやすい言葉、一貫したデザイン、一度に一つずつの手順、記憶に頼らない設計、寛容なエラー回復、気が散る要素の最小化などです。

読みやすさ、複雑なフロー、フォーム、ログイン、または「わかりにくい／圧倒される」といった課題に取り組む場合は、COGA の 8 つの目標と具体的なデザインパターンについて、references/cognitive-accessibility.md をお読みください。

動き、感覚、加齢に伴うニーズ

アニメーションや動きは、前庭障害のある人に吐き気、めまい、集中力の低下といった深刻な害を及ぼすことがあり、光過敏症のある人には発作を引き起こす可能性があります。ユーザーの prefers-reduced-motion 設定を尊重し、動きをすべてなくすのではなく、動きを抑えるか別の方法に置き換えてください。

高齢のユーザーは大きなグループであり、加齢による視覚、手先の器用さ、聴覚、記憶の変化は、障害に伴うニーズと直接重なります。ここで適切に設計することは、誰もが年齢を重ねながら製品を使い続ける助けになります。（インクルーシブデザインのスキルでは、年齢を状況／アイデンティティの側面、たとえば初めて使うときの自信やライフステージとして扱い、ここでは加齢に伴う能力の変化として扱います。）

prefers-reduced-motion のパターン（コード付き）、光過敏症への配慮事項、高齢ユーザーにおける能力の重なりについては、references/motion-and-sensory.md をお読みください。

確認方法

自動チェッカー（axe、Lighthouse、Accessibility Scanner など）が検出できる問題は、全体の 3 分の 1 程度にすぎません。必要ではありますが、それだけでは不十分です。必ず手動で確認し、まず実際のフローをキーボードのみで操作し、次にスクリーンリーダーで操作し、最後に OS の動きを減らす設定と大きな文字の設定を有効にして確認してください。ツールでは検出できないバグ、つまり意味の通らないフォーカス順序や、誤解を招くラベルこそ、誰かの利用を実際に妨げることがよくあります。

参考資料

詳しい内容が必要な場合にのみ、以下を読み込んでください。

• references/cognitive-accessibility.md — W3C COGA：8つの目標とそのデザインパターン（WCAG の範囲を超える内容）。
• references/motion-and-sensory.md — モーションの低減（CSS の例付き）、光過敏症、高齢ユーザーとの能力の重なり。

主な情報源：

• アクセシビリティ、ユーザビリティ、インクルージョン — W3C WAI
• 認知障害および学習障害のある人にとって使いやすいコンテンツの作成（COGA） — W3C
• 高齢ユーザーとウェブアクセシビリティ — W3C WAI
• prefers-reduced-motion — MDN