ウェブアクセシビリティ４つの原則 ②操作可能

こんにちは！kanappleです。
アクセシビリティ4つの原則の前回の続きです。

1. 知覚可能
2. 操作可能
3. 理解可能
4. 堅牢

今回は操作可能についてです。

---

---

2.操作可能

操作可能とは、利用者がウェブページ内にあるボタンやリンク等、すべての機能をマウスやキーボードを使って操作をできるということです。

操作可能にはどのように対応すれば良いか、レベルA、レベルAAに対応したガイドラインについて、実装例を交えて説明します。

2.1 キーボード操作可能

このガイドラインの目的は、すべての機能がキーボードを使って実現できることです。
キーボードを使えると、キーボードの利用者、キーボード入力を生成する音声入力、オンスクリーンキーボードを使用するマウスなど、様々な支援技術によりその機能を実現することができます。

・キーボードでの操作を可能にする

例）描画プログラム
描画プログラムは、利用者がキーボードからオブジェクトの作成、サイズ変更、配置及び回転ができるようにします。

例）ドラッグ＆ドロップ機能
ドラッグ＆ドロップを用いるアプリケーションは、オブジェクトを移動させるための「切り取り」及び「貼り付け」又はフォームコントロールもサポートするようにします。

※ 例外として認められるもの
例） お絵描きプログラム
キーボード入力が時間に依存する場合は、このガイドラインの例外として認められます。
水彩画を描くプログラムは、筆の動きが速度及び持続時間によって変化するため、例外の一つになります。

・キーボードを閉じ込めない＜非干渉＞

例） カレンダーウィジェット
キーボードを使って、項目の追加や削除できるようにします。
利用者はウィジェット内の操作だけでなく、その後に続く任意のリンクやコントロールを使って Tab キーを使用できるようにします。
一度ウィジェットにフォーカスしたらコンテンツから抜け出せない、ということにならないようにしましょう。
これは非干渉の達成基準であり、必ず達成する必要があります。

例） モーダルダイアログボックス
モーダルダイアログを開くと、フォーカスはダイアログ内に閉じ込められます。
ダイアログ内にある「キャンセル」または「OK」をを押すとダイアログが閉じられ、フォーカスがダイアログから外れるようにします。
これは非干渉の達成基準であり、必ず達成する必要があります。

2.2 十分な時間

このガイドラインの目的は、利用者が個別の反応時間でタスクを完了できるようにするということです。
障害がある多くの利用者は、タスクを完了するのに時間を必要することがあります。
制限時間を取り除くこと、または十分な追加時間を提供することでこれに対応します。

・制限時間のあるコンテンツ

例） 予約サイト、チケット購入サイト
チケット購入サイト等では、制限時間が与えられているものが多いです。
時間切れが近づくと警告を出すなどし、制限時間の延長や無効化を許可できるようにコントロールを設置します。
※ 例外を認めるもの
20時間を超える制限時間のある活動、リアルタイムイベント、制限時間があるオークション等は例外として認められます。

・現れては消えるアニメーションがある

例）消えるテキストアニメーション
短時間で消えてしまうテキストアニメーションがある場合、動きを追うのが困難な利用者や、すばやく読み取ることが困難な利用者もいます。
一時停止ボタンの設置や、一定期間後に停止するようにします。

・他のコンテンツと一緒に表示される5秒以上続く動画＜非干渉＞

例） スクロールすると自動で開始されるアニメーション
画面上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利用者がいます。
アニメーションの一時停止、停止、または非表示にするコントロールを設置するようにしましょう。
これは非干渉の達成基準であり、必ず達成する必要があります。
※例外を認めるもの
コンテンツ読み込み中のloadingアニメーションや回転アナウンス、無料コンテンツにアクセスする前に利用者に閲覧を要求する広告などは例外として認められます。

2.3 発作の防止

