そのWEBアプリは、キーボード操作を考慮していますか？

これは何の記事？

筆者がWeb Content Accessibility Guidelines(WCAG) 2.1 の解説書を読んで、
学びとなったことを残す記事です。
誤りなどありましたら(優しめに)ご指摘いただけますと幸いです。

WCAG :
WEBコンテンツを、よりアクセシブルにするための広範囲にわたる推奨事項をまとめたガイドライン。
W3Cの Web Accessibility Initiative (WAI) の活動の一環として作成されている。

そのWEBアプリは、キーボード操作を考慮していますか？

「いや、うちのアプリは基本マウス利用だし...」
「キーボード操作ばっかりするような、PCに詳しい人に向けたシステムじゃないから...」
上記のような思考から、キーボード操作の考慮は後回しにされがち...
ですが、アクセシビリティの観点からみると、キーボード入力はとても大事なんです。

参照先：ガイドライン 2.1: キーボード操作可能を理解する

キーボード操作を考慮することはなぜ大事？

• キーボード入力というのは、キーボードでのみ行われるものではない から。
• (いわゆる一般的な入力方法とは異なる) 様々な支援技術は「キーボードの入力」機能を実現する ものであるから。

  コンテンツがキーボード又は代替キーボードで操作できるとき、(目と手の協調運動を必要とするマウスのようなデバイスを使用できない) 全盲の人にも、代替キーボード又はキーボードエミュレータの機能を果たす入力デバイスを使用しなければならない人にも操作できる。

• そのため、キーボード操作に対応していないアプリは、何らかの理由で一般的な入力方法を利用できない人々をユーザーから除外している ことになるから。

考慮するって言っても..具体的には？

例えば、以下の点を満たせているかを確認する。

• コンテンツのすべての機能は、キーボードインタフェースを通じて操作可能？

  • 例えば、ドラッグ&ドロップ機能が使われているサイトならば、それはキーボード操作でも実現できるだろうか？（切り取り&貼り付けなど）
    • 以下語学学習サイトでは、選択肢を回答欄へドラッグ&ドロップする代わりに、選択肢上でEnterを押すことで上から順に回答欄へはめられる(Deutsche Welle)
    • 

• キーボードだけを用いて特定のコンポーネントからフォーカスを外すことが可能？

  • 例えば、モーダルウィンドウが表示された場合、ちゃんとそのモーダル内にフォーカスが「閉じ込められる」状態になっているか？（裏に隠れた画面でのみフォーカス移動できても意味がない）
    • 以下例では、いくらTabを押しても「×」と「翻訳設定」にのみフォーカスが移動可能である（airbnb)
  • 

• 独自の単一キーを利用したキーボードショートカットを割り当てている場合は、それを利用しないことが選択できるか？

  • 音声入力を利用している場合、単一キーでは誤った操作が行われやすくなる（普通の会話に反応してしまうなど）
  • より具体的には、以下の3つのいずれかを満たすことで誤操作の可能性を低減させているか？
    • ショートカットを解除できる
    • 任意のショートカットを再割り当てできる
    • そのショートカットをフォーカス中にのみ有効にできる
      • 例えば、リストボックスやドロップダウンメニューはフォーカス中にのみ操作可能になる
    • 以下はショートカットの有効無効を選択できる例(Gmail)
      

終わりに

たかがキーボード操作..ではなく、ある人にとっては唯一の操作方法である、ということを忘れずに開発していきたいですね