Accessibility Visualizer ユーザーズガイド

はじめに

Accessibility Visualizerに興味を持っていただき、ありがとうございます。 Accessibility Visualizerは、Webページのアクセシビリティを向上するために重要だが、視覚的に見えない情報を可視化することを目的とした、ブラウザ拡張機能です。現在はGoogle Chrome向けに、Chromeウェブストア、Firefox向けにFirefox Add-Onsで配布しています。

Accessibility Visualizerでできること

画像の代替テキスト、見出しレベル、フォームのラベル付け、テーブル構造、リスト要素、言語属性、WAI-ARIA情報などを、Webページにオーバーレイして表示することができます
明らかに問題のある状態や注意深く使用するべき状態については、警告やエラーメッセージを表示します
role="status" role="alert" role="log" aria-live属性、 <output> 要素によって作成されるライブリージョンの変化を視覚的な表示として通知します
プリセット機能により、用途に応じて表示する情報を簡単に切り替えることができます
ドメインごとに異なる設定を保存し、サイトに適した表示設定を維持することができます

これまで、これらの情報は、ブラウザの開発者ツールでアクセシビリティツリー（アクセシビティオブジェクトモデル）を読み解くか、ソースコードを読み解くか、スクリーンリーダーで実際に操作する以外に正しく実装されているかを確認する方法がありませんでした。

アクセシビリティツリーを読み解くのも、ソースコードを読み解くのも知識を必要とします。スクリーンリーダーはほとんどの人にとって馴染みがなく、独特の操作方法に戸惑うでしょう。これらの情報を可視化することで、それらの障壁をなくし、誰もがコーディング時や動作確認時にアクセシビリティを意識できるようにすることが、Accessibility Visualizerの狙いです。

注意: Accessibility Visualizerは、スクリーンリーダーなどの 実際の支援技術による確認作業を完全に不要にするものではありません 。Accessibility Visualizerの表示する情報は補助的なものであり、重大な問題を見落としてしまう可能性があります。Web開発の作業フローへの導入には、 スクリーンリーダーによる確認を併用することをお勧めします。

Accessibility Visualizerの使い方

Accessibility Visualizerをインストールすると、拡張機能メニュー内にAccessibility Visualizerの項目が出現します。よく使う場合は、ブラウザのツールバーへ固定表示することをお勧めします。ツールバーに固定表示すると、Accessibility Visualizerのアイコンが常時表示されます。

拡張機能メニューを開いている状態のスクリーンショット

拡張機能メニュー内にAccessibility Visualizerの項目、またはツールバーに固定表示したAccessibility Visualizerのアイコンをクリックすると、Accessibility Visualizerのポップアップが開きます。

Accessibility Visualizerのポップアップを開いたスクリーンショット

ポップアップ内に、「有効」チェックボックスがあります。チェックを外しておくと、Webページ上に情報の表示を行わないようになります。

チップの表示

「チップを表示」チェックボックスにチェックを入れると、閲覧中のWebページに「チップ」として、さまざまな情報が表示されるようになります。

「駒瑠市」のロゴと、「地球温暖化防止課」の見出し。ロゴは緑色の点線で囲まれ、「alt属性のない画像」の赤色のチップが被さっている。ロゴと見出しは青色の点線で囲まれ、その上に「見出しレベル1」の青色のチップと、「地球温暖化防止課」の緑色のチップが表示されている

（スクリーンショットは、駒瑠市〜アクセシビリティ上の問題の体験サイト〜の「たいへんな駒瑠市でチップを表示したもの）

「インタラクティブ」チェックボックスにチェックを入れると、チップにマウスオーバーするまでチップが控えめな表示になります。

プリセット

チップを表示する対象は、プリセット機能で簡単に切り替えることができます。

基本プリセット: 見出し、画像、フォームコントロール、ボタン、リンク、ページ、言語、WAI-ARIA情報を表示
構造プリセット: 見出し、セクション、ページ、言語情報を表示
コンテンツプリセット: 画像、リンク、テーブル、リストを表示
カスタム: 表示する情報を自由に選択できます

ライブリージョンのアナウンス

