ウェブアクセシビリティ検証ツール「WAVE」のアップデート (2020年9月)

米国の非営利団体 WebAIM (Web Accessibility in Mind) が開発しているウェブアクセシビリティ検証ツール「WAVE」が、昨年 UI 刷新されましたが、このたび、さらにこれに対するマイナーアップデートが加えられました。以下、利用できるようになっています。

詳しくは WebAIM の記事「WAVE 3.1 Release」をご参照いただければと思いますが、以下、簡単にご紹介したいと思います。

主な改善点

YouTube 動画が存在する旨の検出

かねてから WAVE では、HTML5 の <video> および <audio> 要素が存在する場合、それらを「Alert (注意)」として検出することができていますが、今回のアップデートによって、YouTube の埋め込み動画が存在する場合も、検出できるようになりました。キャプション (字幕) のチェックを促す効果が期待できます。

ただし本記事執筆時点では、WAVE のウェブ版でのみこの機能は使用可能で、Chrome / Firefox 拡張機能版ではまだ使えないようです。

aria-label によるラベル付けの扱い

空のリンクやボタンで、aria-label によるラベル付がなされているものについては、「Errors (エラー)」として認識されなくなりました。

role="region" の扱い

汎用的な ARIA ランドマーク role="region"が存在する場合、当該ランドマークが aria-label または aria-labelledby によって適切にラベル付けされていれば、WAVE の 「Structure (情報構造)」パネルに表示され、アウトラインの一部として見ることができるようになりました。

<figure> 要素の検出

ページ内に <figure> 要素がある場合、それらを「Features (機能)」として検出するようになりました。画像の近くにキャプションが記述されている場合、そのキャプションが画像とセマンティックに紐付いていて、適切に <figcaption> 要素でマークアップされているかが、確認しやすくなりました。

実は3年ほど前、開発者の Jared Smith 氏に、<figcaption> とその親の <figure> を検出できると嬉しい、という要望を出していて、機能改善のリストには載せていただいていたので、個人的には実現して嬉しいです。

セレクトメニューのラベルの扱い

<select> 要素にラベル (<label> 要素または aria-label) がなくても、デフォルトの <option> が提示される場合、「Errors (エラー)」として認識されなくなりました。ただし「Alerts (注意)」としては検出されます。

個人的には、このケースはエラー扱いするほうがよいように思います。仮にデフォルトの <option> が実質的にラベルとして機能しているとしても、デフォルトでない <option> が選択された時点で、ラベルを担保するものが消えてしまうからです。

lang 属性の検証

かねてから WAVE では、ページ全体 (大元の <html> 要素) および個別要素の lang 属性を「Features (機能)」として検出することができていますが、今回のアップデートによって、属性値が正しいかどうかも検証できるようになりました。

リストとして適切にマークアップされていない箇所の検出

リストのように見えるものの、リストとして適切にマークアップされていない箇所を「Alerts (注意)」として検出するようになりました。具体的には、以下のような行頭記号がベタなテキストとして記述されている場合です。

* text
1. text
a. text
1) text
a) text
– text

とても面白い機能だと思いますが、日本語コンテンツの場合、全角の中黒点 (・) や黒丸 (●) を用いて箇条書きを表現するケースがよく見受けられるので、ゆくゆくはこういったものも検出されるようになればいいな、と思います。

このほかにも、コントラストチェックまわりが強化されたりなど、様々な改善がなされているようです。かれこれ10年以上愛用しているツールですが、今後の進化も楽しみにしたいと思います。

関連記事