第4回 D2D アクセシビリティ勉強会 準備資料プルダウンメニュー

アクセシビリティ上の問題点

• マウス操作を前提としたUIで、キーボードやタッチパネルで操作できないものが多い。
• スクリーンリーダーでの音声読み上げに対応していないものが多い。

チェックポイント、および満たすべき達成基準

• ※ JIS X 8341-3:2010 達成等級：Aに準拠することを前提とした場合
• ※ 実装方法は、あくまで事例
• ★ 特に大事なポイント

マウスだけではなくキーボード（やタッチパネル）でも操作できること

• 7.2.1.1 キーボード操作
  • H91（リンク箇所にはちゃんとa要素を使う）
  • G90（マウスイベントだけじゃダメ）
  • SCR20（★キーボード用／マウス用のイベントを両方使う）
  • SCR35（onClickは機器に依存しないから便利）
• 7.2.4.3 フォーカス順序
  • G59（HTMLソースの順序と見た目の順序を合わせる）
  • H4（フォーカス順序がイケてない場合はtabindexを使う）
  • C27（DOMの順序と見た目の順序を合わせる）

スクリーンリーダーでの音声読み上げに対応していること

• 7.1.3.1 情報及び関係性
  • G140（css無効時でも使えるよう、文書構造と見た目を分離する）
  • H48（リストは役割に合わせて適切に使う）
  • SCR21（ページにコンテンツを追加するならDOMを使う）
• 7.3.2.1 オン・フォーカス
  • G107（★フォーカス移動だけで勝手に遷移させない）
• 7.4.1.1 構文解析
  • G134（validなマークアップを行う）
  • G192（言語の仕様に準拠したマークアップを行う）
  • H88（仕様に準じてHTMLを使う）
  • H74（終了タグをちゃんと入れる）

さらに対応が望まれるポイント

JavaScript無効時も使用できること

• ※ JavaScriptに依存していない場合。
• ※ JIS X 8341-3:2010 達成等級Aの達成基準にはなくても、ナビゲーションが全く機能しない状況は避ける。

• ★JavaScript無効時でも、そのナビゲーションに含まれる全てのリンク先に遷移できる。
• 一部のリンク先への遷移が不可能な場合は、中間ページを設けるなど代替手段を提供し、全てのリンクを確保する。
• JavaScript無効時にナビゲーションが全く機能しない場合は、サイトマップへの導線など代替手段を提供する。

WAI-ARIAでUAに役割を伝えること

• 「ナビゲーションであること」「メニュー項目であること」をWAI-ARIAに対応しているUAにちゃんと伝える。

サンプル

• サンプル1
• サンプル2