Accessibility Visualizerを用いたアクセシビリティー・チェック
Accessibility Visualizerは、Webページのアクセシビリティーを向上するために重要な、しかし視覚的には見えない情報を、Webページ上にオーバーレイ表示するブラウザー拡張機能です。
画像の代替テキスト、見出しレベル、フォーム・コントロールのラベル、テーブルの構造、リスト、言語属性、WAI-ARIA属性などの情報を、ページを見ながら確認することができます。また、role="status"、role="alert"、role="log"、aria-live属性、output要素によって作成されるARIAライブ・リージョンの内容の変化を、視覚的な表示として確認することもできます。
これらの情報は、これまでブラウザーの開発者ツールでアクセシビリティー・ツリーを読み解くか、ソース・コードを読み解くか、スクリーン・リーダーで実際に操作しなければ確認できませんでした。Accessibility Visualizerを使うことで、こうした知識や経験がなくても、コーディング時や動作確認時にこれらの情報を確認できるようになります。
Accessibility Visualizerを用いたチェックの位置づけ
Accessibility Visualizerが表示する情報は補助的なものです。明らかに問題のある箇所についてはエラーや警告が表示されますが、機械的に発見できる問題は限られていて、表示された名前（ラベル）や見出しレベルなどが適切かどうかは、表示を見た人間が判断する必要があります。
また、Accessibility Visualizerを用いたチェックは、スクリーン・リーダーなどの実際の支援技術による確認を完全に不要にするものではありません。スクリーン・リーダーを用いて行う必要があるチェックについては、NVDAを用いたチェックの実施方法にあるとおり、NVDAによる確認を実施してください。
一方で、スクリーン・リーダーの操作に習熟していなくても、代替テキストやラベルの有無、ページの構造などを画面上で手軽に確認できることがAccessibility Visualizerの利点です。開発中の動作確認に組み込むことで、問題を早い段階で発見しやすくなります。axe DevToolsを使用したアクセシビリティー・チェックなどの他のチェック・ツールや、スクリーン・リーダーによる確認と併用すると良いでしょう。
事前準備
インストール
Accessibility Visualizerは、Google Chrome向けにはChromeウェブストアから、Mozilla Firefox向けにはFirefox Add-Onsからインストールできます。
インストールすると、ブラウザーの拡張機能メニュー内にAccessibility Visualizerの項目が出現します。よく使う場合は、ブラウザーのツールバーへ固定表示することをお勧めします。ツールバーに固定表示すると、Accessibility Visualizerのアイコンが常時表示されます。
ポップアップの表示
拡張機能メニュー内のAccessibility Visualizerの項目、またはツールバーに固定表示したAccessibility Visualizerのアイコンをクリックすると、Accessibility Visualizerのポップアップが開きます。このポップアップで、表示する情報の選択などの設定を行います。
ポップアップ内には「有効」チェックボックスがあります。チェックを外しておくと、Webページ上に情報の表示を行わないようになります。
なお、設定はドメインごとに保存されるため、サイトごとに適した表示設定を維持することができます。
基本的な使い方
チップの表示
ポップアップ内の「チップを表示」チェックボックスにチェックを入れると、閲覧中のWebページ上に「チップ」と呼ばれる小さなラベルとして、さまざまな情報が表示されるようになります。
チップには複数の種類があり、色とアイコンで区別されます。チェックの際に特に重要なのは以下の3種類です。
- 名前
緑色で、人型のアイコンとともに表示されます。その要素の「アクセシブルな名前（Accessible Name）」、すなわち画像の代替テキストやフォーム・コントロールのラベル、リンクやボタンのテキストとして、スクリーン・リーダーなどの支援技術に伝わる内容が表示されます。
- 警告
黄色で、警告の三角形のアイコンとともに表示されます。問題があるかもしれない、注意して確認するべき箇所を示しています。
- エラー
赤色で、エラーの三角形のアイコンとともに表示されます。確実に問題のある箇所を示していて、修正が必要です。
このほかに、見出しレベル、ランドマークの種類、テーブルのサイズやセルの位置、リストの項目数、言語、ロール、WAI-ARIA属性などを表すチップがあります。
「インタラクティブ」チェックボックスにチェックを入れると、マウス・オーバーするまでチップが控えめな表示になります。チップが多く表示されてページが見づらい場合に活用すると良いでしょう。
チップの表示位置はしばしばズレることがあります。その場合は、ポップアップ内の「再実行」ボタンを押してください。
プリセット
チップとして表示する対象は、ポップアップ内のチェックボックスで個別に選択できるほか、プリセット機能で簡単に切り替えることができます。
基本：見出し、画像、フォームコントロール、ボタン、リンク、ページ、言語、WAI-ARIA情報を表示
構造：見出し、セクション、ページ、言語情報を表示
コンテンツ：画像、リンク、テーブル、リストを表示
カスタム：表示する情報を自由に選択
ライブ・リージョンのアナウンス
ポップアップ内の「ライブリージョンをアナウンス」にチェックを入れていると、ARIAライブ・リージョンの内容に変化があった場合に、その内容が画面中央付近に大きく表示されるようになります。
ARIAライブ・リージョンは、スクリーン・リーダーなどの支援技術のユーザーに対して画面の状態の変化などを伝えるために使われるものです（ステータス・メッセージとスクリーン・リーダーを参照）。この機能を使うと、スクリーン・リーダーを使わずに、ライブ・リージョンによる通知が意図したとおりに発生しているかを確認することができます。
アナウンスの表示中は、以下のキー操作ができます。
- Shift
一時停止/再開の切り替え
- Ctrl
表示されているアナウンスをクリア
表示のカスタマイズ
チップやライブ・リージョンのアナウンスの表示方法は、ポップアップ内の設定でカスタマイズできます。チップの不透明度や文字サイズ、ライブ・リージョンのアナウンスの不透明度、文字サイズ、表示時間などを調整できるので、確認対象のページに合わせて見やすい設定にすると良いでしょう。
チェックでの活用方法
ここでは、チップとして表示される情報ごとに、アクセシビリティー・チェックで確認するべきポイントを説明します。
画像
「画像」のチェックが入っているとき、img要素、svg要素、role="img"属性をもつ要素に対してチップが表示されます。
名前のチップで、画像の代替テキストが表示されます。画像の代わりに表示されてもほとんど同じ情報が伝わるような、簡潔な説明になっているかを確認してください。（テキストによる画像の説明を参照）
img要素でalt=""としている場合には、「alt属性が空（alt=""）」という警告チップが表示されます。この状態の画像は、スクリーン・リーダーなどの支援技術では存在を知覚できません。その画像が装飾目的で配置されている場合以外は、代替テキストを付ける必要があります。代替テキストの指定がなく、
aria-hiddenまたはalt=""でもない場合、「alt属性なし」または「名前（ラベル）なし」のエラーチップが表示されます。この場合は修正が必要です。
見出し
「見出し」のチェックが入っているとき、h1～h6要素と、role="heading"属性をもつ要素に対してチップが表示されます。
「見出し」のチップで、見出しのレベルが表示されます。ページの構造に対して適切なレベルになっているかを確認してください。（適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセスを参照）
role="heading"属性をもつ要素でaria-level属性が存在しない場合、「見出しレベルなし」の警告チップが表示されます。aria-level属性を明示的に指定することが推奨されます。見出しに名前が与えられていない場合、「名前（ラベル）なし」のエラーチップが表示されます。この場合は修正が必要です。
フォーム・コントロール
「フォームコントロール」のチェックが入っているとき、input要素（type属性がhidden、button、submit、reset、imageのものを除く）、textarea要素、select要素、label要素、fieldset要素、role属性にtextbox、combobox、checkbox、radio、switch、menuitemcheckbox、menuitemradioのいずれかが指定されている要素に対してチップが表示されます。
名前のチップで、フォーム・コントロールのラベルが表示されます。抜け漏れの有無や適切なラベルになっているかを確認してください。（フォーム・コントロールのラベル付けの必要性を参照）
名前が与えられていない場合、「名前（ラベル）なし」のエラーチップが表示されます。この場合は修正が必要です。
標準ではフォーカスできない要素で
tabindex属性が指定されていない場合、「フォーカスできない」のエラーチップが表示されます。この状態ではキーボードで操作できないため、修正が必要です。ラジオ・ボタンのグループ化に問題がある場合、「name属性なし」や「グループ化されていないラジオボタン」のエラーチップが表示されます。この状態ではキーボードによる選択操作が正しく行えないため、修正が必要です。
label要素で、関連付けられたフォーム・コントロールが存在しないか非表示になっている場合には、「入力欄等と紐付けされていない」の警告チップが表示されます。チェックボックスやラジオ・ボタンにスタイルを当てるためにdisplay:noneなどで非表示にしている場合、キーボードで操作できなくなっている可能性が高いため、確認が必要です。
ボタンとリンク
「ボタン」のチェックが入っているとき、button要素、type属性がbutton、submit、reset、imageのいずれかであるinput要素、role="button"属性をもつ要素に対してチップが表示されます。「リンク」のチェックが入っているとき、a要素、area要素、role="link"属性をもつ要素に対してチップが表示されます。
名前のチップで、ボタンのラベルやリンクのテキストが表示されます。それを読むだけで挙動やリンク先を予測できる内容になっているかを確認してください。（リンク先の内容を推測しやすくするを参照）
名前が与えられていない場合、「名前（ラベル）なし」のエラーチップが表示されます。この場合は修正が必要です。
role="button"属性をもつ、標準ではフォーカスできない要素でtabindex属性が指定されていない場合、「フォーカスできない」のエラーチップが表示されます。この状態ではキーボードで操作できないため、修正が必要です。a要素やarea要素でhref属性がない場合、「href属性なし」の警告チップが表示されます。この状態の要素にクリックによるインタラクションが設定されている場合、キーボードで操作できなかったり、支援技術のユーザーが操作対象であることを認識できなかったりするおそれがあるため、修正が必要です。
セクション
「セクション」のチェックが入っているとき、article、section、nav、aside、main、form、searchの各要素と、role属性にarticle、banner、complementary、contentinfo、main、form、navigation、region、search、applicationのいずれかをもつ要素に対してチップが表示されます。
これらの要素は、ページのコンテンツをセクションに分割するために使用され、支援技術のユーザーがページの構造を理解し、不要なコンテンツをスキップするのに役立ちます。（適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセスを参照）
ランドマークのチップで、ランドマークの種類が表示されます。その役割が適切かどうかを確認してください。
アクセシブルな名前が与えられている場合、名前のチップでセクションの名前が表示されます。その名前が適切かどうか、また、ページ内に同名で同じ役割をもつランドマークが存在しないことを確認してください。
テーブル
「テーブル」のチェックが入っているとき、table要素および関連する要素に対してチップが表示されます。
「表の大きさ」のチップでテーブルの行数と列数が、「位置」のチップで各セルの位置が表示されます。
「表見出し」のチップで、セルに対応するテーブル・ヘッダー（
th要素）の内容が表示されます。特に複雑なテーブルの場合、ヘッダーとセルが適切に関連付けられているかを確認してください。
リスト
「リスト」のチェックが入っているとき、ul、ol、dl要素とそれらのリスト項目に対してチップが表示されます。
リストの種類や項目数が表示されます。リストとして表現されるべきコンテンツが適切にマークアップされているかを確認してください。
言語
「言語」のチェックが入っているとき、lang属性をもつ要素に対してチップが表示されます。
ページ全体の言語設定（
html要素のlang属性）や、部分的に言語が切り替わる箇所の指定を確認できます。言語が適切に設定されているかを確認してください。言語の指定は、スクリーン・リーダーが正しい発音で読み上げるために重要です。（lang 属性と音声読み上げを参照）
WAI-ARIA
「WAI-ARIA」のチェックが入っているとき、WAI-ARIA属性をもつ要素に対してチップが表示されます。
WAI-ARIA属性のチップで、要素に適用されている属性の名前と値が表示されます。
aria-expandedやaria-selectedなどの属性が適切に設定され、操作に応じて期待どおりに変化するかを確認してください。aria-hidden="true"属性をもつ要素には警告チップが表示されます。この属性が指定されている要素は、スクリーン・リーダーなどの支援技術のユーザーには知覚されません。装飾目的の要素以外で、視覚的に見えているのにaria-hiddenとなっている要素が存在する場合は、修正が必要です。
ライブ・リージョン
前述の「ライブ・リージョンのアナウンス」機能を使うと、動的に変化するコンテンツについて、以下のような点を確認できます。
ステータス・メッセージなどの動的な変化が、ARIAライブ・リージョンによって通知されること
意図しない内容や、過剰な頻度での通知が発生していないこと
使用上の注意点
チップの表示位置はしばしばズレることがあります。その場合は、ポップアップ内の「再実行」ボタンを押してください
チップやアナウンスを表示していると動作が重くなってしまうWebサイトがあります。そのようなサイトを閲覧する場合は、「チップを表示」「ライブリージョンをアナウンス」のチェックを外してください
フレームやShadow DOMを使用している箇所では、技術的な制約からチップやライブ・リージョンの表示ができない場合があります
インタラクティブモードでは、Webページのマウス操作を妨げてしまう場合があります
繰り返しになりますが、Accessibility Visualizerによるチェックは、スクリーン・リーダーなどの実際の支援技術による確認を代替するものではありません。スクリーン・リーダーを用いたチェックの実施方法も参照してください