ウェブアクセシビリティ検証ツール「WAVE」のフォーカス順序表示機能

• 公開日 : 2023年9月6日
• カテゴリー : アクセシビリティ

米国の非営利団体 WebAIM (Web Accessibility in Mind) が開発しているウェブアクセシビリティ検証ツール「WAVE」で、Tab キーによるフォーカス順序を表示する機能が追加されていたので、ご紹介したいと思います。

検証対象のウェブページを開き、WAVE (Chrome 拡張機能または Firefox 拡張機能) を起動します。あるいは、ウェブ版 WAVE で検証対象のウェブページにアクセスします。WAVE の「Reference」タブと「Structure」タブの間に、新しく「Order」タブが追加されているので、それを選択して「Order」パネルを開きます。

WAVE の「Order」パネルには、Tab キーによるフォーカス対象の一覧が、フォーカス順序を示す番号とともに表示されます。一方、検証対象のウェブページには、WAVE が出力する各種アイコンと併せて、フォーカス順序の番号がオーバーレイ表示されます。WAVE の「Order」パネルの一覧にあるフォーカス対象のうちひとつをクリックすると、ウェブページ上のフォーカス順序番号表示の該当箇所が点滅によってハイライトされます。

このフォーカス順序番号表示は、以前ご紹介した Chrome 拡張機能「taba11y」と同様の機能と言えます。taba11y のほうがウェブページ上にオーバーレイされる番号表示が円形で目につきやすく、また各番号を順に線でつないで表示してくれるので (加えて、表示色、線の矢じりの有無、要素のハイライトなど、視認性のカスタマイズも可能)、フォーカス順序の流れを視覚的に捉えるには、WAVE よりも taba11y のほうが優れていると言えます。

しかし、WAVE には「Order」パネルがあることで、以下の利点があります。

• フォーカス対象一覧の各項目が、役割 (role) と名前 (name) で構成されている。たとえば「Link: お問い合わせ」という具合。視覚障害者が実際にスクリーンリーダーで Tab キーを押して取得する情報に近い感覚が得られる。
• フォーカス対象一覧が、いわば番号付きリストになっているので、検証対象のウェブページの中にフォーカス可能な箇所がいくつあるかを把握しやすい。

レポートやプレゼンテーション資料などを作る際には taba11y を、フォーカス順序だけでなく各フォーカス対象の役割 (role) や名前 (name) も含めて検証したい場合は WAVE を、という具合に使い分けてみるのもよいかと思います。