発作性障害のある利用者は、閃光を放つ視覚的なコンテンツによって発作を引き起こすことがあります。
ほとんどの利用者は、発作が起こすまでは自分がこの疾患を持っていることに気づきません。
過去にはテレビアニメ番組で子供たちが発作を引き起こした事例がありました。
1~2秒間であっても、発作を引き起こす可能性が高い閃光は避けましょう。

・閃光シーンは1秒に3回を超えない＜非干渉＞

例） 稲妻の閃光シーンのある動画
1秒間に3回以下の閃光になるように動画を編集します。光の点滅を繰り返すと、光感受性発作等を誘発しやすくなります。
これは非干渉の達成基準であり、必ず達成する必要があります。

2.4 ナビゲーション可能

このガイドラインの目的は、利用者が必要とするコンテンツを見つけることを助け、自分が見ている現在位置を把握できるようにすることです。

・メインコンテンツや機能に直接スキップできるようにする

例） ロゴやナビゲーションの後にメインコンテンツがあるサイト
メインコンテンツに直接スキップできるように、メインの記事へジャンプするスキップリンクを設定します。
見出しや適切な構造<section>や<aside>でマークアップされている場合は、スキップリンクは必要ありません。

・ページタイトルをつける

例） サイトタイトルやページタイトル
ウェブページの内容を示したタイトルがタイトルバーに表示されるように、<title>要素でマークアップします。

・フォーカスの順序を考える

サイト内の順序は視覚でもキーボード利用者でも、正しい文脈で移動できるようにしましょう。
Tabキーでで移動した際、フォーカスが予期しないどこかへ移動してしまうことがないようにします。

・リンクの目的を特定するリンクテキストを提供する

例） 本文の一部がリンクになっている
「ウェブアクセシビリティについてましじめスタッフブログで学ぶ」の「ましじめスタッフブログ」にリンクを付け、利用者がリンクの目的を特定できるようにします。

例）様々な形式のリンク
HTML、PDF、mp3とリンクを並べる場合は、それぞれのリンクテキストに形式を記載し、利用者がリンク先が理解できるようにします。

・ナビゲーションを2つ以上設置する

例） ナビゲーションメニュー、パンくずリスト
サイト上のページを見つけるために、少なくとも2つのナビゲーションを設置しましょう。メニュー、パンくず、サイト検索、サイトマップ、関連リンクなどがこれにあたります。
※例外を認めるもの
ページが１ステップのプロセスである場合は、例外として認められます。その場合は前後のステップへのリンクのみを設置しましょう。

・見出しやラベルを明確にする

例） ニュース記事一覧
記事の主題を明確に伝える見出しをつけます。
無駄な語句や不要な語句を取り除き、明確で簡潔な見出し構造となるようにします。

例） 氏名を入力するフォーム
姓、名と２つのテキストフィールドを使う場合は、「姓」「名」とそれぞれのフィールドにラベルを付けます。

・フォーカスを認識しやすくする

例） リンクやフォーム
タブ移動した際に、どの要素にフォーカスがあたっているか視覚的なインジケータが反映されるようにします。
通常デフォルトで点線やアウトラインが表示されますが、CSSで任意の見た目に上書きすることもできます。

以上が、操作可能のガイドラインになります。
これらはJIS X 8341-3:2016の、知覚可能の原則（レベルA、レベルAA）ガイドラインで、12の達成基準があります。
実装例を参考に、ひとつずつ達成していきましょう。

まとめ

・操作可能の原則とは、利用者がマウスやキーボードを使ってすべての機能を操作をできるということ
・フォーカスは明確に表示し、ウィジェットやダイアログにフォーカスが閉じ込められることがないようにする
・制限時間があるものや自動再生されるものは、利用者が任意にコントロールできるように実装する
・光の点滅は発作の危険性がある為避ける
・ナビゲーションは明確にし、利用者が今どこにいるかがわかるようにする

次回は、理解可能の原則について説明します。

---