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

米国の非営利団体 WebAIM (Web Accessibility in Mind) が開発しているウェブアクセシビリティ検証ツール「WAVE」が、2019年10月にアップデートされました。

検証対象のウェブページ上で「どこが問題か」をグラフィカルにレイヤー表示してくれるので、とっつきやすい (開発者以外のプロジェクト関係者ともビジュアルで情報共有しやすい) のが特長です。私自身、かれこれ10年以上 WAVE を愛用していますが、アクセシビリティ評価の最初の段階で、粗くチェックする (見出し構造、画像の alt、箇条書きやテーブル、フォームのラベル、aria 属性など、問題になりそうなところをざっと見て当たりをつける) のに重宝しています。

今回の WAVE のアップデートでは、UI が大きく刷新され、一段と使いやすくなりました。詳しくは WebAIM の公式アナウンスをご参照いただければと思いますが、以下、簡単にご紹介したいと思います。

全体的な視認性の改善

WAVE 画面 (ブラウザウィンドウの左側に表示されるペイン) の表示幅が少し広くなり、シンプルなアイコンと相まって、全体的に視認性が向上しました。今回のアップデートで、各アイコンは SVG 化されており、画面表示を拡大しても見やすくなっています。

アップデートされて見やすくなった WAVE 画面。
WAVE 画面

コード表示

WAVE では、検証対象のウェブページ上で問題があったり注意が必要な箇所に、アイコンがレイヤー表示されますが、それらのアイコンをクリックする (そのうえで「CODE」をクリックする) ことで、該当箇所の HTML ソースコードを手早く開くことができるようになりました。問題箇所を詳細に確認 / 検討するのに便利です。

コード表示の例。検証対象のウェブページに表示されたアイコンをクリックして開くことができる。
コード表示

スタイルのオン/オフ

WAVE 画面の冒頭に「Styles」の ON / OFF スイッチが配置されています。これによって、検証中のウェブページのスタイル (CSS) を手早く無効化することができるようになりました。CSS が無効化されたウェブページ表示においても、アイコンのレイヤー表示は維持されます。

WAVE 画面で「Styles」のスイッチを OFF にすると、CSS が無効化される。
CSS を無効化した表示の例

Summary (概要) パネル

エラー (Errors) や注意 (Alerts) がいくつあるか、アクセシビリティ面で重要な機能 (Features) がいくつあるか、情報構造に関する要素 (Structural Elements) や WAI-ARIA に関する属性がいくつあるか、コントラスト比が低い箇所がいくつあるか、といった概要を把握できます。「View details (詳細を見る)」をクリックすると、次の「Details (詳細) パネル」が開きます。

Summary (概要) パネル。エラー (Errors) や注意 (Alerts) などがどのくらいあるかを把握できる。
Summary (概要) パネル

Details (詳細) パネル

エラー (Errors) や注意 (Alerts) の詳細を見ることができます。アクセシビリティ面で重要な機能 (Features)、情報構造に関する要素 (Structural Elements)、WAI-ARIA に関する属性、についてもここで詳細を見ることができます。各項目はチェックボックスによって表示 / 非表示を切り替えられるので、たとえば「エラーだけを見たい」といった使いかたも可能です。なお、このパネル内の各アイコンをクリックすると、検証対象のウェブページ上の該当箇所がハイライトされます。

Details (詳細) パネル。エラー (Errors) や注意 (Alerts) などの詳細を見ることができ、また、パネル内のアイコンをクリックすることで該当箇所を確認することができる。
Details (詳細) パネル

Reference (参考情報) パネル

検証対象のウェブページ上にレイヤー表示されているアイコンをクリックする (そのうえで「REFERENCE」をクリックする) ことで、そのアイコン内容に関する解説を見ることができます。

Reference (参考情報) パネル。検証対象のウェブページに表示されたアイコンをクリックして解説を見ることができる。
Reference (参考情報) パネル

Structure (情報構造) パネル

検証対象のウェブページのアウトライン (見出し要素、HTML5 のセクショニング要素、WAI-ARIA ランドマーク) を見ることができます。このパネル内の各アイコンをクリックすると、検証対象のウェブページ上の該当箇所がハイライトされます。

Structure (情報構造) パネル。検証対象のウェブページのアウトラインを見ることができ、また、パネル内のアイコンをクリックすることで該当箇所を確認することができる。
Structure (情報構造) パネル

Contrast (コントラスト) パネル

前景色と背景色のコントラストが低い箇所について、具体的なコントラスト比を見ることができます。このパネル内のエラーアイコンをクリックすると、検証対象のウェブページ上の該当箇所がハイライトされ、コントラスト比が表示されます。カラーコード (16進数) を入れ直したり、カラーピッカーや明度 (Lightness) スライダーを使って、配色の改善案を検討することができます。また、「Desaturate page (ページの彩度を下げる)」をクリックすることで、グレースケール表示ができます。

Contrast (コントラスト) パネル。パネル内のエラーアイコンをクリックすることで、該当箇所とそのコントラスト比を見ることができる。
Contrast (コントラスト) パネル

検証項目の拡充

今回の WAVE のアップデートでは、検証対象のウェブページの情報構造として、見出し要素だけでなく、新たにセクショニング要素やランドマークもチェックできるようになりました。併せて、WAI-ARIA まわりの検証も拡充されています (ライブリージョン、aria-describedby、aria-label、aria-expanded、aria-hidden、など)。また、レイアウトテーブルや longdesc 属性を含む画像が、注意 (Alerts) として抽出されるなどのアップデートも施されています。


個人的には、今回のアップデートによって、コード表示が可能になったり、WAI-ARIA まわりの検証が拡充したりなど、ますます「かゆいところに手が届く」ツールに進化したな、という印象です。下記のリンクを辿ると利用できますので、ご興味ありましたらお試しいただければと思います。

なお、現時点では UI は英語のみとなっています (グラフィカルでとっつきやすいツールではありますが、プロジェクト関係者間で共用するツールとして見た場合、言語が壁になってしまうことは残念ながらあります)。もし日本語ローカライズできる余地があれば、コントリビュートしてみたいな、と思っています。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加