SERIES 01 / WEB FOR EVERYONE
ウェブアクセシビリティ
誰もが利用できるウェブを作るための基準。各項目を深く理解し、AIで評価する方法を学びます。
学習の順序
はじめに
まず視点と評価方法を学びます。
- 01ウェブアクセシビリティを始める:WCAGとAIで評価を設計する方法
ユーザーの利用過程でアクセシビリティの問題を理解し、WCAG 2.2とマルチモーダルAIを活用して、評価範囲と証拠収集計画を設計します。
知覚可能なウェブ
情報を見て、聞いて、別の形でも理解する。
- 02代替テキスト:画像が担う役割を伝える
画像の存在よりも、その目的と文脈を説明する代替を設計します。
- 03録音された音声と無音の映像:別の経路で同じ情報を得る
音声のみと映像のみのコンテンツに必要な代替を区別します。
- 04収録済みのキャプション:せりふと重要な音をともに伝える
キャプションの有無、正確さ、話者の区別、同期を評価します。
- 05音声解説とメディアの代替:映像でしか分からない情報を説明する
収録済み映像の視覚情報を、解説または十分な代替で伝えます。
- 06ライブキャプション:生放送の情報を見逃さないために
ライブの同期したメディアでキャプションを確認する方法を扱います。
- 07収録済みの音声解説:画面の要点を音声で伝える
AAで要求される、視覚情報の音声解説を検討します。
- 08手話通訳:収録済み音声を伝える、もう一つの言語経路
手話通訳の提供の有無と、評価に必要な言語の専門性を区別します。
- 09拡張音声解説:場面を止めて説明する時間を確保する
音声の合間が不足する映像に、拡張音声解説が必要かを検討します。
- 10完全なメディアの代替:映像全体を文書でたどる
収録済みの同期したメディアと映像のみのコンテンツについて、全体を網羅する代替を検討します。
- 11ライブ音声の代替:聞こえなくても案内を受けられるように
ライブの音声のみの情報に、同等の代替を用意します。
- 12情報と関係性:画面の構造をコードでも伝える
見出し、リスト、表、フォームの関係性を支援技術に伝えます。
- 13意味のある順序:表示順と読み上げ順を合わせる
情報の意味を維持する読み順を評価します。
- 14感覚的な指示:右側・赤色だけで案内しない
形、色、位置、音に依存する指示を改善します。
- 15画面の向き:横向きでも縦向きでも使えるように
必須の理由がない画面の向きの制限を確認します。
- 16入力目的:自動入力が認識できるフィールドを作る
ユーザーの個人情報を入力する目的を、コードで識別できるようにします。
- 17要素の目的:ユーザーに合わせてUIを変更できるように
操作要素、アイコン、領域の目的を識別するAAA基準です。
- 18色:情報を伝える唯一の手がかりにしない
状態や区別を、色以外の方法でも伝えます。
- 19自動再生される音声:停止・調整できるように
3秒を超えて自動再生される音声を制御する経路を確認します。
- 20テキストのコントラスト:読める明度差を確保する
通常のテキストと大きなテキストのコントラストを、条件に応じて計算します。
- 21テキストの拡大:200%でも機能を維持する
文字を拡大したときに、内容や操作が失われないかを確認します。
- 22文字画像:実際の文字で提供する
画像内の文字ではなく、調整可能なテキストを提供します。
- 23より高いテキストのコントラスト:読みやすさを高める目標
AAAのコントラスト目標を、通常のテキストと大きなテキストに適用します。
- 24背景音:話し声を明瞭に伝える
収録済みの音声のみのコンテンツで、背景音を検討します。
- 25テキストの表示:読み方をユーザーが選べるように
行の長さ、行間、配置、色の調整をあわせて扱います。
- 26文字画像のより厳格な基準
AAAで文字画像が許容される範囲を検討します。
- 27リフロー:狭い画面でも読み、操作する
拡大時や小さなビューポートで、縦横両方向のスクロールを減らします。
- 28非テキストのコントラスト:操作要素や図形を見分ける
コントロールと、情報を伝えるグラフィックの明度差を評価します。
- 29テキストの間隔:読みやすさの設定を変えても内容を維持する
文字・単語・行・段落の間隔を変更しても崩れない画面を作ります。
- 30ホバーやフォーカスで表示されるコンテンツ:閉じる・移動する・読む
ツールチップやポップオーバーの、非表示・ポインター移動・表示継続の条件を確認します。
操作可能なウェブ
キーボード、ポインター、時間、移動の障壁を減らす。
- 31キーボード:ポインターなしで主要な機能を実行する
機能をキーボードで実行できるか、実際の流れに沿って確認します。
- 32キーボードトラップ:入った場所から抜け出す
ウィジェットやダイアログからフォーカスを移動する経路を確認します。
- 33例外のないキーボード対応:AAAの目標へ広げる
すべての機能のキーボード操作を、より厳格な範囲で評価します。
- 34文字キーのショートカット:意図しない実行を防ぐ
単一の文字キーによるショートカットの無効化・変更・有効範囲を確認します。
- 35時間の調整:読む時間と入力する時間を確保する
制限時間の解除・調整・延長と例外を評価します。
- 36動きと自動更新:止めて読む
自動的な動きや更新を止める手段を確認します。
- 37時間に依存しないタスク:急がなくても完了できるように
AAAで、制限時間なしに機能を完了できるかを確認します。
- 38割り込み:通知を後回しにして集中する
緊急時以外の割り込みを調整できるようにします。
- 39再認証:入力した内容を失わないために
セッションの期限切れ後の再認証で、データと進行状況を保持します。
- 40タイムアウトの案内:入力前に制限を伝える
操作しないことでデータが失われる可能性がある時間を案内します。
- 41閃光:危険な視覚刺激を定量的に確認する
閃光の回数の評価と、一般閃光・赤色閃光の閾値の評価を区別します。
- 423回の閃光:AAAのより厳格な基準
1秒あたりの閃光回数に関するAAA基準を検討します。
- 43インタラクションによるアニメーション:動きを減らす選択肢
操作によって生じる動きを無効にできるかを確認します。
- 44繰り返しブロックのスキップ:本文へすばやく移動する
繰り返されるナビゲーションをスキップする経路を確認します。
- 45ページタイトル:今開いている内容を識別する
文書のタイトルが主題と目的を説明しているかを検討します。
- 46フォーカス順序:操作の意味がつながるように
キーボードでの移動順が、情報と機能の関係を維持しているかを評価します。
- 47文脈におけるリンクの目的:移動先が分かるように
リンクと、プログラムによって関連付けられた文脈をあわせて、リンクの目的を評価します。
- 48複数の探索方法:必要なページにたどり着く
サイト内のページを探すための複数の経路を確認します。
- 49見出しとラベル:内容と目的を正確に案内する
存在する見出しやラベルが、意味のある表現になっているかを評価します。
- 50フォーカス表示:今操作している位置を示す
キーボードフォーカスの視覚的な表示を、実際の状態で確認します。
- 51現在位置:サイト内の文脈を伝える
現在のページがどこに属するかを示す情報を検討します。
- 52リンクだけで目的を伝える:AAA基準
文脈なしでもリンクの目的を識別できる経路を検討します。
- 53セクション見出し:長い内容を分けて探索する
文書を主題別の見出しで構成するAAA基準です。
- 54フォーカスの隠れ:少なくとも一部は見えるように
AAで、固定要素がフォーカス対象を完全に隠していないかを評価します。
- 55フォーカスの隠れの強化基準:対象全体を見えるように
AAAで、フォーカス対象の部分的な隠れまで評価します。
- 56フォーカスの外観:十分な面積とコントラストで示す
AAAのフォーカス表示について、面積と状態間のコントラストを測定します。
- 57ポインターのジェスチャ:複雑な動作の代替を提供する
マルチポインターや軌跡に基づくジェスチャについて、単純な操作による代替を確認します。
- 58ポインターのキャンセル:誤って押した操作を取り消す
押す時点と離す時点、キャンセル・取り消しの手段を検討します。
- 59見える名前とアクセシブルな名前を合わせる
音声操作で、画面のラベルを使って対象を見つけられるようにします。
- 60動きの検知:端末を振らなくても実行できるように
端末の動きに基づく機能について、UIによる代替と無効化の手段を確認します。
- 61操作対象のサイズ:AAAの余裕あるタッチ領域
44×44 CSS pxという強化された目標と例外を検討します。
- 62入力方式の併用:タッチとキーボードをともに使う
一つの入力方式によって、ほかの方式が制限されていないかを確認します。
- 63ドラッグ:引きずらなくても同じ結果を得る
ドラッグ機能の、シングルポインターによる代替を評価します。
- 64操作対象のサイズ:AAのサイズと間隔の条件
24×24 CSS pxと、間隔などの例外を、条件に沿って評価します。
理解可能なウェブ
予測可能な動作、入力、認証の流れ。
- 65ページの言語:正しい発音の出発点
文書の基本言語をプログラムが識別できるようにします。
- 66部分の言語:言語が変わる箇所を示す
本文内の異なる言語の箇所を、意味と例外に応じて示します。
- 67なじみのない言葉:意味を調べる経路を提供する
専門用語や特別な用法を説明する方法を検討します。
- 68略語:省略せずに書いた意味にアクセスする
略語の正式な表記や意味を確認できるようにします。
- 69読解レベル:複雑な説明の代替を作る
難しいテキストに、理解しやすい補足の経路を提供します。
- 70発音:意味を変える読み方を案内する
発音によって意味が変わる表現について、確認する経路を提供します。
- 71フォーカスだけで画面を変えない
要素にフォーカスが移っただけで、コンテキストが変わらないかを確認します。
- 72入力の変更:何が起きるかを先に伝える
設定の変更によって起きるコンテキストの変化について、事前の案内を検討します。
- 73一貫したナビゲーション:同じ経路を同じ順序で
繰り返される探索構造の相対的な順序を維持します。
- 74一貫した識別:同じ機能を同じ名前で
同一の機能の名前や表現を、一貫して提供します。
- 75要求に応じた変化:予測可能なコンテキストの変化
AAAで、コンテキストの変化をユーザーが要求するか、無効にできるようにします。
- 76一貫したヘルプ:必要な助けを同じ位置で
繰り返される支援手段の相対的な位置を維持します。
- 77エラーの特定:どこで何が間違っているかを説明する
自動的に検出した入力エラーを、テキストで伝えます。
- 78ラベルと説明:入力前に分かるように
求める情報と形式を、入力前に案内します。
- 79エラー修正の提案:次の行動を案内する
分かっている修正方法を、エラーメッセージに結び付けます。
- 80重要な送信:法的・金銭的・データの変更を確認する
重要な操作の取り消し・チェック・確認の経路を検討します。
- 81文脈に合ったヘルプ:行き詰まった場所で助けを得る
入力や作業の文脈に合った支援を提供します。
- 82すべての送信でエラーを防ぐ:AAAへ広げる
情報の送信全般について、取り消し・チェック・確認の手段を検討します。
- 83重複入力:一連の過程で同じ情報を再び求めない
すでに入力した情報を、再利用するか選択できるように提供します。
- 84アクセシブルな認証:記憶やパズルへの依存を減らす
AAの認証で、認知機能テストの代替と支援手段を検討します。
- 85認証の強化基準:より広い認知アクセシビリティ
AAAの認証で許容される代替と支援の範囲を検討します。
堅牢なウェブ
支援技術と名前・役割・状態を共有する。
- 86名前・役割・値:支援技術とUIの状態を共有する
カスタムコントロールの意味と状態の変化を、プログラムに伝えます。
- 87ステータスメッセージ:フォーカスを移さずに結果を伝える
操作の結果と進行状況を支援技術に伝えます。
サービスへの接続
基準別評価をエージェントと運用に統合します。
- 88アクセシビリティ評価をエージェントとサービスにつなぐ
項目別のプロンプトを調整し、根拠・改善・再確認をつなぐシステムと、資料配布・サービス化の構造を設計します。