『Web Accessibility Toolbar 1.2.1 日本語版』機能紹介
『Web Accessibility Toolbar』とは?
オーストラリアの視覚障害者団体が設立したNPOのAISが開発したツールバーです。1人でも多くの人に使ってもらうことで、Webアクセシビリティの重要性に気づいてもらいたいという開発者の思いから、最もシェアの高いWindows版InternetExplorerのツールバーとして開発されました。
この『Web Accessibility Toolbar』には、英語版をはじめ、現在スペイン語、フランス語、イタリア語、日本語、韓国語の各言語版があるのですが、各国の有志がボランティアでプライベートな時間を割いてローカライズを行い、各国で無償ダウンロード配布されています。この他の言語でも着々とローカライズが進められており、世界的なプロジェクトとなっています。2005年9月には、WAT-C(Web Accessibility Tools Consortium)が設立されました。インフォアクシアでは、日本語版のローカライズを担当し、韓国語版についても同様にローカライズを行っています。

機能一覧
- アクセスキーについて
- Web Accessibility Toolbar
- HTML/CSS
- HTML
- CSS
- 画像と色
- 画像
- 色
- ドキュメント
- シミュレーション
- ツール
- リファレンス
-
- アクセシビリティ・ガイドライン
- アクセシビリティ/ユーザビリティのリソース
- 言語リファレンス
- IEオプション
アクセスキーについて
ツールバーの各ボタン、メニューにはキーボードからアクセスできます。メニューを表示、選択させるには「Ctrl+Alt+アクセスキー」を、ボタンを押すには「Ctrl+Alt+Shift+アクセスキー」を押してください。
ここから先の解説のボタン名の横に書いてある[ctrl + alt + 0]などはメニューを表示させるために必要なキーです。
| 機能名 | 説明 |
|---|---|
W3C HTML Validator
|
ブラウザで開いているWebページのHTMLソースコードを『W3C HTML Validator』でチェックします。 注意: :ローカルにあるHTMLファイルをチェックする際には、まずIEのメニュー[ファイル]-[開く]を使って、そのHTMLファイルをブラウザ画面で開いてください。そして、Accessibility Toolbarの[HTMLソースの検証 (ファイルをアップロードする)]を選択すると、そのHTMLファイルを自動的に『W3C HTML Validator』に送ってHTMLソースコードをチェックします。 |
W3C HTML Tidy
|
Infohoundの『HTML Tidy』を用いて、ブラウザで開いているWebページのHTMLソースコードをチェックして、そのWebページを修正して整形したソースコードを[見る/ダウンロードする]のどちらかで確認できます。 |
W3C Link Checker
|
『W3C Link checker』で、HTML/XHTMLドキュメント内にあるリンクをチェックします。リンク切れを発見するのに役立ちます。 |
Another HTML Lint
|
ブラウザで開いているWebページのHTMLソースコードを『Another HTML Lint』でチェックします。 注意: :ローカルにあるHTMLファイルをチェックする際には、まずIEのメニュー[ファイル]-[開く]を使って、そのHTMLファイルをブラウザ画面で開いてください。そして、Accessibility Toolbarの[HTMLソースの検証 (ファイルをアップロードする)]を選択すると、そのHTMLファイルを自動的に『Another HTML Lint』に送ってHTMLソースコードをチェックします。 |
WDG HTML Validator
|
『WDG HTML Validator』で、WebページのHTMLソースコードをチェックします。 |
WDG Link Valet
|
『WDG Link Valet』で、HTML/XHTMLドキュメント内にあるリンクをチェックします。リンク切れを発見するのに役立ちます。 |
| W3C P3P Validator | P3P形式のプライバシー情報が有効かどうかをチェックします。 |
| ソースコードを表示 | このWebページのソースコードをノートパッドで表示します。 |
| ソースコードをHTML形式で表示 | このWebページのソースコードをHTML形式でブラウザ画面に表示します[新しいウィンドウで開く]。 |
| 選択範囲のソースコードを表示 | ブラウザ画面上で予め選択した箇所のソースコードをHTML形式でブラウザ画面に表示します[新しいウィンドウで開く]。 |
| HTML形式で保存 | "保存"のダイアログボックスを開きます。 |
W3C CSS Validator
|
ブラウザで開いているWebページのCSSソースコードを『W3C CSS Validator』でチェックします。 |
| CSSの有効/無効 | 外部スタイルシート参照のオン/オフを切り替えます。 |
| インラインCSSを無効 | このWebページにある 'style' 属性を全て外した状態にします。 |
| 適用スタイルを表示 | マウスカーソルで指した箇所に適用されているスタイルを小さいポップアップ・ウィンドウに表示します。 スクリプト提供:Simon Willison |
| スタイルシートを表示 | このページが参照しているCSSのソースコードを新しいウィンドウに表示します。 |
| スタイルの編集/チェック | 小さいポップアップ・ウィンドウでCSSを編集しながら、リアルタイムで元のウィンドウのこのページにそのスタイルを適用させてチェックできます。 スクリプト提供:Simon Willison |
| HTMLの非推奨要素を表示 | HTML 4.0の非推奨要素を表示します。非推奨属性については、今のところ未対応です。 |
| div要素の順序と外枠を表示 | このWebページにあるdiv要素のタブ・オーダーと外枠を表示します。 |
| 機能名 | 説明 |
|---|---|
| イメージを一覧表示 | このページにあるimg要素で使用されているイメージを新しいウィンドウで一覧表にして表示します。 Liorenのスクリプトをベースに開発しました。 |
| イメージ/alt属性値(代替テキスト)の表示切り替え | このWebページにあるimg要素をそのalt属性の""内に記述されている代替テキストに置き換えて画面に表示します。img要素にalt属性がない場合には、そのイメージを "NoAlt!" に置き換えて表示します。 |
| イメージのalt属性値(代替テキスト)を表示 | このWebページにある各イメージの隣にimg要素とそのalt属性を表示します(alt属性がない場合には、"NoAlt!"と表示されます) 。また各イメージには赤い枠線を付けます。 |
| イメージマップを表示 | このWebページにあるクライアントサイド、サーバーサイドのイメージマップに関する情報を表示します。 |
| Color contrast analyserを起動 | Color contrast analyserを起動します。このコマンドを初めて使用するときにファイル選択ダイアログが表示されるのでCCAを選択してください。 注意: 日本語版はもうすぐリリースします。 |
| グレースケール表示に変換 | このWebページの色の情報を破棄してグレースケールで表示します。 注意: ただし、PNGファイルは除く。 |
| 使用している色を一覧表示 | このWebページが参照しているCSSのソースコードで指定している全ての色を新しいウィンドウで一覧表示します。 ソースコード提供: milov.nl |
| カラー・コントラスト・アナライザー | Juicy Studio の『カラー・コントラスト・アナライザー』を新しいウィンドウで開きます。 |
| 機能名 | 説明 |
|---|---|
| ページ情報を抽出 | Webページの情報(ページタイトル、ファイルサイズ、作成日、イメージ・リンク・フォーム・スクリプトの数)を新しいウィンドウで表示します。 この機能は、オレゴン州立大学のWebサイトにあるスクリプト(Bookmarklet)をベースに開発しています。 |
| メタデータ情報を抽出 | Webページのソースコードにある全てのmeta要素とその内容を新しいウィンドウで一覧表示します。 |
| 見出し箇所を表示 | このWebページにある全てのh要素(見出し)を表示します。 |
| 見出し構造を抽出 | このWebページのページタイトルと見出し(h1~h6要素とその内容)を新しいウィンドウで一覧表示します。WebAIM (Web Accessibility in Mind)の『The Wave 3.5』をベースに開発。 |
| リスト箇所を表示 | このWebページでリスト要素を使用している箇所を表示します(例:番号なし=ul要素、番号つき=ol要素、定義=dl要素、など)。 |
| リンク箇所を一覧表示 | Webページ内にあるリンクのリンク先URL、ラベルおよびtitle属性値を一覧表示します。 |
| PDFへのリンク箇所を一覧表示 | Webページ内にあるPDFファイルへのリンクを一覧表示します。 |
| 単純なデータテーブルの構造を表示 | このWebページにある単純なデータテーブルのth要素およびtd要素を、マークアップすることが推奨されている属性(summary / scope)とあわせて表示します。その属性の""内が空で表示されている箇所は、その属性が使われていないものの使うことが推奨されていることを示します。 |
| 複雑なデータテーブルの構造を表示 | このWebページにある複雑なデータテーブルのth要素およびtd要素を、マークアップすることが推奨されている属性(summary / scope / id / headers)とあわせて表示します。その属性の""内が空で表示されている箇所は、その属性が使われていないものの使うことが推奨されていることを示します。 |
| テーブルの外枠を表示 | このWebページにある全てのテーブルおよびテーブルのセルの外枠を表示します。 |
| テーブルのセルの順序を表示 | このWebページにあるテーブルの全てのセルのタブ・オーダー(音声読み上げ順序)と外枠を表示します。 |
| リニアライズ(テーブルを外す) | このWebページにあるテーブル(table / tr / th / td / div要素)を全て外して表示します。音声ブラウザやスクリーンリーダーでは、この順序で読み上げられます。 |
| fieldset / legend / label要素を表示 | このWebページでfieldset要素、legend要素、label要素を使用している箇所を表示します。また、label要素にfor属性がある場合はそれも表示し、for属性がない場合には"NoFor!"というテキストを表示します。フォームのコントロールにid属性(id="")がある場合にはそれも表示します。 |
| イベント・ハンドラ使用箇所を表示 | 以下のいずれかに該当する場合に、
|
| フレームの外枠を表示 | このWebページにある全てのframe要素の外枠を表示します。 |
| フレームの name / title属性を表示 | このWebページで使用されているframe要素のname属性およびtitle属性の記述内容を、新しいウィンドウで一覧にして表示します。 |
| フレームを一覧表示 | フレームを使用しているWebページの各フレームのURLとframe要素のname属性値を一覧表示します。 |
| 機種依存文字を表示 | このWebページで文字化けの原因となる機種依存文字を使用している箇所を表示します。 |
| 半角カナを表示 | このWebページで文字化けの原因となる半角カナを使用している箇所を表示します。 |
| 不適切な日付表記を表示 | このWebページで音声読み上げソフトに日付として正しく読み上げられない表記("yyyy/mm/yy"など)を使用している箇所をそれぞれのtitle属性とあわせて表示します。 |
| 不適切な可能性のある日付表記を表示 | このWebページで音声読み上げソフトに日付として正しく読み上げられない表記("mm/yy"など)を使用している箇所をそれぞれのtitle属性とあわせて表示します。 |
| 不適切な時刻表記を表示 | このWebページで音声読み上げソフトに時刻として正しく読み上げられない表記("hh:mm"など)を使用している箇所を表示します。 |
| 不適切な金額表記を表示 | このWebページで音声読み上げソフトに金額として正しく読み上げられない表記("\0,000"など)を使用している箇所を表示します。 |
| ナビゲート | WebページのHead要素内でLink要素が指定されている場合に指定ページへと移動します。 |
| Acronym / Abbr要素を表示 | このWebページでacronym要素、abbr要素を使用している箇所をそれぞれのtitle属性とあわせて表示します。 |
| アクセスキー設定箇所を表示 | このWebページでaccesskey属性を使用している箇所を表示します。 |
| タブインデックス設定箇所を表示 | このWebページでtabindex属性を使用している箇所を表示します。 |
| 任意の要素を指定して表示 | JavaScriptのプロンプトに任意の要素名を入力して、好きな色(デフォルトは赤色)を指定すると、その該当箇所を指定した色の外枠付きで表示します。Centricleのスクリプトをベースに開発。 |
| タブ順序を表示 | タブキーを押してフォーカスが移動する順序を数字で表示します。 |
| DOCTYPEを表示 | 文書にDOCTYPEが指定してあればDOCTYPEをポップアップ表示します。 |
| Lang属性を表示 | HTML要素にLang属性が指定してあれば、表示している文書内に属性値を表示します。 |
| 機能名 | 説明 |
|---|---|
| リサイズ:640X480 | ブラウザのウィンドウサイズを幅640ピクセル・高さ480ピクセルに変更します。 |
| リサイズ:800X600 | ブラウザのウィンドウサイズを幅800ピクセル・高さ600ピクセルに変更します。 |
| リサイズ:1024X768 | ブラウザのウィンドウサイズを幅1024ピクセル・高さ768ピクセルに変更します。 |
| 任意のサイズ(幅・高さ)に変更 | ブラウザのウィンドウサイズを入力した任意の幅と高さに変更します。 |
| 画面を拡大する | Webページを最小25%~最大600%まで縮小・拡大します。 |
| Screen Size Tester | AnyBrowser.comの『Screen Size Tester』へのリンク。また、ブラウザ別/画面解像度別/OS別の画面サイズに関する情報もあります。 |
| リニアライズ(テーブルを外す) | このWebページにあるテーブル(table / tr / th / td / div要素)を全て外して表示します。音声ブラウザやスクリーンリーダーでは、この順序で読み上げられます。 |
| テキストブラウザでの表示に変換 | Webページをdelorie software社の『Lynx Viewer』で変換して、新しいウィンドウで表示します。この機能は、テキストブラウザの『Lynx』でどのように見えるのかを視覚的にシミュレーションできる機能です。 |
| プラグインを無効 | このWebページのJava、Flash、BGMおよびサードパーティのiframeを外します。Jesse's Bookmarklets Siteのスクリプトをベースに開発。 |
| マウス操作を無効 | マウスの左クリックによる機能を使えない状態にします(今のところ、mouseover/onmouseによるイベントは未対応)。マウスの左クリックをするとアラート・ボックスが表示されます。注意: 右クリックは使用できます。 |
| 第一色覚特性(赤/緑)の見え方 | Webページを第一色覚特性(赤と緑が識別できない色覚特性)のユーザーによくある見え方に変換して、視覚的にシミュレーションできる機能です。 (注意:このシミュレーションの実行中はWebページの機能を使用することが出来ません。) この機能はQ42提供の『CBC:Color Blindness Check』をベースにしています。 |
| 糖尿病性網膜症の見え方(一例) | Webページにイメージマスクをかけて、糖尿病性網膜症による視覚障害のあるユーザーには画面がどのように見えるのかを視覚的にシミュレーションできる機能です。 (注意:このシミュレーションの実行中はWebページの機能を使用することが出来ません。) |
| 白内障の見え方(一例) | Webページをぼんやりとさせて、白内障のユーザーには画面がどのように見えるのかを視覚的にシミュレーションできる機能です。 |
| 黄斑変性症の見え方(一例) | Webページに黒い円形のイメージマスク(周辺部は半透明)をかけて、黄斑変性症のユーザーには画面がどのように見えるのかを視覚的にシミュレーションできる機能です。マウスカーソルを円形部分の上に置いて左クリックをすると、その円形部分がマウスカーソルの動きにあわせて移動するようになります。 (注意:このシミュレーションの実行中はWebページの機能を使用することが出来ません。) |
| 緑内障の見え方(一例) | Webページに黒い楕円形のような透明部分のある黒いイメージマスクをかけて、緑内障のユーザーには画面がどのように見えるのかを視覚的にシミュレーションできる機能です。マウスカーソルを透明部分の上に置いて左クリックをすると、その円形部分がマウスカーソルの動きにあわせて移動するようになります。 (注意:このシミュレーションの実行中はWebページの機能を使用することが出来ません。) |
| グレースケール表示に変換 | Webページの色情報を破棄してグレースケールに変換し、モノクロ画面やモノクロ印刷での見え方を視覚的にシミュレーションできる機能です。 |
| コントラスト感度を減少 | Webページにイメージマスクをかけて透明度を下げ、加齢により衰える コントラスト感度のシミュレーションを行う機能です。 (注意:このシミュレーションの実行中はWebページの機能を使用することが出来ません。) この機能はQ42提供の『CBC:Color Blindness Check』をベースにしています。 |
| ページ容量/ダウンロード時間を計算 | Webページの容量と様々なモデム速度による概算のダウンロード時間をポップアップ・ウィンドウで表示します。 この機能は、『sam-i-am.com』のスクリプト(Bookmarklet)をベースに開発しています。 |
| ダウンロード時間を計算 | WebページのURLをWebsiteoptimazation.comが提供する『Web Page Analyser』に送信します。 |
| 明滅するイメージのデモ | WGBH提供の『明滅する周波数のデモ』ページを新しいウィンドウで開きます。このデモは、Webコンテンツで問題を引き起こす明滅のサンプルをWebコンテンツ制作者に提供するためのものです。 |
| 機能名 | 説明 |
|---|---|
| インフォアクシア |
|
| The Wave(英語) | WebページのURLをWebAIMのアクセシビリティ・チェックツール『Wave』に入力して診断を行うことが出来ます(現在のウィンドウまたは新しいウィンドウのどちらで開くかを選択可能)。 |
| Cynthia Says(英語) | WebページのURLをHiSoftwareのアクセシビリティ・チェックツール『Cynthia Says』に入力して診断を行うことが出来ます(現在のウィンドウまたは新しいウィンドウのどちらで開くかを選択可能)。 |
| Bobby(英語) | WebページのURLをWatchfireのアクセシビリティ・チェックツール『Bobby』に入力して診断を行うことが出来ます(WCAG1.0または米国リハビリテーション法508条のいずれかを選択可能。どちらも新しいウィンドウで開きます)。 |
| Juicy Studio(英語) |
|
| 富士通アクセシビリティ・アシスタンス | 視覚障害者や色覚障害者を対象としたアクセシビリティを高めるための診断ソフトウェアツール群『Fujitsu Accessibility Assistance』(『WebInspector』、『ColorSelector』、『ColorDoctor』の3つのツール)を無償でダウンロードできます。 |
| aDesigner | 視覚障害者(全盲ユーザーやロービジョンユーザー)にとってのアクセシビリティやユーザビリティをチェックすることができる『aDesigner』を無償でダウンロードできます。 |
| ホームページリーダーお試し版 | 視覚障害者が使用している音声ブラウザ『ホームページリーダー』のお試し版を無償でダウンロードできます。 |
| JAWS ver. 4.5 お試し版 | 視覚障害者(主にパワーユーザー)が使用している高機能スクリーンリーダー『JAWS ver. 4.5』のお試し版をダウンロードできます。 |
| PC-Talker XP 体験版 | 視覚障害者が使用しているスクリーンリーダー『PC-Talker XP』の体験版を無償でダウンロードできます。 |
| 95 Reader | 視覚障害者が使用しているスクリーンリーダー『95 Reader』の体験版を無償でダウンロードできます。 |
リファレンス [ctrl + alt + 9] ![画面イメージ:ツールバーの[リファレンス]メニューのボタン](/tools/images/toolbar06.gif)
"リファレンス"では、Web上で提供されている関連情報へのリンクを提供しています。
| 機能名 | 説明 |
|---|---|
| IE オプションボタン | ボタンを押すと各設定を一度に行えるダイアログが表示されます。 |
| イメージを表示する [ctrl + alt + I] | Internet Explorer の[ツール]-[インターネットオプション]-[詳細設定]にある"画像を表示する"のラジオボタンを選択(画像を表示)/非選択(画像を表示しない)で切り替えます。 |
| Javascriptを有効にする [ctrl + alt + J] | Internet Explorer の[ツール]-[インターネットオプション]-[セキュリティ]-[レベルのカスタマイズ]にある"スクリプト"で、JavaScriptを有効にする(オン)/無効にする(オフ)を切り替えます。 注意: ツールバーの機能の多くはJavaScriptで動作するため、JavaScriptを"無効"にするとツールバーの機能は使用できません。 |
| ActiveXを有効にする [ctrl + alt + A] | Internet Explorer の[ツール]-[インターネットオプション]-[セキュリティ]-[レベルのカスタマイズ]にある"Active Xコントロールとプラグイン"で、ActiveXを有効にする(オン)/無効にする(オフ)を切り替えます。Flashなどを使用しているWebページをチェックするのに便利な機能です。 |
| ユーザー補助ダイアログを表示する [ctrl + alt + D] | Internet Explorer の[ツール]-[インターネットオプション]にある"ユーザー補助"のダイアログを開きます。 |
| CSSを有効にする [ctrl + alt + C] | Internet Explorer のCSS適用のオン/オフを切り替えます。 注意: これはマイクロソフト社が提供している機能ではありません。CSSをオフにしたままでいると、Internet Explorer以外でCSSを使用しているウィンドウやダイアログボックスなどの画面表示に影響を及ぼすことがあります。ブラウザを閉じる前に、必ずCSSをオンの状態に戻してください。もしオフのままブラウザを閉じてしまって画面表示に異常が見つかった際は、Internet Explorer を開いてCSSをオンにすれば正常な状態に戻ります。 |
| 文字サイズを変更する | Internet Explorer の[表示]-[文字サイズ]と同じ機能です。 ショートカットキー: 最小 [ctrl + alt + Q]、中 [ctrl + alt + Y]、最大 [ctrl + alt + Z] |
