SERIES 01 / WEB FOR EVERYONE

ウェブアクセシビリティ

誰もが利用できるウェブを作るための基準。各項目を深く理解し、AIで評価する方法を学びます。

学習の順序

START

はじめに

まず視点と評価方法を学びます。

  1. 01
    ウェブアクセシビリティを始める:WCAGとAIで評価を設計する方法

    利用者が情報を得て目的の操作を終えるまでの流れから、ウェブアクセシビリティを理解します。WCAG 2.2の構造とAIを活用した評価方法を学び、対象ページ・利用の流れ・証拠資料を決めて、最初の評価プロンプトを実行する準備を整えます。

    公開済み
PRINCIPLE 01

知覚可能なウェブ

情報を見て、聞いて、別の形でも理解する。

  1. 02
    代替テキスト:画像が担う役割を伝える

    画像の存在よりも、その目的と文脈を説明する代替を設計します。

    1.1.1A準備中
  2. 03
    録音された音声と無音の映像:別の経路で同じ情報を得る

    音声のみと映像のみのコンテンツに必要な代替を区別します。

    1.2.1A準備中
  3. 04
    収録済みのキャプション:せりふと重要な音をともに伝える

    キャプションの有無、正確さ、話者の区別、同期を評価します。

    1.2.2A準備中
  4. 05
    音声解説とメディアの代替:映像でしか分からない情報を説明する

    収録済み映像の視覚情報を、解説または十分な代替で伝えます。

    1.2.3A準備中
  5. 06
    ライブキャプション:生放送の情報を見逃さないために

    ライブの同期したメディアでキャプションを確認する方法を扱います。

    1.2.4AA準備中
  6. 07
    収録済みの音声解説:画面の要点を音声で伝える

    AAで要求される、視覚情報の音声解説を検討します。

    1.2.5AA準備中
  7. 08
    手話通訳:収録済み音声を伝える、もう一つの言語経路

    手話通訳の提供の有無と、評価に必要な言語の専門性を区別します。

    1.2.6AAA準備中
  8. 09
    拡張音声解説:場面を止めて説明する時間を確保する

    音声の合間が不足する映像に、拡張音声解説が必要かを検討します。

    1.2.7AAA準備中
  9. 10
    完全なメディアの代替:映像全体を文書でたどる

    収録済みの同期したメディアと映像のみのコンテンツについて、全体を網羅する代替を検討します。

    1.2.8AAA準備中
  10. 11
    ライブ音声の代替:聞こえなくても案内を受けられるように

    ライブの音声のみの情報に、同等の代替を用意します。

    1.2.9AAA準備中
  11. 12
    情報と関係性:画面の構造をコードでも伝える

    見出し、リスト、表、フォームの関係性を支援技術に伝えます。

    1.3.1A準備中
  12. 13
    意味のある順序:表示順と読み上げ順を合わせる

    情報の意味を維持する読み順を評価します。

    1.3.2A準備中
  13. 14
    感覚的な指示:右側・赤色だけで案内しない

    形、色、位置、音に依存する指示を改善します。

    1.3.3A準備中
  14. 15
    画面の向き:横向きでも縦向きでも使えるように

    必須の理由がない画面の向きの制限を確認します。

    1.3.4AA準備中
  15. 16
    入力目的:自動入力が認識できるフィールドを作る

    ユーザーの個人情報を入力する目的を、コードで識別できるようにします。

    1.3.5AA準備中
  16. 17
    要素の目的:ユーザーに合わせてUIを変更できるように

    操作要素、アイコン、領域の目的を識別するAAA基準です。

    1.3.6AAA準備中
  17. 18
    色:情報を伝える唯一の手がかりにしない

    状態や区別を、色以外の方法でも伝えます。

    1.4.1A準備中
  18. 19
    自動再生される音声:停止・調整できるように

    3秒を超えて自動再生される音声を制御する経路を確認します。

    1.4.2A準備中
  19. 20
    テキストのコントラスト:読める明度差を確保する

    通常のテキストと大きなテキストのコントラストを、条件に応じて計算します。

    1.4.3AA準備中
  20. 21
    テキストの拡大:200%でも機能を維持する

    文字を拡大したときに、内容や操作が失われないかを確認します。

    1.4.4AA準備中
  21. 22
    文字画像:実際の文字で提供する

    画像内の文字ではなく、調整可能なテキストを提供します。

    1.4.5AA準備中
  22. 23
    より高いテキストのコントラスト:読みやすさを高める目標

    AAAのコントラスト目標を、通常のテキストと大きなテキストに適用します。

    1.4.6AAA準備中
  23. 24
    背景音:話し声を明瞭に伝える

    収録済みの音声のみのコンテンツで、背景音を検討します。

    1.4.7AAA準備中
  24. 25
    テキストの表示:読み方をユーザーが選べるように

    行の長さ、行間、配置、色の調整をあわせて扱います。

    1.4.8AAA準備中
  25. 26
    文字画像のより厳格な基準

    AAAで文字画像が許容される範囲を検討します。

    1.4.9AAA準備中
  26. 27
    リフロー:狭い画面でも読み、操作する

    拡大時や小さなビューポートで、縦横両方向のスクロールを減らします。

    1.4.10AA準備中
  27. 28
    非テキストのコントラスト:操作要素や図形を見分ける

    コントロールと、情報を伝えるグラフィックの明度差を評価します。

    1.4.11AA準備中
  28. 29
    テキストの間隔:読みやすさの設定を変えても内容を維持する

    文字・単語・行・段落の間隔を変更しても崩れない画面を作ります。

    1.4.12AA準備中
  29. 30
    ホバーやフォーカスで表示されるコンテンツ:閉じる・移動する・読む

    ツールチップやポップオーバーの、非表示・ポインター移動・表示継続の条件を確認します。

    1.4.13AA準備中
