Dreamweaver があれば、アクセシビリティもチェックできる

JIS X 8341-3 （日本工業規格） 対応　アクセシビリティ・チェック機能

Dreamweaver CS3 には、WebコンテンツのアクセシビリティガイドラインであるJIS X 8341-3 に対応したチェック機能が標準で搭載されています。

JIS X 8341-3 とは？

2004年６月20日に制定された規格で、正式名称は『高齢者・障害者等配慮設計指針 －情報機器における機器，ソフトウェア及びサービス －第三部：ウェブコンテンツ』といいます。このJIS X 8341-3は、９つのカテゴリに分類された39項目のガイドラインで構成されています。うち、必須レベルが 27項目、推奨レベルが12項目あり、官公庁や地方自治体はもちろん、企業のサイトでも業種を問わずに取り組みが進められている規格です。なお、制定から5年が経過する2009年には、W3Cが策定中の『WCAG 2.0』 をふまえて改定される予定になっています。

Dreamweaverのアクセシビリティチェック機能

JISに対応したDreamweaverのアクセシビリティチェック機能は、JIS X 8341-3が制定された当時にリリースされていた「Dreamweaver MX 2004」 の拡張機能として開発されたのが最初でした。この「アクセシビリティ拡張機能 JIS 対応版」は、マクロメディア（当時）と富士通が共同開発し、インフォアクシアがリファレンスの監修を行いました。

この拡張機能は、JIS X 8341-3 の全てのガイドライン項目に対応したチェックが可能なだけでなく、リファレンスパネルには『富士通 ウェブ・アクセシビリティ指針』から解説文を引用するなど、アクセシビリティの初心者でも学習しながら使用できるもので、無償でダウンロード配布されていました。そして、「Dreamweaver 8」以降 からは標準搭載されています。

チェック機能の使い方

「Dreamweaver CS3」に標準搭載されているアクセシビリティチェック機能には、以下の３通りの実行方法があります。

• [ファイル] – [ページのチェック] – [アクセシビリティ]
• [サイト] – [レポート] – [HTMLレポート] – [アクセシビリティ JIS X 8341-3 日本工業規格] – [実行]ボタン

• [結果]パネルの[レポート]ボタン – [実行]ボタン

チェック結果の見方

チェックを実行すると、[結果]パネルに問題点が 「×（要修正）」 と 「？（要確認）」　に分類されて表示されます。×マークは、例えば画像の<img>要素にalt属性がないというように、明らかに問題があり修正しなければならない問題を示しています。

そして、？マークは、例えばalt属性はあるけれども、そこに記述されている代替テキストが適切かどうかを確認しなければならないというように、人間の目で問題の有無を判断する必要がある箇所を示すものです。

アクセシビリティのチェックは、全てを自動化することは不可能なので、Dreamweaverのチェック機能でもこの？マークで判断を促される箇所がたくさん指摘されます。最初はその数の多さに圧倒されてしまうかもしれませんが、徐々にその対処方法が身についてきて、チェックに要する時間も短縮されていくはずです。

困ったときにはリファレンスパネル

また、特に最初のうちは、結果パネルで指摘される問題点の中には、どう対処すればよいか分からないものもあるでしょう。そんなときには、リファレンスパネルでそのガイドラインに関する詳細な解説を参照することが可能です。そして、このリファレンスには、富士通のアクセシビリティ指針から分かりやすい解説文が引用されていますので、しっかり活用してください。

TIPS 1：　チェックの前提

デフォルトでは、JIS　X 8341-3の必須レベル項目プラス重要な推奨レベル項目でチェックする設定になっています。これだけでも相当な数のチェック項目が含まれていることになるのですが、このデフォルトの設定で全てをクリアしなければいけないかというと、必ずしもそういうわけではありません。アクセシビリティのチェックは、(X)HTMLのバリデータと異なり、全部をクリアする必要はないのです。

アクセシビリティに取り組む際には、まずそのサイトでどこまで対応するかを決めておく必要があります。独自のガイドラインを作成しているサイトもありますが、そこまでしなくてもJIS X 8341-3 のガイドライン項目で一つひとつ対応する/しないを決めるという方法もあります。サイトの目的やターゲットユーザー層に合わせて、何をどこまで対応していくのかをルール化して共有することから始めましょう。その上で、「Dreamweaver CS3」のチェック機能を「道具」として活用していくのです。

TIPS 2：　チェック内容のカスタマイズ

そのサイトで確保すべきアクセシビリティガイドラインの項目が定まったら、それに合わせて「Dreamweaver CS3」のチェック内容もカスタマイズしていきます。カスタマイズの方法はとても簡単です。

• 手順1：　メニューから[サイト] – [レポート] を選択して、[レポート]ダイアログボックスで [HTMLレポート] – [アクセシビリティ JIS X 8341-3 日本工業規格] にチェックを入れます。

• 手順2：　[レポート] ダイアログボックスの [レポート設定]ボタンを押します。
• 手順3：　カテゴリルールから任意のカテゴリを選択して、各チェック項目を確認しながらチェックする項目は[テストする] ボタン、チェックしなくてよい項目は[テストしない] ボタンで取捨選択していきます。

• 手順4：　チェック項目の取捨選択が終わったら、[保存]ボタンを押してください。これでカスタマイズは完了です。

実際の制作ワークフローを考えると、このようにカスタマイズした設定は、そのサイトの制作に関わるメンバー全員で共有したいですし、もしサイト運営者側でもDreamweaver CS3を使用しているならば、やはり共有できてこそ初めて意味があるともいえます。しかし、CS3にはその機能がないので、次期バージョン CS4では是非カスタマイズ内容を共有できるようにしてほしいところです。

裏技：　CS3でも設定ファイルを共有できる

しかし、実はCS3でも誰かがカスタマイズした設定を他のメンバー全員で共有することができます。チェック内容をカスタマイズして保存した後、その設定ファイル（XMLファイル）をコピーすれば他のユーザーと共有することができるのです。設定ファイルは、以下のディレクトリにあります。複数のサイトを同時進行で作業している場合は、サイトごとに設定ファイルを用意して別々に保存しておくとよいでしょう。ただし、このXMLファイル名を変更することはできません。

Windows Vista の場合

Windows XP の場合

Mac OS X の場合

まとめ

JIS X 8341-3が制定された後に、オーサリングツールでいち早くそれに対応したチェック機能を追加したのがDreamweaverでした。より多くのユーザーがより多くの状況でそのコンテンツを利用することができるように、皆さんもDreamweaver CS3のアクセシビリティチェック機能をフルに活用してみてください。

また、Dreamweaver CS3には、ここでご紹介したチェック機能のほかに、画像、テーブル、フォームなどを簡単にアクセシブルにできる機能も用意されています。詳細は、書籍｢Dreamweaver プロフェッショナル・スタイル｣（毎日コミュニケーションズ）で解説していますので、あわせて参考にしてください。