アクセシビリティに配慮したFlashコンテンツ

本コンテンツは、「富士通のプラズマディスプレイ」ご紹介コンテンツで取り入れられたアクセシビリティ対応を解説しております。

（2004年8月19日 掲載）

富士通では、2002年6月の 富士通ウェブ・アクセシビリティ指針 の制定より、富士通グループ全体でアクセシビリティに配慮したホームページの制作を行っております。 Macromedia Flash（以下、Flash）においても、積極的にアクセシビリティに配慮したコンテンツ制作を行っています。

ポイント

• 富士通が今まで取り組んできたアクセシビリティ活動の紹介
• アクセシビリティに配慮された Flash コンテンツ制作ノウハウの紹介
• 日本工業規格 JIS X8341-3 に対応した項目の紹介
• アクセシブルなウェブコンテンツ作成ツールの紹介

背景

今やビジネスの場に限らず、家庭の中にまで普及しているプラズマディスプレイ。富士通では世界に先駆けプラズマディスプレイのカラー化に成功したことを多くの方々に知ってもらうため、2003年8月、Flash を使った技術紹介コンテンツを公開いたしました。

今回ご紹介する 富士通のプラズマディスプレイ は、公開以来、様々なメディアで紹介され、当初の目的であった技術紹介に加え、そのコンテンツに取り入れられたアクセシビリティ対応を多くの方々に知っていただくことができました。
ここでは、実際に Flash コンテンツに取り入れたアクセシビリティ対応をご紹介いたします。

1. ウインドウサイズ、文字サイズの可変操作に対応

Flash コンテンツのウインドウサイズを固定せずに、変更できるようにしています。ウインドウのサイズ変更に合わせて、文字サイズも追従します。

swf ファイルの幅と高さを相対指定（%）にし、ウインドウサイズを可変させることで、文字サイズの拡大が可能となっています。左図の「文字を大きくしてご覧になりたい方へ」では文字を大きくする方法について説明しています。

ベクターデータの特性を利用した単純な仕掛けにすぎませんが、文字サイズも可変することが可能となり、アクセシビリティに配慮することができます。写真などのビットマップ画像が荒くなることに抵抗がなければ、あえて ActionScript による文字サイズの可変機能を作り込まなくても、この方法で十分対応が可能です。もちろん、デフォルトの状態でも大きめの文字サイズで作られていますので、十分読み易さには配慮しています。

2. ブラウザの基本的なGUIコントロールを確保

一般の Flash コンテンツでは「ウインドウサイズの変更ができない」「アドレスバー、ステータスバーが非表示」となっている場合が多く見受けられますが、富士通ではサイトのポリシーとして、ウインドウサイズの変更可、アドレスバー、ステータスバーを一貫して表示させ、ユーザビリティの向上に努めています。

3. キーボードだけの操作に対応

HTML と同様に Flash でもキーボードのTabキーによる操作だけで、Flash コンテンツ内に配置された要素（ボタン）にフォーカスを移動させることができます。

Flash MX 2004 からはデフォルトの状態で Tab キーによるフォーカスが可能になっています。基本的に画面左上から、左から右、上から下へ順番に移動するようになっていますが、複雑な仕組みになっているときちんと順序通り移動しないことがありますので、十分に検証をする必要があります。

4. スクリーンリーダーでの読み上げに対応

ページ番号、説明文、メニューなど、Flash コンテンツの内容をスクリーンリーダーで正しく読み上げられるよう、設定しています。

主な検証ツールとして、PC-Talker XPを使用しています。

ページ番号の読み上げ

Flash コンテンツの先頭には、ページ番号が読み上げられるよう、コメントを埋め込んでいます。画面左上に透明なムービークリップを配置し、そのムービークリップのアクセシビリティパネルに、「ページ1、トップページ」「ページ2」「ページ3」 と、入力しています。
また、ページが切り替わるごとに、ヘッダー（富士通ロゴ、タイトル、製品名)の内容を毎回読み上げられるのはわずらわしいため、トップページ以外では、ヘッダーを読み飛ばすように設定しています。

メニューの開始を知らせる

Flash コンテンツ内で一貫して画面下部に設置されているメニューの開始を知らせるため、「大きな特長」、「壁掛け可能」・・・と順に読み上げられる前に、必ず「メインナビゲーション」と読み上げられるよう、メニューの先頭にコメントを埋め込んでいます。

メニューの読み上げ

画面下部に一貫して設置されたメニューは、ムービークリップとしてマウスオーバーで反転するアニメーションを設定しているため、アクセシビリティパネルで「子オブジェクトをアクセス可能にする」をチェックしても、フォーカス時にメニューのラベルを正常に読み上げてくれません。

下図のように、ムービークリップ内の最上位レイヤーに透明のボタンを配置し、そのボタンのアクセシビリティパネルにメニューのラベルを設定することで、正常に読み上げられるようになります。

5. Flashコンテンツが閲覧できない環境への配慮

多様なユーザー環境を考慮し、ファイルサイズの軽い HTML 版を用意することも、やはり重要と考えます。

Flash Player のない環境でもコンテンツを閲覧できるように、同内容の HTML 版も用意し、最初のページで Flash コンテンツか、HTML か選択できるようにしています。

また、キーボード操作や音声読み上げに対応できない部分は、あえてフォーカスが当たらない(読み飛ばす)措置を施しています。

図の黄色で囲まれた部分では、マウスカーソルで操作できる仕掛けになっていますが、キーボード操作や音声読み上げには対応できないため、フォーカスが当たらない（読み飛ばす）ように、アクセシビリティパネルの「オブジェクトをアクセス可能にする」をオフにしています。

6. 文字色、背景色への配慮

Flash コンテンツなどの動画においても、アクセシビリティに配慮した配色を施しています。

アクセシビリティに配慮した文字色と背景色のコントラスト（明度差）は、一般的にデザイナーの経験値に依存しています。富士通の ColorDoctor を使うことで、動画の含まれるホームページや、動きのあるプレゼンテーション資料などの配色を、第一色覚（赤）、第二色覚（緑）、第三色覚(青）の見え方でチェックすることができます。

• 富士通 ColorDoctor のダウンロード（無償）

今回のご紹介したアクセシビリティに配慮するための事例は、あくまでも一例としてご紹介しています。このページをご覧いただき、アクセシビリティに対する考え方、実装方法など、皆様のこれからのホームページ制作の糧となれば幸いと存じます。