ウェブアクセシビリティハンドブック

本ハンドブックは、ウェブサイトを制作・運用する人が、実務で迷いやすいアクセシビリティの要点を確認できるようにまとめたものです。
WCAG 2.2を中心に、JIS X 8341-3:2016との関係も補足しながら、「概要、実践すべきこと、運用者への注意、開発者への注意」に分けて整理しています。

アクセシビリティの最初の一歩として

ウェブアクセシビリティを向上させるための第一歩として、以下の2点を確認します。

キーボードだけでサイトを操作できるか？

サイト内をタブキーで移動でき、重要なボタンやリンクが選択状態になっていることが分かるかを確認します。

読み上げでも必要な情報が伝わるか？

NVDAやVoiceOverなどのスクリーンリーダーで、コンテンツが自然な順序で読み上げられ、必要な情報が漏れていないかを確認します。

まずはこれらの点を確認し、その後のステップとして「運用時のウェブアクセシビリティの取り組み」や「開発時のウェブアクセシビリティの取り組み」に進みましょう。
また、「達成基準」を意識しながら構築を進めていくことで、より深く学んでいくことができます。

まず取り組みたい5つの確認

はじめに

達成基準（A/AAを中心に、重要なAAAも補足）

WCAG 2.2 および JIS X 8341-3:2016 に基づき、4つの原則とガイドラインごとに実務のポイントを整理しています。
※「非干渉」と記載された基準（1.4.2、2.1.2、2.2.2、2.3.1）は、ページ内の他のコンテンツの利用を妨げないために満たすことが必須となる最重要項目です。

1. 知覚可能の原則（Perceivable）

情報や操作部分を、目や耳などの感覚を通じて知覚できるようにします。

  1. 1.1 テキストによる代替
    1. 非テキストコンテンツ (レベル A)
  2. 1.2 時間依存メディア
    1. 音声のみ及び映像のみ (収録済) (レベル A)
    2. キャプション (収録済) (レベル A)
    3. 音声解説、又はメディアに対する代替 (収録済) (レベル A)
    4. キャプション (ライブ) (レベル AA)
    5. 音声解説 (収録済) (レベル AA)
    6. 手話 (収録済) (レベル AAA)
    7. 拡張音声解説 (収録済) (レベル AAA)
    8. メディアに対する代替 (収録済) (レベル AAA)
    9. 音声のみ (ライブ) (レベル AAA)
  3. 1.3 適応可能
    1. 情報及び関係性 (レベル A)
    2. 意味のある順序 (レベル A)
    3. 感覚的な特徴 (レベル A)
    4. 表示の向き (レベル AA)
    5. 入力目的の特定 (レベル AA)
    6. 目的の特定 (レベル AAA)
  4. 1.4 判別可能
    1. 色の使用 (レベル A)
    2. 音声の制御 (レベル A / ※非干渉)
    3. コントラスト (最低限) (レベル AA)
    4. テキストのサイズ変更 (レベル AA)
    5. 文字画像 (レベル AA)
    6. コントラスト (高度) (レベル AAA)
    7. 小さな背景音、又は背景音なし (レベル AAA)
    8. 視覚的提示 (レベル AAA)
    9. 文字画像 (例外なし) (レベル AAA)
    10. リフロー (レベル AA)
    11. 非テキストのコントラスト (レベル AA)
    12. テキストの間隔 (レベル AA)
    13. ホバー又はフォーカスで表示されるコンテンツ (レベル AA)

2. 操作可能の原則（Operable）

