タブUIのキーボード操作はユーザーに理解できるのか?
2019年7月7日(日曜日)
タブUIのキーボード操作はユーザーに理解できるのか?
公開: 2019年7月7日22時5分頃
先日このような記事を公開しました。
- なぜ「タブ」はスクリーンリーダーで読めない？ タブをアクセシブルにする (webtan.impress.co.jp)
いわゆるタブUIがキーボード操作できなかったので対応させたという話なのですが、結論としてはtabロールをつけない判断をしたということです。
WAI-ARIAのtabロールを使うと、WAI-ARIA対応するスクリーンリーダーに対して「タブ」という通知をすることができます。また、スクリプトで制御すれば、タブ切り替えのキーボード操作に対応させることも可能です。その対応をした場合どうなるのか、記事には以下のように書きました。
スクリーンリーダーでも「タブ」として操作可能にする
OSが提供するタブの機能をWebで再現する。基本的には望ましい対応だが、タブ操作に慣れていないユーザーは逆に混乱する可能性もある。また、さまざまな実装を行う技術が必要で、一定のコストがかかる。
「タブ操作に慣れていないユーザーは逆に混乱する可能性もある」と書きましたが、これについて少し補足しておきます
ここで想定しているタブのキーボード操作は、「コーディングWebアクセシビリティ: WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション (www.amazon.co.jp)」で紹介されているものです。具体的には、以下のような記述になっています。
- 左右の矢印キーを使って隣接するタブを切り替える（フォーカスを移す）。これは対応するタブパネルを表示するアクションでもあります。
- アクティブな（aria-selectedな）タブと対応するtabpanelとの間を、Tabキーで切り換え、Shift + Tabキーで戻れるようにする。
以上、コーディングWebアクセシビリティ 5-4 タブを1つください！ より
tabキーでタブにフォーカスしたら、タブの切り替えは左右の矢印キーで行います。その後、さらにtabキーを押すと、現在選択しているタブに対応するタブパネルに移動します。
これは、WindowsなどのOSが提供するタブUIのキーボード操作と対応しています。タブをタブとしてふるまわせる場合、OSのタブの動作と合わせるのは合理的ですし、合わせるほうが良いはずです。
しかしこの操作、一般的なWebのユーザーに使いこなせるのでしょうか。Webコンテンツの大半はtabキーでフォーカス移動、Enterキーで決定するだけで使えるようになっています。左右カーソルキーを使うのは、入力フォームくらいで、コンテンツ閲覧時にはほとんど使わない操作です。Webコンテンツ内でタブが出てきたとき、左右キーで切り替え操作をするものだと自然に気づいてもらえるものでしょうか。
※もっと言うと、最近は、OSの中でタブUIを見かけること自体が減ってきているようにも思います。
こういったことを考えた結果、タブをタブとしてふるまわせないほうが良いのではないか、と判断したのでした。
とはいえ、実際にユーザーが使えるかどうか試してみたわけではないので、もしかすると普通に使えるのかもしれません。機会があれば、ユーザーテストをして判断してみたいところではあります。
まとめ:
- タブをタブとしてふるまわせることは難しくない
- タブとしてふるまわせるなら、OSのタブの操作と合わせるべき
- しかしその操作はWebコンテンツではあまり一般的な操作ではないように思える
- なので、今回はあえてタブではないふるまいにした
- タブ操作がユーザーに伝わるのかどうかユーザーテストをしてみたい
- 「タブUIのキーボード操作はユーザーに理解できるのか?」にコメントを書く
関連する話題: アクセシビリティ
- 前(古い): ファミコン版ファイアーエムブレムと線形合同法
- 次(新しい): 字幕職人の朝は早い……