Dreamweaver記事

Web Accessibility Toolbar

主な機能紹介

「Web Accessibility Toolbar」の主なメニューは、以下のとおりです。

1. HTML / CSS　：ソースコードに関するチェック
2. 画像と色　：画像の代替テキストや色のコントラストをチェック
3. ドキュメント　：文書構造、テーブル、フォーム等をチェック
4. シミュレーション　：画面サイズ、利用者の特性による見え方などをシミュレーション
5. ツール　：オンライン・サービスや各種ツールのダウンロードページへのリンク
6. リファレンス　：JIS X 8341-3 や WCAG 1.0 / 2.0 など関連サイトへのリンク集
7. IE の機能　：CSS や JavaScript の ON / OFF 切替、文字サイズの変更などのショートカット

では、実際に「Web Accessibility Toolbar」を使って Web ページのアクセシビリティをどのようにチェックするのか紹介していきましょう。どれも Dreamweaver 8 のアクセシビリティチェック機能でのチェック結果では「？」マークで示され、問題の有無をチェックする必要がある場合に使える機能です。

ケーススタディ 1. (X)HTML のソースコードをチェック

チェックしたい Web ページを Internet Explorer（以下、IE）で表示させて、「Web Accessibility Toolbar」のメニュー「HTML/CSS」で、以下のいずれかを選択します。

• [HTML/CSS] - [HTML] - [W3C HTML Validator（英語）]
• [HTML/CSS] - [HTML] - [Another HTML lint]

[W3C HTML Validator] は、W3C が提供する無償のオンライン・サービスですが、現時点では英語版しかありません。[Anothor HTML lint] は、日本語で使用できるので、日本では最もポピュラーな (X)HTML 文法チェッカーです。いずれも、無償で利用することができ、「Web Accessibility Toolbar」ではダイレクトにチェック結果を表示させることができます。

ケーススタディ 2. 画像の代替テキストをチェック

チェックしたい Web ページを Internet Explorer（以下、IE）で表示させて、「Web Accessibility Toolbar」のメニュー「画像と色」で、以下のいずれかを選択します。

• [画像と色] - [画像] - [イメージ/alt属性値（代替テキスト）の表示切り替え]
• [画像と色] - [画像] - [イメージ/alt属性値（代替テキスト）を表示]

[イメージ/alt属性値（代替テキスト）の表示切り替え] は、IE で表示している Web ページ上にある全ての画像を、その alt 属性値として記述している代替テキストに置き換えます。[イメージ/alt属性値（代替テキスト）を表示] は、全ての画像のすぐ近くにその代替テキストを表示するので、画像と代替テキストの記述内容を見比べてチェックすることが可能です。

ケーススタディ 3. 色のコントラストをチェック

チェックしたい Web ページを Internet Explorer（以下、IE）で表示させて、「Web Accessibility Toolbar」のメニュー「画像と色」で以下のように選択します。

• [画像と色] - [色] - [カラー・コントラスト・アナライザーを起動]

先に「カラー・コントラスト・アナライザー」をインストールして、全ファイル（"Colour_Contrast_Analyser.exe"、"Colour_Contrast_Analyser.ini"、"translation.txt" の3ファイル)を「Web Accessibility Toolbar」と同じフォルダに置いておく必要があります（通常は、C:ドライブの中の "Program Files" にある 「Accessibility_Toolbar」フォルダ）。そして、[カラー・コントラスト・アナライザーを起動] メニューを選択すると、「カラー・コントラスト・アナライザー」が起動し、背景色と文字色のコントラストをチェックすることが可能です。

ケーススタディ 4. Web ページの見出し箇所をチェック

チェックしたい Web ページを Internet Explorer（以下、IE）で表示させて、「Web Accessibility Toolbar」のメニュー「ドキュメント」で、以下のいずれかを選択します。

• [ドキュメント] - [文書構造] - [見出し箇所を表示]
• [ドキュメント] - [文書構造] - [見出し構造を抽出（新規ウィンドウ）]

[見出し箇所を表示] メニューを選択すると、Web ページ上に h1 要素、h2 要素、h3 要素などで見出しとしてマークアップされている箇所を示します。また、[見出し構造を抽出（新規ウィンドウ）] メニューでは、 h1 要素、h2 要素、h3 要素などで見出しとしてマークアップされている箇所のみを抽出して、新しいウィンドウで一覧表示してくれるので、その Web ページのアウトライン（概要）が分かるように見出し箇所がマークアップされているかどうかをチェックできます。

ケーススタディ 5. 音声読み上げ順序をチェック

チェックしたい Web ページを Internet Explorer（以下、IE）で表示させて、「Web Accessibility Toolbar」のメニュー「ドキュメント」で、以下のいずれかを選択します。

• [ドキュメント] - [テーブル（table要素）] - [テーブルのセルの順序を表示]
• [ドキュメント] - [テーブル（table要素）] - [リニアライズ（テーブルを外す）]

[テーブルのセルの順序を表示] メニューを選択すると、Web ページ上で使用されている全てのテーブルの各セルに番号が振られます。この番号の数字がそのまま音声読み上げ順序になるので、テーブルでレイアウトしているページでは、その数字を順番に目で追っていくことで手軽に音声読み上げ順序が確認できます。また、[リニアライズ（テーブルを外す）] は、Web ページで使用されているテーブルに関するタグ（table要素、tr要素、td要素、など）を全て外した状態に変換してくれます。やはり、上から順に目で追っていくことで、その Web ページの音声読み上げ順序を確認することが可能です。

その他

これ以外にも、ツールバーの右端にある [IE の機能] メニュー（IE のアイコン）では、IE での設定を変更するのが面倒な以下の切り替えが簡単に行えます。

• Active X のオン/オフ
• JavaScript のオン/オフ
• CSS のオン/オフ
• 文字サイズの変更（「最大」～「最小」の5段階）

そして、これらのチェック機能やシミュレーション機能以外に、[リファレンス] メニューには、アクセシビリティ関連の参考になるサイトへのリンクが多数用意されています。いわばブックマーク集のようにも使うことのできるツールバー。是非あなたの IE（Windows版）にもインストールして、アクセシブルな Web コンテンツ制作に活用してください。

ページ 2 / 2

前のページ