ここから本文です

なぜ「タブ」はスクリーンリーダーで読めない? タブをアクセシブルにする

6/26(水) 7:06配信

Web担当者Forum

ユーザーテストの結果、いくつかの問題点が明らかになりました。問題点の多くは、ラベルの文言の変更、代替テキストの調整といった微修正レベルで対応できるものでしたが、中に一つ大物案件がありました。それが、タブの問題です。

 

何が問題かおさらい

ユーザーテストでは、スクリーンリーダーでタブを読む際に問題が起こりました(ユーザーテストの詳細は、第4回をご覧ください)。問題となった動きをおさらいすると、次の通りです。

・「料金表」というタブにフォーカスを合わせることはできた(「料金表」というリンクとして伝わる)
・リンクを選択すると、見た目の上では下部のコンテンツが切り替わり、料金表が表示される
・しかし、スクリーンリーダーでは切り替わったことが通知されず、リンクを選択しても何も起きないように感じられる
・何かが切り替わったと予想できても、切り替わったコンテンツに移動することが困難

 

問題はスクリーンリーダーで「タブ」がうまく扱えないこと

この問題を一言でまとめると、スクリーンリーダーで「タブ」がうまく扱えていない、ということになります。なぜこのタブは、スクリーンリーダーでうまく扱えないのでしょうか。

実は、Webで使われているタブの多くは、スクリーンリーダーでうまく扱うことができません。その原因は、そもそもHTMLが「タブ」というインターフェイスをサポートしていないことにあります。


■ 「テキスト入力欄」はHTMLでサポートされている

HTMLでは、「リンク」はもちろんのこと、「テキスト入力欄」や「ラジオボタン」といったフォーム部品も用意されています。HTMLにこのようなフォーム部品を配置すると、見た目や動作がきちんと再現されるのはもちろんのこと、気づかれにくい細かい機能も提供されます。

たとえばテキスト入力欄の場合、マウスでクリックして文字を入力できるようになっていますが、そのほかにも以下のような機能があります。

・キーボード操作でフォーカスを当てることができる
・入力欄に文字をペーストすることができる
・入力欄の文字をコピーすることができる
・スクリーンリーダーでは、テキスト入力欄であることを通知してくれる
・スクリーンリーダーでは、対応するラベルが指定されていれば読み上げられる

こうしてみると、意外と多くの機能があることがわかります。しかし作り手は通常、これを意識する必要はありません。HTMLのinput要素を配置すれば、ブラウザが自動的にこれらの機能を提供してくれるのです。

このように、HTMLがもともとサポートしているフォーム部品の場合、作り手が普段意識していないような、さまざまな機能がブラウザによって提供されます。そのため、作り手が特別なことをしなくても、一定のアクセシビリティが確保されるのです。


■ 「タブ」はHTMLでサポートされていない

世のWebページでは、タブらしい見た目のインターフェイスがたくさんあります。よく使われる機能のように思えますが、実は残念ながら、HTMLには「タブ」に相当する部品は用意されていません。

Web上のタブらしきものは、実際にはタブではない要素を使って実現されています。その上で、CSSやJavaScriptを駆使することで、見た目と動きをタブ風にしているにすぎないのです。

この場合、見た目の上では問題なく動作しても、作り手が意識していない機能が抜けてしまうことがあります。Web上のタブではなく、OSが提供するタブには、実は以下のような機能があります。

・キーボード操作でタブにフォーカスを当てることができる
・スクリーンリーダーでは、タブであることを通知してくれる
・タブにフォーカス後、キーボードの左右キーでタブを切り替えることができる
・タブ切り替え後、切り替わった内容に移動できる

Web上でタブを再現しても、これらの機能は自動的には提供されません。実装者が意図的に実装しなければならないのです。つまり、意識してアクセシビリティを担保しない限り、タブをスクリーンリーダーで読むことは難しいと言えます。弁護士ドットコムのサイトにあったタブも同様で、特別な対応が行われていないものでした。

 

1/4ページ

最終更新:6/26(水) 7:06
Web担当者Forum

こんな記事も読まれています

あなたにおすすめの記事

Yahoo!ニュースからのお知らせ