キーボードやタッチ操作など、さまざまな方法でスムーズに操作や移動ができるようにします。

  1. 2.1 キーボード操作可能
    1. キーボード (レベル A)
    2. キーボードトラップなし (レベル A / ※非干渉)
    3. キーボード (例外なし) (レベル AAA)
    4. 文字キーのショートカット (レベル A)
  2. 2.2 十分な時間
    1. タイミング調整可能 (レベル A)
    2. 一時停止、停止及び非表示 (レベル A / ※非干渉)
    3. タイミング非依存 (レベル AAA)
    4. 割り込み (レベル AAA)
    5. 再認証 (レベル AAA)
    6. 時間切れ（タイムアウト） (レベル AAA)
  3. 2.3 発作や身体的反応の防止
    1. 3回せん（閃）光、又はしきい（閾）値以下 (レベル A / ※非干渉)
    2. 3回の閃光 (レベル AAA)
    3. インタラクションによるアニメーション (レベル AAA)
  4. 2.4 ナビゲーション可能
    1. ブロックスキップ (レベル A)
    2. ページタイトル (レベル A)
    3. フォーカス順序 (レベル A)
    4. リンクの目的 (周囲の文脈・コンテキスト内) (レベル A)
    5. 複数の手段 (レベル AA)
    6. 見出し及びラベル (レベル AA)
    7. フォーカスの可視化 (レベル AA)
    8. 現在位置 (レベル AAA)
    9. リンクの目的 (リンクのみ) (レベル AAA)
    10. セクション見出し (レベル AAA)
    11. 隠されないフォーカス (最低限) (レベル AA)
    12. 隠されないフォーカス (高度) (レベル AAA)
    13. フォーカスの外観 (レベル AAA)
  5. 2.5 入力方法
    1. ポインタのジェスチャ (レベル A)
    2. ポインタのキャンセル (レベル A)
    3. ラベルを含む名前 (name) (レベル A)
    4. 動きによる起動 (レベル A)
    5. 操作範囲（ターゲット）のサイズ (高度) (レベル AAA)
    6. 入力メカニズムの共存 (レベル AAA)
    7. ドラッグの動き (レベル AA)
    8. 操作範囲（ターゲット）のサイズ (最低限) (レベル AA)

3. 理解可能の原則（Understandable）

情報や操作方法が分かりやすく、意図したとおりに操作できるようにします。

  1. 3.1 読みやすさ
    1. ページの言語 (レベル A)
    2. 一部分の言語 (レベル AA)
    3. 一般的ではない用語 (レベル AAA)
    4. 略語 (レベル AAA)
    5. 読解レベル (レベル AAA)
    6. 発音 (レベル AAA)
  2. 3.2 予測可能
    1. フォーカス時 (レベル A)
    2. 入力時 (レベル A)
    3. 一貫したナビゲーション (レベル AA)
    4. 一貫した識別性 (レベル AA)
    5. 要求による変化 (レベル AAA)
    6. 一貫したヘルプ (レベル A)
  3. 3.3 入力支援
    1. エラーの特定 (レベル A)
    2. ラベル又は説明 (レベル A)
    3. エラー修正の提案 (レベル AA)
    4. エラー回避 (法的、金融及びデータ) (レベル AA)
    5. ヘルプ (レベル AAA)
    6. 誤り防止 (すべて) (レベル AAA)
    7. 冗長な入力 (レベル A)
    8. アクセシブルな認証 (最低限) (レベル AA)
    9. アクセシブルな認証 (高度) (レベル AAA)

4. 堅牢の原則（Robust）

支援技術を含む多様なユーザーエージェントが、コンテンツを正しく解釈できるようにします。

  1. 4.1 互換性
    1. 構文解析 (レベル A ※WCAG 2.2で削除)
    2. 名前（name）、役割（role）及び値（value） (レベル A)
    3. ステータスメッセージ (レベル AA)

アクセシビリティツール・関連情報

ウェブアクセシビリティ試験・納品サンプル

公開・販売・運用のことで困ったら、まずは「ましじめ」へ

ウェブサイトの制作や改善、AI活用、アクセシビリティ、
商品やサービスの見せ方まで、何から手をつければよいか分からない段階でもご相談ください。
自社事業の経験と専門的な技術力を活かし、無理なく続けられる形をご提案します。

お問い合わせはフォームへ