ポップアップ内の「ライブリージョンをアナウンス」にチェックを入れていると、ARIAライブリージョンに変化があった場合に、その内容が画面中央付近に表示されるようになります。これは、スクリーンリーダー等の支援技術のユーザーに対して、画面の状態の変化などを伝えるために使われるライブリージョンの機能を、スクリーンリーダー等を使わずに体験・動作を確認するための機能です。

ブラウザの中央に大きく「今すぐダウンロード！あなたのPCを高速化！」と表示されている

（スクリーンショットはaria-live がうるさい (ARIA-Barriers)で、アナウンスを表示したもの）

ライブリージョンの操作

Shiftキー: 一時停止/再開の切り替え
Ctrlキー: 表示されているアナウンスをクリア

表示のカスタマイズ

Webページ上に表示されるチップやライブリージョンのアナウンスの表示方法は、ポップアップ内の設定でカスタマイズできます。

インタラクティブモードでラベルを隠す: インタラクティブモード時に、マウスオーバーするまでチップはアイコンだけの表示になります
チップの不透明度: スライダーで0-100%（デフォルト30%）まで調整可能
チップの文字サイズ: 数値で指定（デフォルト10px）
ライブリージョンの不透明度: スライダーで0-100%（デフォルト50%）まで調整可能
ライブリージョンの文字サイズ: 数値で指定（デフォルト48px）
アナウンス最長の長さ: 表示時間の上限を秒数で指定（デフォルト10秒）
スピード: 1文字あたりの表示時間を秒数で指定（デフォルト0.5秒）

使用上の注意点

チップの表示位置はしばしばズレることがあります。その場合は、ポップアップ内の「再表示」ボタンを押してください
チップやアナウンスを表示していると動作が重くなってしまうWebサイトがあります。そういったサイトを閲覧する場合は「チップを表示」「ライブリージョンをアナウンス」のチェックを外してください
- 一部、どうしても重くなってしまうサイトについては、拡張機能の開発者側で動作しないようにする対応をすることがあります
フレームやShadow DOMを使用している箇所では、技術的な制約からチップやライブリージョンの表示ができない場合があります
インタラクティブモードでは、Webページのマウス操作を妨げてしまう場合があります

チップ表示の詳細

ここでは、チップで表示される情報について、確認するべきポイントを簡単に説明します。

チップには、以下の種類があります

名前: 緑色で、人型のアイコンとともに表示されます
警告: 黄色で、警告の三角形のアイコンとともに表示されます。問題があるかもしれない箇所を示しています
エラー: 赤色で、エラーの三角形のアイコンとともに表示されます。確実に問題のある箇所を示しています
説明: 灰色で、書類のアイコンとともに表示されます
見出し: 青色で、ブックマークのアイコンとともに表示され、見出しレベルを表します
テーブルヘッダー: 青色で、テーブルのアイコンとともに表示され、対応するテーブルヘッダーの内容を表します
ランドマーク: 黄緑色で、旗のアイコンとともに表示され、ランドマークの種類を表します
リストの種類: 黄緑色で、丸で囲まれたリストのアイコンとともに表示されます。リストの種類を表します
リスト: オレンジ色で、リストのアイコンとともに表示されます。リストの項目数を表します
リンクターゲット: オレンジ色で、「他のタブで開く」のアイコンとともに表示されます
テーブルのサイズ: オレンジ色で、テーブルのアイコンとともに表示され、テーブルの行数と列数を表します
テーブルセルの位置: オレンジ色で、ピンのアイコンとともに表示され、テーブル内のセルの位置を表します
言語: 黄色で、文字のアイコンとともに表示されます
ページタイトル: ウィンドウのアイコンとともに表示されます
ロール: ピンク色で、荷札のアイコンとともに表示されます
要素: 紫色で、 HTMLタグを模した </> のアイコンとともに表示されます
ステータス: オレンジ色で、情報アイコンとともに表示されます
WAI-ARIA属性: オレンジ色で、歯車のアイコンとともに表示されます

「名前」は「アクセシブルな名前 (Accessible Name)」、「説明」は「アクセシブルな説明 (Accessible Description)」の値が表示されます。これらは、スクリーンリーダー等の支援技術のユーザーが、その要素を認識するために使われる情報です。

画像

「画像」のチェックが入っているとき、<img> 要素、<svg> 要素、role="img" 属性をもつ要素に対してチップを表示します。