PRINCIPLE 02

操作可能なウェブ

キーボード、ポインター、時間、移動の障壁を減らす。

  1. 31
    キーボード:ポインターなしで主要な機能を実行する

    機能をキーボードで実行できるか、実際の流れに沿って確認します。

    2.1.1A準備中
  2. 32
    キーボードトラップ:入った場所から抜け出す

    ウィジェットやダイアログからフォーカスを移動する経路を確認します。

    2.1.2A準備中
  3. 33
    例外のないキーボード対応:AAAの目標へ広げる

    すべての機能のキーボード操作を、より厳格な範囲で評価します。

    2.1.3AAA準備中
  4. 34
    文字キーのショートカット:意図しない実行を防ぐ

    単一の文字キーによるショートカットの無効化・変更・有効範囲を確認します。

    2.1.4A準備中
  5. 35
    時間の調整:読む時間と入力する時間を確保する

    制限時間の解除・調整・延長と例外を評価します。

    2.2.1A準備中
  6. 36
    動きと自動更新:止めて読む

    自動的な動きや更新を止める手段を確認します。

    2.2.2A準備中
  7. 37
    時間に依存しないタスク:急がなくても完了できるように

    AAAで、制限時間なしに機能を完了できるかを確認します。

    2.2.3AAA準備中
  8. 38
    割り込み:通知を後回しにして集中する

    緊急時以外の割り込みを調整できるようにします。

    2.2.4AAA準備中
  9. 39
    再認証:入力した内容を失わないために

    セッションの期限切れ後の再認証で、データと進行状況を保持します。

    2.2.5AAA準備中
  10. 40
    タイムアウトの案内:入力前に制限を伝える

    操作しないことでデータが失われる可能性がある時間を案内します。

    2.2.6AAA準備中
  11. 41
    閃光:危険な視覚刺激を定量的に確認する

    閃光の回数の評価と、一般閃光・赤色閃光の閾値の評価を区別します。

    2.3.1A準備中
  12. 42
    3回の閃光:AAAのより厳格な基準

    1秒あたりの閃光回数に関するAAA基準を検討します。

    2.3.2AAA準備中
  13. 43
    インタラクションによるアニメーション:動きを減らす選択肢

    操作によって生じる動きを無効にできるかを確認します。

    2.3.3AAA準備中
  14. 44
    繰り返しブロックのスキップ:本文へすばやく移動する

    繰り返されるナビゲーションをスキップする経路を確認します。

    2.4.1A準備中
  15. 45
    ページタイトル:今開いている内容を識別する

    文書のタイトルが主題と目的を説明しているかを検討します。

    2.4.2A準備中
  16. 46
    フォーカス順序:操作の意味がつながるように

    キーボードでの移動順が、情報と機能の関係を維持しているかを評価します。

    2.4.3A準備中
  17. 47
    文脈におけるリンクの目的:移動先が分かるように

    リンクと、プログラムによって関連付けられた文脈をあわせて、リンクの目的を評価します。

    2.4.4A準備中
  18. 48
    複数の探索方法:必要なページにたどり着く

    サイト内のページを探すための複数の経路を確認します。

    2.4.5AA準備中
  19. 49
    見出しとラベル:内容と目的を正確に案内する

    存在する見出しやラベルが、意味のある表現になっているかを評価します。

    2.4.6AA準備中
  20. 50
    フォーカス表示:今操作している位置を示す

    キーボードフォーカスの視覚的な表示を、実際の状態で確認します。

    2.4.7AA準備中
  21. 51
    現在位置:サイト内の文脈を伝える

    現在のページがどこに属するかを示す情報を検討します。

    2.4.8AAA準備中
  22. 52
    リンクだけで目的を伝える:AAA基準

    文脈なしでもリンクの目的を識別できる経路を検討します。

    2.4.9AAA準備中
  23. 53
    セクション見出し:長い内容を分けて探索する

    文書を主題別の見出しで構成するAAA基準です。

    2.4.10AAA準備中
  24. 54
    フォーカスの隠れ:少なくとも一部は見えるように

    AAで、固定要素がフォーカス対象を完全に隠していないかを評価します。

    2.4.11AA準備中
  25. 55
    フォーカスの隠れの強化基準:対象全体を見えるように

    AAAで、フォーカス対象の部分的な隠れまで評価します。

    2.4.12AAA準備中
  26. 56
    フォーカスの外観:十分な面積とコントラストで示す

    AAAのフォーカス表示について、面積と状態間のコントラストを測定します。

    2.4.13AAA準備中
  27. 57
    ポインターのジェスチャ:複雑な動作の代替を提供する

    マルチポインターや軌跡に基づくジェスチャについて、単純な操作による代替を確認します。

    2.5.1A準備中
  28. 58
    ポインターのキャンセル:誤って押した操作を取り消す

    押す時点と離す時点、キャンセル・取り消しの手段を検討します。

    2.5.2A準備中
  29. 59
    見える名前とアクセシブルな名前を合わせる

    音声操作で、画面のラベルを使って対象を見つけられるようにします。

    2.5.3A準備中
  30. 60
    動きの検知:端末を振らなくても実行できるように

    端末の動きに基づく機能について、UIによる代替と無効化の手段を確認します。

    2.5.4A準備中
  31. 61
    操作対象のサイズ:AAAの余裕あるタッチ領域

    44×44 CSS pxという強化された目標と例外を検討します。

    2.5.5AAA準備中
  32. 62
    入力方式の併用:タッチとキーボードをともに使う

    一つの入力方式によって、ほかの方式が制限されていないかを確認します。

    2.5.6AAA準備中
  33. 63
    ドラッグ:引きずらなくても同じ結果を得る

    ドラッグ機能の、シングルポインターによる代替を評価します。

    2.5.7AA準備中
  34. 64
    操作対象のサイズ:AAのサイズと間隔の条件

    24×24 CSS pxと、間隔などの例外を、条件に沿って評価します。

    2.5.8AA準備中
