Webアクセシビリティのすすめ その3
公開日: 2022.08.18
最終更新日: 2023.02.15
こんにちは！日々子育てに奮闘中、ディレクターのMです。
今回は「Webアクセシビリティについて」のシリーズ化、その3です。
その1とその2は下記よりご欄ください。
Webアクセシビリティの概要や対応内容についてざっくり書いてます。
Webアクセシビリティの4原則の1つめ、「知覚可能」についてまとめています。
今回のその3では、Webアクセシビリティの4原則の2つめ、「操作可能」についてまとめたいと思います。
操作可能
Web Content Accessibility Guidelines (WCAG) 2.1 によると、「操作可能」とは、「ユーザインタフェース・コンポーネント及びナビゲーションは操作可能でなければならない。」と記載されています。つまり、サイト上でユーザーが意図した操作が行えること、が求められています。
「操作可能」には、下記の5つの基準があります。
2.1 キーボード操作可能
2.2 十分な時間
2.3 発作と身体的反応
2.4 ナビゲーション可能
2.5 入力モダリティ
今回は、上記の5つの基準の説明と、対応方法について簡単にまとめたいと思います。
2.1 キーボード操作可能
すべての機能をキーボードから利用できるようにすること。
こちらは、マウスやその他の入力手段を使用せず、キーボードのみで操作ができるようにすることを意味しています。
例えば、フォーカスの移動は矢印キー、Tab キー等で可能であること、また、フォーカスを外す際にも矢印キー、Tab キー等で可能である必要があります。
2.2 十分な時間
すべての機能をキーボードから利用できるようにすること。
PC操作に慣れていない方や障害のある方は、操作に時間がかかります。そのため、操作の制限時間を取り除くことや、タスクを完了するために十分な追加時間をユーザーに提供すること、が条件として挙げられています。
具体的には下記です。
- 動画には一時停止や再開のボタンを設置する。
- ユーザーがそのコンテンツを読むための十分な時間をとる。自動でコンテンツの内容が切り替わるようなものは、切り替わるまでの時間を十分にとることや、ユーザー自身で一時停止や再開できるようにする。
- フォームやECサイトのカート等で入力に時間がかかるものは、セッションを短く設定していると途中で切れてしまうため、十分な時間を確保する。
2.3 発作と身体的反応
発作や身体的反応を引き起こすようなコンテンツを設計しないこと。
こちらは下記の対応が求められます。
- 1秒間に3回を超える閃光を放つものがない。
- アニメーションが、機能や掲載されている情報に必要不可欠でない限り、インタラクションによって引き起こされるモーションアニメーションを無効にできる。
１つ目はかの有名なポケモンショック事件でもおきましたが、短い時間で閃光が繰り返されると、発作や頭痛や吐き気等の症状を引き起こす可能性があります。そのため、閃光を放つアニメーションや動画等は、閃光や点滅の速度を抑えることが求められます。
また、2つ目ですが、パララックスの様な効果は前庭(内耳)障害がおき、めまい、吐き気、頭痛を伴うことがあるため、ユーザー自身で無効にできるようにする必要があります。
2.4 ナビゲーション可能
利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。
こちらはユーザーがサイト内、ページ内で適切に移動できること、適切なコンテンツを探せること、現在サイト内やページ内のどこにいるのかを確認できることが求められます。
- ページタイトル（<title>タグ）を適切に設定する。
- ページの内容が理解しやすい順序でフォーカスを移動できるようにする。
- リンクを設定する場合、リンク先の内容を想像できるようなリンク元の名称を設定する。
- サイトマップや検索機能の提供などユーザーに複数の探索手段を提供し、ユーザーが自分のニーズに合う方法によってコンテンツを見つけられるようにする。
- 見出しやラベルを適切に設定する。
- フォーカスがあたっている箇所を分かりやすくする。
2.5 入力モダリティ
利用者がキーボード以外の様々な入力を通じて機能を操作しやすくすること。
キーボード以外の入力とは、例えばマウスポインタ、タッチスクリーン、電子ペン、レーザーポインタ等を指します。これらを使用した場合でも、操作しやすいことが求められます。
例えば下記のような対応が求められます。
- ポインタジェスチャを必須としない。
地図コンテンツの場合、ピンチアウトやピンチインで拡大、縮小ができますが、「＋」や「－」ボタンを設置してピンチ操作以外でも同等の操作ができるようにする。 - ポインタ操作のキャンセルができる。
ユーザーは、誤ったコンテンツをクリック（タップ）してしまった際に、ポインタ操作をキャンセルできるようにする。 - <label>と<name>には同じテキストを設定する。
- 動きによる操作以外でも操作を可能にする。
デバイスを振る、傾けるなど動きによって操作を行う場合、間違えて動作をしてしまった際に、その動作を無効にできる、または別の方法でも操作するできるようにする。
Webアクセシビリティの4原則の2つめ、「操作可能」の対応方法は以上になります。
次回は4原則の3つめ「理解可能」について説明したいと思います。
最後まで読んでいただきありがとうございました。
