第4回 D2D アクセシビリティ勉強会 準備資料カルーセル

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

• マウスやタッチパネルでの操作を前提としたUIで、キーボードで操作できないものが多い。
• スクリーンリーダーでの音声読み上げに対応していない（構造が伝えられない）ものが多い。
• 切り換えられる画像上の情報（特に文字情報）を理解するだけの時間が足りないものが多い。

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

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

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

• 7.2.1.1 キーボード操作
  • H91（リンク箇所にはちゃんとa要素を使う）
  • G90（マウスイベントだけじゃダメ）
  • SCR20（★キーボード用／マウス用のイベントを両方使う）
  • SCR35（onClickは機器に依存しないから便利）
• 7.2.1.2 フォーカス移動
  • G21（★利用者がコンテンツ内に閉じ込められないようにする）
• 7.2.4.3 フォーカス順序
  • G59（HTMLソースの順序と見た目の順序を合わせる）
  • H4（フォーカス順序がイケてない場合はtabindexを使う）
  • C27（DOMの順序と見た目の順序を合わせる）
• 7.3.2.1 オン・フォーカス
  • G107（フォーカス移動だけで勝手に遷移させない）

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

• 7.1.1.1 非テキストコンテンツ
  • H37（画像にalt属性を入れる）
  • G94（alt属性に適切な代替テキストを入れる）
  • H30（alt属性などでa要素のリンクの目的を説明する）
• 7.1.3.1 情報及び関係性
  • G140（css無効時でも使えるよう、文書構造と見た目を分離する）
  • H48（リストは役割に合わせて適切に使う）
  • SCR21（ページにコンテンツを追加するならDOMを使う）
• 7.1.3.2 意味のある順序
  • G57（コンテンツを意味のある順序で並べる）
• 7.4.1.1 構文解析
  • G134（validなマークアップを行う）
  • G192（言語の仕様に準拠したマークアップを行う）
  • H88（仕様に準じてHTMLを使う）
  • H74（終了タグをちゃんと入れる）
• 7.4.1.2 プログラムが解釈可能な識別名・役割及び設定可能な値
  • G108（マークアップを使って支援技術でも利用可能にする）
  • H91
  • H88

理解できるだけの十分な時間を与えられること

• 7.2.2.2 一時停止、停止、非表示
  • G4（★コンテンツを一時停止／再開できるようにする）
  • SCR33（スクリプトでスクロール／一時停止できるようにする）
  • G186（動きのあるコンテンツを停止させるコントロールを使う）

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

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

• ※ JavaScriptに依存していない場合。

• JavaScript無効時でも、カルーセルに含まれる全ての画像を表示できる。
• JavaScript無効時でも、カルーセルに含まれる全てのリンク先に遷移できる。
• 上記が満たせない場合は、noscript要素で代替手段を用意する。もしくはページ内にカルーセル以外の補助導線を設けることが望ましい。

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

• WAI-ARIAに対応しているUAに「カルーセルであること」（もしくはそれに近い何か）をちゃんと伝える。

サンプル

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