キーボード操作によるインタラクションをチェックする
ウェブコンテンツは、障害などの事情で精緻なマウス操作ができない人 (キーボード操作に依存せざるを得ないユーザー) でも利用可能でなければなりません。たとえば、[Tab] キーでフォーカスを移動し [Enter] キーで実行する、上下矢印キーでページをスクロールしたりセレクトメニューを選択する、といった具合です。
このキーボード操作によるインタラクションは、画面を目にしたユーザーの期待 (予測) と合致している必要があります。システムの UI が、ユーザーにとって想定外なフィードバックを返してしまうと (あるいは十分なフィードバックをユーザーに返さないと)、ユーザーはコントロールを失ったような感覚になり、安心してウェブコンテンツを利用することができなくなります。
昨今は、リッチな (動きの演出の凝った) ウェブページが増えてきて、結果的にキーボード操作への配慮がないがしろにされてしまうケースが多くなっている気がします。この記事では、アクセシビリティ検証の一環として、キーボード操作によるインタラクションをチェックする際のポイントをまとめてみました。
フォーカス位置が可視化されること
まず何よりも、キーボード操作によってフォーカスが今どこに当たっているのかが、視覚的に認識できなければ話になりません。敢えてフォーカスの枠線を消すようなデザインは避けましょう。(できれば、フォーカス位置を瞬時に認識できるようなデザインにしましょう。)
矢印キーでスクロールできること
スクロールハイジャック (scroll hijack) などによって、標準的なスクロール操作 (矢印キーによる画面のスクロール) を妨げるようなデザインは避けましょう。
ページレイアウトとフォーカス順序の関係が自然であること
[Tab] キーによってフォーカスを移動させたとき (スクリーンリーダー併用時は、矢印キーで読み上げ箇所を移動させたり、[H] キーで見出しジャンプをしたりなども含む)、その順序がユーザーから見て自然 (一般的には、上から下へ、左から右へ、という具合) であるようにしましょう。
ウェブページのレイアウト (CSS による配置) は HTML の情報構造の流れを崩さない形であるべきです。最近は Flexbox や CSS Grid Layout といった CSS 仕様で、order 属性による視覚的な並べ替えも容易にできますが、それによってフォーカス順序がユーザーの期待 (予測) とずれていないか、十分に確認しましょう。
マウスオーバー (hover) 依存でないこと
サブメニューやツールチップなど、マウスオーバー (hover) によってのみ情報にアクセスできるような実装は避けましょう。そのような情報は、キーボード操作ではもちろんのこと、昨今ポピュラーになっているタッチインターフェース (スマートフォンやタブレット) でもアクセスすることができません。
条件指定に伴う状況変化時のフォーカス制御
条件指定をすることで、インタラクティブに状況が変わるコンテンツがあります。たとえば、ソート (新しい/古い順、降順/昇順、値段が安い/高い順、といった並べ替え) やフィルタリング (チェックボックスやセレクトメニューなどでの絞り込み) などです。
条件指定の結果、表示されたアウトプットに対しては、その表示順のとおりに、フォーカスが当たるようにしましょう (JavaScript で DOM を上書きするなどして、ビジュアル表現とフォーカス順序を合致させます)。
また、条件指定の操作がなされた際は、フォーカスはその操作オブジェクトに当てたままにしましょう。同じ利用文脈の中で、条件指定をし直す際に便利だからです。条件指定後の結果表示でページ遷移 (ページの再読み込み) が発生する場合も、フォーカスは条件指定の操作をしたオブジェクトに当たっているのが望ましいです。
インレイ表示におけるフォーカス制御
コンテンツの追加読み込み、アコーディオン、ナビゲーションメニューの展開など、ページの中にコンテンツがインレイ (挿入表示) される場合、そのトリガーとなる操作オブジェクト (「もっと見る」ボタン、アコーディオンの見出し、ハンバーガーアイコンなど) にフォーカスが保持されるようにしましょう。
「もっと読む」ボタンが消えてコンテンツが追加読み込みされるような場合は、新しく追加されたコンテンツの先頭にフォーカスが当たるのが望ましいです。くれぐれも、フォーカスがリセットされてページ先頭からフォーカス移動をやり直さなければならない、という実装は避けましょう。
オーバーレイ表示におけるフォーカス制御
モーダルダイアログや画像スライドショーなど、ページの上にオーバーレイする (重なる) 形でコンテンツが表示される場合、そのオーバーレイの先頭にフォーカスが当たるようにしましょう。また、そこからのフォーカス移動は、オーバーレイ表示の範囲内に留まるようにし、背景側のページにフォーカスが移動しないようにしましょう。
オーバーレイを閉じる際は、[Tab] キーで「閉じる」ボタン (多くの場合、「×」印のアイコン) にフォーカスを当てて [Enter] キーで閉じられるようにするのに加えて、フォーカス位置に関わらず [Esc] キーでも閉じられるようにしておくとよいでしょう。
オーバーレイを閉じた後は、そのオーバーレイを開く元となったオブジェクトにフォーカスが当たるようにしましょう。画像スライドショーをオーバーレイ表示して、パネルを切り替えたうえで閉じた場合は、最後に切り替え表示したパネルに対応したオブジェクトにフォーカスが当たっているのが望ましいです。
カルーセルにおけるフォーカス制御
左右いずれかの矢じりボタンを押してカルーセルのパネル表示を切り替えた場合、押した矢じりボタンにフォーカスが保持されるようにし、そこから [Tab] キーを押すと、表示されている (隠れていない) パネルにフォーカスが当たるようにしましょう。
カルーセルによって一度に表示されるパネルがひとつだけの場合は、「About Carousels and ARIA Tabs (Web Axe)」にあるように、カルーセルに含まれるパネルを「タブ」に見立てて実装する、というのも一考です。
無限スクロールに伴う制約
スクリーンリーダーを併用しない場合、キーボード操作で特定の見出しやランドマークにジャンプすることが基本的にはできません。このため、ページ内に無限スクロールが実装されていると、それより下のエリアに [Tab] キーを使ってフォーカスを移動させることができなくなります。(いわゆる「キーボードトラップ」にはまった状態で、無限スクロールエリアから抜け出せなくなります。)
安易な無限スクロールの採用は避けたいところですが、どうしても UI を無限スクロールにしなければならない場合は、その下にはフォーカスが必要なオブジェクトを配置せず、せいぜい小さなフッター (コピーライト表示のみがあるくらい) を置く程度にしましょう。
動画/音声プレーヤーのキーボードによるコントロール
動画や音声再生の埋め込みプレーヤーがページ内に実装されている場合、キーボード操作によって、再生/停止、シークバー (再生位置)、音量、字幕 (クローズドキャプション) 表示、がコントロールできることを確認しましょう。各操作子が明示されていて、そこに [Tab] キーでフォーカスを当てて実行することができれば理想ですが、ビジュアルデザインの都合で操作子を明示できない場合は、次善策として一般的なショートカットキーによるコントロールだけでも構いません。ただしその場合は、ショートカットキーに不慣れなユーザーへの配慮として、ヘルプへのアクセスを設けるようにしましょう。
以上、チートシートとしてご参考になれば幸いです。