キーボード操作対応　［キーボード操作］

マウスで操作できる機能（リンクやフォーム・コントロール、ボタン、ウィジェットなど）は、キーボードだけでも操作できるか

解説

Webページにあるユーザーが操作可能な機能は、マウスだけでなく、キーボードでも同じように操作できるようにする必要があります。全てのユーザーがマウスのようなポインティングデバイスを用いて操作しているとは限らないからです。具体的には、例えば次のような機能が該当します。

  • リンク
  • フォーム・コントロール
  • ボタン
  • ウィジェット　など

例えば、次のようなHTML標準の要素を用いている場合には、ブラウザがキーボード操作をサポートしているので、特に何もしなくても、そのままでキーボード操作が可能です。

  • <a>要素（href属性のあるリンク）
  • <input>要素、<select>要素、<textarea>要素（フォーム・コントロール）
  • <button>要素（ボタン）

イベントハンドラを用いる場合には、マウス操作用のイベントだけでなく、キーボード操作用のイベントも併用する必要があります。ただ、onclickイベントについては、リンクの<a>要素やボタンの<input>要素、<button>要素で用いる場合には、ほとんどのユーザーエージェントはキーボード操作でもイベントを処理できるようになっているため、キーボード用のイベントを補完する必要はありません。

例えば、以下に挙げる例のように、HTML標準の要素を再定義したウィジェットのUIでは、まずrole属性を用いて標準のrole（役割）を上書きします。そして、tabindex属性を用いて、その要素がキーボード・フォーカスを受け取るようにして、JavaScriptなどでユーザーが操作時に用いるキーを割り当てる必要があります。

  • タブ（role=”tab” を設定した<li>要素）
  • スライダー（role=”slider”を設定した<a>要素）
  • アコーディオン（role=”tab”を設定した<h2>要素など）
  • メニューバー（role=”menuitem”を設定した<a>要素）

こういった主なウィジェットの標準的なキー操作方法は、W3Cの「WAI-ARIA 1.1 Authoring Practices」というドキュメントでウィジェットごとに示されているので参照するとよいでしょう。

事例 1. 虫眼鏡アイコンのボタン

サイト内検索のテキストフィールドと検索ボタンのパネルを開閉する虫眼鏡アイコンのボタンがある。

悪い例 1.

<a>要素（href属性なし）を用いて実装しているため、キーボード操作時にはフォーカスを受け取らないので、キーボードではボタンを押すことができない。

良い例 1.

button要素を用いているので、マウスでも、キーボードでも、タッチでも、問題なく操作できる。

事例 1. ボタンに<a>要素

グローバルナビゲーションのパネルを開閉するハンバーガーアイコンのボタンがある。

悪い例 1.

<a>要素（href属性なし）を用いて実装しているため、キーボード操作時にはフォーカスを受け取らないので、キーボードではボタンを押すことができない。

良い例 1.

<button>要素を用いているので、マウスでも、キーボードでも、タッチでも、問題なく操作できる。

事例 2. ウィジェットの<div>要素

HTML標準の要素としては定義されていないウィジェットのUIがある。

悪い例 2.

操作できる部分に全て<div>要素（href属性なし）を用いてUIを実装しているため、キーボード操作時にはフォーカスを受け取らないので、キーボードでは操作できない。

良い例 2.

<div>要素に適切なrole属性を割り当てて、tabindex属性の値を動的に切り替えるなどしており、キーボードでも問題なく操作できる。

WCAG 2.0の達成基準

2.1.1 キーボード（レベル A）
コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。ただし、その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除く。

WCAG 2.0「ガイドライン 2.1 キーボード操作可能」

参考