💡

【WCAG2.1の達成基準を咀嚼する】2.1.1 キーボード

2024/08/13に公開

アクセシビリティ

WCAG

tech

これは何？

WCAG2.1のガイドライン中で示されている達成基準を、フロントエンドエンジニア視点でざっくりと噛み砕いてまとめたものです。
この記事では、達成基準 2.1.1 キーボードについて記載しています。

参考

「達成できている」と言える状態

コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。ただし、その根本的な機能が利用者の動作による終点だけではない軌跡に依存する入力を必要とする場合は除く。

可能な限り、コンテンツをキーボード or (代替キーボードが利用できるような) キーボードインタフェースで操作できるようにする。
それにより、マウスのようなポインティングデバイスを利用できないユーザーでもWebページを操作可能になる。

ロービジョンのユーザーはポインタを目で追うことが困難なことがあり、キーボードからソフトウェアを操作できる場合、ソフトウェアの使用がはるかに容易になる。

「個々のキーストロークに特定のタイミング」の事例

利用者が短時間のうちに複数のキーストロークを繰り返すもしくは実行する必要がある状況
キーストロークが記録される前に長い間キーを押し続けなければならない状況

メリット

・ (目と手の協調運動を必要とするマウスのようなデバイスを使用できない) 全盲の人
・ (画面上のポインタを見つけたり、目で追ったりするのが困難である) ロービジョンの人
・マウスを使うのが非常に難しいと感じ、通常はキーボードを使用している手に震えのある人

上記のユーザーでもWebページを操作可能になる。

例外

キーボードから合理的に操作できないものはこの達成基準の例外となる。
例：

軌跡に依存した入力を要する機能
- 自由な手描き
- 水彩画を描くプログラム
模型ヘリコプター飛行訓練などのシミュレータ
- シミュレータの性質上、動作をリアルタイムで教えるものであるので例外となる

具体的な達成方法

何はともあれセマンティックなマークアップが大事。
ユーザエージェントは HTML のフォームコントロール及びリンクのキーボード操作を提供しているので、インタラクション可能な各要素に対して適切なタグを用いればキーボード操作が可能になっている。

非キーボードの UI イベントによって何らかのイベントを引き起こす場合、それらのイベントハンドラをキーボードベースのイベントとも関連付ければ良い。

mouse	keyboard
mousedown	keydown
mouseup	keyup
click	keypress
mouseover	focus
mouseout	blur

しかし、dblclick 及び mousemove のようなマウス固有の機能には、対応するキーボード固有の機能がない。
その場合は実装されているマウス固有の機能と同等の機能を、キーボードから実行できるように追加する必要がある。
※ 例：マウス操作でファイルをアップロードする場合、ドラッグ＆ドロップだけでなくキーボードによってエクスプローラーからファイルを選択できるようにする