PRINCIPLE 03

理解可能なウェブ

予測可能な動作、入力、認証の流れ。

  1. 65
    ページの言語:正しい発音の出発点

    文書の基本言語をプログラムが識別できるようにします。

    3.1.1A準備中
  2. 66
    部分の言語:言語が変わる箇所を示す

    本文内の異なる言語の箇所を、意味と例外に応じて示します。

    3.1.2AA準備中
  3. 67
    なじみのない言葉:意味を調べる経路を提供する

    専門用語や特別な用法を説明する方法を検討します。

    3.1.3AAA準備中
  4. 68
    略語:省略せずに書いた意味にアクセスする

    略語の正式な表記や意味を確認できるようにします。

    3.1.4AAA準備中
  5. 69
    読解レベル:複雑な説明の代替を作る

    難しいテキストに、理解しやすい補足の経路を提供します。

    3.1.5AAA準備中
  6. 70
    発音:意味を変える読み方を案内する

    発音によって意味が変わる表現について、確認する経路を提供します。

    3.1.6AAA準備中
  7. 71
    フォーカスだけで画面を変えない

    要素にフォーカスが移っただけで、コンテキストが変わらないかを確認します。

    3.2.1A準備中
  8. 72
    入力の変更:何が起きるかを先に伝える

    設定の変更によって起きるコンテキストの変化について、事前の案内を検討します。

    3.2.2A準備中
  9. 73
    一貫したナビゲーション:同じ経路を同じ順序で

    繰り返される探索構造の相対的な順序を維持します。

    3.2.3AA準備中
  10. 74
    一貫した識別:同じ機能を同じ名前で

    同一の機能の名前や表現を、一貫して提供します。

    3.2.4AA準備中
  11. 75
    要求に応じた変化:予測可能なコンテキストの変化

    AAAで、コンテキストの変化をユーザーが要求するか、無効にできるようにします。

    3.2.5AAA準備中
  12. 76
    一貫したヘルプ:必要な助けを同じ位置で

    繰り返される支援手段の相対的な位置を維持します。

    3.2.6A準備中
  13. 77
    エラーの特定:どこで何が間違っているかを説明する

    自動的に検出した入力エラーを、テキストで伝えます。

    3.3.1A準備中
  14. 78
    ラベルと説明:入力前に分かるように

    求める情報と形式を、入力前に案内します。

    3.3.2A準備中
  15. 79
    エラー修正の提案:次の行動を案内する

    分かっている修正方法を、エラーメッセージに結び付けます。

    3.3.3AA準備中
  16. 80
    重要な送信:法的・金銭的・データの変更を確認する

    重要な操作の取り消し・チェック・確認の経路を検討します。

    3.3.4AA準備中
  17. 81
    文脈に合ったヘルプ:行き詰まった場所で助けを得る

    入力や作業の文脈に合った支援を提供します。

    3.3.5AAA準備中
  18. 82
    すべての送信でエラーを防ぐ:AAAへ広げる

    情報の送信全般について、取り消し・チェック・確認の手段を検討します。

    3.3.6AAA準備中
  19. 83
    重複入力:一連の過程で同じ情報を再び求めない

    すでに入力した情報を、再利用するか選択できるように提供します。

    3.3.7A準備中
  20. 84
    アクセシブルな認証:記憶やパズルへの依存を減らす

    AAの認証で、認知機能テストの代替と支援手段を検討します。

    3.3.8AA準備中
  21. 85
    認証の強化基準:より広い認知アクセシビリティ

    AAAの認証で許容される代替と支援の範囲を検討します。

    3.3.9AAA準備中
PRINCIPLE 04

堅牢なウェブ

支援技術と名前・役割・状態を共有する。

  1. 86
    名前・役割・値:支援技術とUIの状態を共有する

    カスタムコントロールの意味と状態の変化を、プログラムに伝えます。

    4.1.2A準備中
  2. 87
    ステータスメッセージ:フォーカスを移さずに結果を伝える

    操作の結果と進行状況を支援技術に伝えます。

    4.1.3AA準備中
FINISH

サービスへの接続

基準別評価をエージェントと運用に統合します。

  1. 88
    アクセシビリティ評価をエージェントとサービスにつなぐ

    項目別のプロンプトを調整し、根拠・改善・再確認をつなぐシステムと、資料配布・サービス化の構造を設計します。

    準備中