Webアクセシビリティで達成すべきこと

サムネイル_肉球水_冬 学習履歴 🎨 デザイン

はじめに

昨日に引き続き、デジタル庁が提供している「ウェブアクセシビリティ導入ガイドブック」でアクセシビリティの基礎の学習をしています。

3章の「ウェブアクセシビリティで達成すべきこと」の要約(メモ)となります。

3.1 達成しないと利用者に重大な影響を及ぼすもの(重大)

非干渉の達成基準

達成基準は、「利用者がWebページの他の部分へアクセスすることを妨げてはいけない」状態であること。

  • 自動再生はさせない
    • 自動再生させる場合は3秒以内
  • 袋小路に陥らない
    • 一度フォーカスしたら抜け出せない状態のこと
  • 光の点滅は危険
    • 光感受性発作等を誘発。1秒に3回を超える点滅はNG
  • 自動でコンテンツを切り替えない
    • 一時停止、非表示、停止できるようにする必要がある

3.2 必ず達成しなければならないもの(必須)

  • ロゴ、写真、イラストなどの画像が指し示している情報を代替テキストとして付与する
  • キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする
  • 操作に制限時間を設けてはいけない
  • 赤字、太字、下線、拡大など単一の表現のみで情報を伝えてはいけない
  • スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている
  • 見出し要素だけで、セクションやブロックに含まれる要素を表現する
  • 文字と背景の間に十分なコントラスト比を保つ
    • 4.5 : 1 以上のコントラスト比。大きいテキストでは 3 : 1 以上のコントラスト比
  • テキストの拡大縮小をしても情報が読み取れる
    • 文字サイズを固定しない
    • 200%まで拡大した時に、文字が重なったり見切れないようにする
  • 文字や文字コード、フォントに関する注意
    • 文字コードはUTF-8
    • 「*」「※」などの記号は場合によって読み上げられない。 => 文字「必須」にするなど
  • ページの内容を示すタイトルを適切に表現する
  • リンクを適切に表現する
    • どこへのリンクなのか
    • PDFなのか外部ウィンドウが開くのか
  • ナビゲーションに一貫性をもたせる
  • 同じ機能には、同じラベルや説明をつける

3.3 状況に応じて確認すべきこと(個別対応)

システムによっては、ないこともあるコンテンツや確認事項。

  • 入力フォームを様々な使い方でも使えるようにする
    • ラベルとフォームコントロールを関連付ける
    • 入力制限は利用者が入力する前に説明する
    • エラーは適切に(明示と説明)
    • 入力エラーはスクリーンリーダーで読み上げれるようにする
    • エラーの回避方法は具体的に示す
    • 必要に応じてフォームコントロールをグループ化
    • 法律に関わる操作や金融取引などでは、以下を考慮して設計する
    • 入力エラーのチェック
    • 入力内容の確認
    • 送信の取り消し
  • 音声、映像コンテンツに代替コンテンツを付与する
    • ここでも3秒ルール、一時停止と停止機能
    • 字幕を提供
    • 登場人物の動作や表情、場面の移り変わりなど視覚的な情報を音声で伝える「音声解説」を提供する
  • 動きや点滅などがあるコンテンツを利用者が操作できるようにする
  • コンテンツの変化がスクリーンリーダーにもわかるようにする
    • 検索結果の読み込み、ページネーションの読み上げ
    • チェックボックス、ラジオボタンのオンオフ
    • タブが操作できる箇所
    • モーダルダイアログへのフォーカス
      • 閉じて戻る挙動
      • 元の位置へのフォーカス
    • トースト、スナックバーなど画面にロックしないポップアップ
    • フォーカスされている場合、ポップアップを自動的に閉じない

3.4 導入に慎重な検討が必要(非推奨)

  • アクセシビリティ・オーバーレイなどのプラグインは支援技術の機能と重複させない
  • 文字サイズの変更、読み上げプラグインの利用は非推奨
    • OSの支援技術、アプリの支援技術、ブラウザの拡張機能を使っていることが多いため
タイトルとURLをコピーしました