名前チップで、いわゆる代替テキスト（altテキスト）が表示されます
- 画像の代替テキストは、画像がのかわりに表示されてもほとんど同じ情報が伝わるような内容で、簡潔な説明であることが望ましいとされています
- <img> 要素の場合、通常は alt 属性が使われます
- <svg> 要素の場合、<title> 要素や aria-label 属性、 aria-labelledby 属性が使われることがあります
- role="img" 属性をもつ要素の場合、aria-label 属性、 aria-labelledby 属性が使われることがあります
<img> 要素で alt="" としている場合には、「alt=""の画像」という警告チップが表示されます。この状態の画像は、スクリーンリーダー等の支援技術では存在を知覚できません。この画像が装飾目的で配置されている場合以外は、代替テキストを付けてください
代替テキストの指定がなく、aria-hiddenまたは alt="" でもない場合、 「alt属性のない画像」または「名前（ラベル）なし」のエラーチップ が表示されます。この場合は、 修正が必要です

ボタン

「ボタン」のチェックが入っているとき、<button> 要素、 type 属性が button submit reset image の <input>要素、 role="button" 属性をもつ要素に対してチップを表示します。

名前のチップで、ボタンのラベルが表示されます。抜け漏れの有無や適切なラベルになっているかを確認してください。
名前が与えられていない場合、 「名前（ラベル）なし」のエラーチップ が表示されます。この場合は、スクリーンリーダー等の支援技術ではボタンの挙動を予測できません。 修正が必要です
role="button" 属性をもつ、標準ではフォーカスできない要素で、tabindex 属性が指定されていない場合、 「フォーカスできない」のエラーチップ が表示されます。この状態ではキーボードで操作できないため、 修正が必要です

リンク

「リンク」のチェックが入っているとき、<a> 要素、 <area> 要素、 role="link" 属性をもつ要素に対してチップを表示します。

名前のチップで、リンクのテキストが表示されます。抜け漏れの有無や適切なテキストになっているかを確認してください。
リンクの名前が空になってしまう場合、 「名前（ラベル）なし」のエラーチップ が表示されます。この場合は、スクリーンリーダー等の支援技術ではリンクの目的を知覚できません。 修正が必要です
<a> 要素や <area> 要素で href 属性がない場合、ブラウザはリンクとして扱いません。「href属性なし」の警告チップが表示されます。この状態の <a> 要素にクリックなどによるインタラクションが設定されている場合、キーボード操作ができなかったり、スクリーンリーダー等の支援技術のユーザーが操作対象であることを認識できないおそれがあります。 その場合は修正が必要です

フォームコントロール

「フォームコントロール」のチェックが入っているとき、type 属性が hidden button submit reset image 以外の <input> 要素、<textarea>要素、 <select> 要素、 <label> 要素、<fieldset>要素、 role 属性に textbox combobox checkbox radio switch menuitemcheckbox menuitemradio のいずれかが指定されている要素に対してチップを表示します。

名前のチップで、フォームコントロールのラベルが表示されます。抜け漏れの有無や適切なラベルになっているかを確認してください。
- 通常、<input> <select> <textarea> 要素には、<label> 要素が使われます
名前が与えられていない場合、 「名前（ラベル）なし」のエラーチップ が表示されます。この場合は、スクリーンリーダー等の支援技術ではフォームコントロールの目的を知覚できません。 修正が必要です
標準ではフォーカスできない要素で、tabindex 属性が指定されていない場合、 「フォーカスできない」のエラーチップ が表示されます。この状態ではキーボードで操作できないため、 修正が必要です
ラジオボタン (<input type="radio">) で、同じ name 属性がない場合には、 「name属性なし」のエラーチップ が、同じ <form> 要素内または同じドキュメント内に同じ name 属性をもつラジオボタンがない場合には、「ラジオボタングループなし」のエラーチップ が表示されます。これらはラジオボタンのグループ化ができておらず、キーボード操作で選択ができなかったり、Tabキーでの移動が予測できなかったりして、その結果としてどのラジオボタンが同じグループなのかを認識できなかったりするおそれがあります。 修正が必要です
<label> 要素で、関連付けられたフォームコントロールが存在しない、または非表示になっている場合には 「フォームコントロールなしのラベル」の警告チップ が表示されます。特にチェックボックスやラジオボタンなどにスタイルをあてるために非表示にしている場合、キーボードで操作できない可能性が高くなります。display:none, visibility:hidden などを使用していないかを 確認してください

見出し

「見出し」のチェックが入っているとき、<h1> から <h6> 要素と、 role="heading" 属性をもつ要素に対してチップを表示します。

見出しのレベルのチップで、見出しのレベルが表示されます。適切なレベルになっているかを確認してください。
- <h1> から <h6> 要素は、見出しのレベルを示すために使われます
- role="heading" 属性をもつ要素では、見出しのレベルを示すために aria-level 属性が使われます
role="heading" 属性をもつ要素で、 aria-level 属性が存在しない場合、 「見出しレベルなし」のエラーチップ が表示されます。この場合は、スクリーンリーダー等の支援技術では見出しのレベルを知覚できません。 修正が必要です
名前のチップで、見出しのテキストが表示されます。抜け漏れの有無や適切なテキストになっているかを確認してください。
見出しに名前が与えられていない場合、 「名前（ラベル）なし」のエラーチップ が表示されます。この場合は、スクリーンリーダー等の支援技術では見出しを知覚できません。 修正が必要です

セクション

「セクション」にチェックが入っているとき、 <article> 要素、<section> 要素、<nav> 要素、<aside> 要素、<main> 要素、<form> 要素、<search> 要素、role属性にarticle、 banner、 complementary、 contentinfo、 main、 form、 navigation、 region、 search、 application をもつ要素に対してチップを表示します。

これらの要素は、ページのコンテンツをセクションに分割するために使用され、支援技術のユーザーがページの構造を理解し、不要なコンテンツをスキップするのに役立ちます。

ランドマークのチップでは、role の属性値に相当するランドマークの名前が表示されます。表示されている場合には、その役割が適切かどうかを確認してください
何らかの方法でアクセシブルネームが与えられている場合、名前のチップで、セクションの名前が表示されます。表示されている場合には、その名前が適切かどうかを確認してください。また、ページ内に同名で同じ役割をもつランドマークが存在しないことを確認してください。

ページ

「ページ」にチェックが入っているとき、ページ全体やドキュメントレベルの情報についてチップを表示します。

ページタイトルが適切に設定されているかを確認できます
ドキュメント全体の構造に関する情報が表示されます

言語

「言語」にチェックが入っているとき、lang 属性をもつ要素に対してチップを表示します。

要素のチップで、言語コードが表示されます
ページ全体の言語設定（<html lang="...">）も確認できます
言語が適切に設定されているかを確認してください。言語設定は、スクリーンリーダーが正しい発音で読み上げるために重要です

テーブル

「テーブル」にチェックが入っているとき、<table> 要素および関連する要素に対してチップを表示します。

テーブルのサイズ（行×列）が表示されます
テーブルヘッダー（<th>要素）の有無と設定状況を確認できます
各セルの位置情報（行番号、列番号）が表示されます
<caption> 要素によるテーブルキャプションの有無を確認できます
複雑なテーブルの場合、ヘッダーとセルの適切な関連付けが行われているかを確認してください

WAI-ARIA

「WAI-ARIA」にチェックが入っているとき、ARIA属性をもつ要素に対してチップを表示します。

WAI-ARIA属性のチップで、要素に適用されているARIA属性の名前と値が表示されます。これにより、どのARIA属性が適用されているかを理解し、その値を確認することができます
aria-hidden="true" 属性をもつ要素には警告チップが表示されます。この属性が指定されている要素は、スクリーンリーダー等の支援技術のユーザーには知覚されません。装飾目的の要素以外で視覚的に見えているのに aria-hidden となっている要素が存在する場合は、 修正が必要です
その他のARIA属性（aria-expanded、aria-selected など）の状態が表示されます
ロールのチップで、カスタムロールが表示されます
ARIA属性が適切に設定され、期待される動作をするかを確認してください

他の検証ツールとの併用

Accessibility Visualizerは、以下のツールと併用することで、より包括的なアクセシビリティ検証が可能です：

さらに、これらのツールを使用した検証に加えて、実際のスクリーンリーダーでの確認を行うべきです。Accessibility Visualizerは開発効率を向上させるツールですが、実際の支援技術での確認を完全に代替するものではありません。