ウェブアクセシビリティ・レポート
文＝KeiYu HelpLab石田優子
ユーザーの視点に立ったサイト構築、運営に関するユーザビリティ、アクセシビリティの向上などのコンサルティング、調査などを行っている。
第11回
Flashコンテンツのアクセシビリティ
Flashを使うことは、ウェブアクセシビリティ上は好ましくないという見方がある。しかし、Flashコンテンツを、さまざまな障害をもったユーザーや高齢者ユーザーが利用し、楽しんでいるのが現状だ。そこで、アクセシビリティに配慮したFlashコンテンツのあり方について考えてみる。
記事協力
（有）トゴル・カンパニー 伊藤のりゆき（NORI）
さまざまな視点からFlashのアクセシビリティを考える
Flashがアクセシビリティの問題となる理由は、支援技術のソフトや機器がFlashに対応していない、あるいは対応していても、Flashコンテンツがそれらの支援技術で利用可能な構造になっていないといった技術的な側面と、提供するFlashコンテンツがある障害をもつユーザーには閲覧・利用しづらい、できないといった内容にかかわる側面がある。
Flashと支援技術
Flash Playerはバージョン6以降、マイクロソフトのMSAA（Microsoft Active Accessibility）というWindowsの支援ソフトで使用できるAPI（アプリケーション・プログラム・インターフェース）に対応しており、MSAA対応の支援ソフトでかつFlash Playerにも対応したものであれば、Flashを利用することが可能だ。
現在は主要な音声読み上げソフトがMSAAとFlash Playerに対応したため、後述の方法で、テキスト属性を「ダイナミックテキスト」にしたテキスト情報や、ボタンやテキスト入力フィールドに指定したテキストを読み上げることができるようになった。
しかし、アクセシビリティへの配慮を行っていないもの、特に複雑なメニューをつくり込んだものなどは、音声読み上げソフトやキーボード操作のみの機器では使えない場合が多く、Flash以外に代替のHTMLページが必要となってくる。
Flashコンテンツとユーザーのニーズ
閲覧、操作できないコンテンツがあるからと、Flash全体を障害者や高齢者ユーザーには、マイナスだと短絡的に考えると、現状にそぐわない。アクセシビリティを特に意識していないと思われるFlashコンテンツでも、メニュー操作のないムービーなどは多くの支援機器、ソフトで視聴できる。音声読み上げソフトユーザーや、弱視のユーザーにもYouTubeやパソコンテレビGyao（www.gyao.jp/）のFlash動画ファンは非常に多く、コミュニティでよく話題になっている。
また、字幕がついていないFlash動画でも内容のわかりやすいものは聴覚障害をもつユーザーにも人気がある。高齢者にもFlashを好む人は多い。ビジュアルなしで音声のみで動画を楽しむ、逆に音声なしでビジュアルだけで動画を楽しむというのは、通常のテレビを障害者や高齢者が視聴しているのと同じだ。
ビジュアルと音声がテキスト情報以上の有効な情報適用手段となっている場合もある。すでに現在多くの障害者、高齢者にFlashコンテンツが広く利用されていることをまず認識してほしい。
しかし一方で、LD（学習障害）などのユーザーにとっては、画面に動き続けるものがあると、他の情報の閲覧に集中できないといった問題もある。障害によっては、Flashコンテンツ中の文字が動くと読めない場合や、音声読み上げソフトの音声とコンテンツの音声が重なって聞き取りづらいこともあるので、動きや音をユーザーが静止したり、再開したりできるような仕組みは欠かせない。
単にFlashを使うか使わないかの単純な議論だけでなく、Flashがそのサイトを取り巻くユーザーにどんなメリット、デメリットがあるか、さまざまなユーザーの状況を把握したうえで総合的に判断し、またコンテンツを制作していく必要がある。
アクセシビリティに配慮したFlashコンテンツの制作
Flashのテキストを音声読み上げソフトに対応させる方法
Flashで、音声読み上げソフトなどが認識できるようにテキスト情報を残すには、Flashのステージに書かれた文字のテキストの属性を「ダイナミックテキスト」にする必要がある。「静止テキスト」やアウトライン化したテキストは、読み上げられないので注意が必要だ。
しかし「ダイナミックテキスト」はフォント属性などが保持できず、再生環境によって見た目が大きく変わってしまうという問題がある【1】。
【1】アクセシビリティを維持するためにダイナミックテキストにするとデザイン的に使えないテキストになってしまう
そこで、音声読み上げソフト用の「ダイナミックテキスト」とデザイン用の「静止テキスト」を同時に配置することで回避する。「ダイナミックテキスト」は、ステージの裏（レイヤーの下）や、端っこに配置し、読み上げ順（タブインデックス）を設定する。文字の色は、透明か背景の色と一緒にする。さらに、選択不可に指定すれば、マウスと視覚でアクセスするユーザーからは、音声読み上げソフト用のテキストを隠すことができる【2】。
【2】ステージに配置した読み上げ対応のテキスト例。上から、ダイナミックテキスト。静止テキスト+読み上げ用のダイナミックテキスト。分解テキスト+読 み上げ用のダイナミックテキスト。読み上げ用のテキストは、いずれも背景色と同じにして、画面の端に少しだけかぶるようにしてある（かぶらないと認識され ないため）
これらは、独立したテキストの場合向けの手法で、Flash内でボタンを作成したときは、ボタンの中に入れるテキストを「静止テキスト」にしておいても、音声読み上げソフトはそれを読み上げることができる【3】。
【3】ボタンの中で使用された「静止テキスト」は、ボタン名称と判断されて読み上げられる
「自動ラベル」などの機能は、Flash5以前の古いSWFコンテンツを自動で読み上げ対応にするためにFlash Playerが搭載している機能と考えたほうがよく、完璧な動作を保証するものではない。Flash MX 以降では、積極的にアクセシビリティ対応をするためのアクセシビリティパネルがあるので、きちんと「名前」を設定したほうがより確実な情報を伝えることができる【4】。
【4】アクセシビリティパネルの「自動ラベル」オプションを、デフォルトのオンにしておくと、ボタンやテキスト入力フィールドなどが読み上げ可能になる場合が多い
視覚シンボルを使った文意理解支援システムの研究
Flashは、拡大縮小しても画像が乱れないベクターによる描画が基本である。このため、Flashコンテンツの表示サイズをパーセントにするだけで、ウインドウサイズにFlashコンテンツのサイズを連動させることができ、Flashコンテンツ中の文字サイズが小さい場合など、ウインドウを拡大すると文字も拡大されるので、閲覧しやすくなる【5】。
【5】Flashコンテンツの表示サイズをパーセントにするだけで、ウインドウサイズにFlashコンテンツのサイズを連動させることができる
【6】はHTMLソースの例だが、＜object＞タグと＜embed＞タグでそれぞれ、width="100%" height="100%" となっている点に注目してほしい。このHTMLで表示されるFlashコンテンツは、ユーザーが開いたブラウザウインドウのサイズによって拡大縮小する【7】。ピクセルからパーセントに書き直す個所は、＜object＞と＜embed＞の両方のタグにあるので、合計4ヵ所となる。もちろん、Flash内のパブリッシュ設定やDreamweaverでサイズをパーセントに変更すれば、すべてがパネルだけで完了する。
【6】HTMLソース例。この例ではHTMLソースがわかりやすいようにActiveコンテンツ未対策なので注意
【7】ブラウザのウインドウサイズとFlashコンテンツのサイズを連動させた例。富士通のプラズマディスプレイ（jp.fujitsu.com/museum/pdp/plasma1.html）
本記事は『Web STRATEGY』2007年9-10 vol.11からの転載です
文＝KeiYu HelpLab石田優子ユーザーの視点に立ったサイト構築、運営に関するユーザビリティ、アクセシビリティの向上などのコンサルティング、調査などを行っている。
第11回
Flashコンテンツのアクセシビリティ
Flashを使うことは、ウェブアクセシビリティ上は好ましくないという見方がある。しかし、Flashコンテンツを、さまざまな障害をもったユーザーや高齢者ユーザーが利用し、楽しんでいるのが現状だ。そこで、アクセシビリティに配慮したFlashコンテンツのあり方について考えてみる。
記事協力
（有）トゴル・カンパニー 伊藤のりゆき（NORI）
さまざまな視点からFlashのアクセシビリティを考える
Flashがアクセシビリティの問題となる理由は、支援技術のソフトや機器がFlashに対応していない、あるいは対応していても、Flashコンテンツがそれらの支援技術で利用可能な構造になっていないといった技術的な側面と、提供するFlashコンテンツがある障害をもつユーザーには閲覧・利用しづらい、できないといった内容にかかわる側面がある。
Flashと支援技術
Flash Playerはバージョン6以降、マイクロソフトのMSAA（Microsoft Active Accessibility）というWindowsの支援ソフトで使用できるAPI（アプリケーション・プログラム・インターフェース）に対応しており、MSAA対応の支援ソフトでかつFlash Playerにも対応したものであれば、Flashを利用することが可能だ。
現在は主要な音声読み上げソフトがMSAAとFlash Playerに対応したため、後述の方法で、テキスト属性を「ダイナミックテキスト」にしたテキスト情報や、ボタンやテキスト入力フィールドに指定したテキストを読み上げることができるようになった。
しかし、アクセシビリティへの配慮を行っていないもの、特に複雑なメニューをつくり込んだものなどは、音声読み上げソフトやキーボード操作のみの機器では使えない場合が多く、Flash以外に代替のHTMLページが必要となってくる。
Flashコンテンツとユーザーのニーズ
閲覧、操作できないコンテンツがあるからと、Flash全体を障害者や高齢者ユーザーには、マイナスだと短絡的に考えると、現状にそぐわない。アクセシビリティを特に意識していないと思われるFlashコンテンツでも、メニュー操作のないムービーなどは多くの支援機器、ソフトで視聴できる。音声読み上げソフトユーザーや、弱視のユーザーにもYouTubeやパソコンテレビGyao（www.gyao.jp/）のFlash動画ファンは非常に多く、コミュニティでよく話題になっている。
また、字幕がついていないFlash動画でも内容のわかりやすいものは聴覚障害をもつユーザーにも人気がある。高齢者にもFlashを好む人は多い。ビジュアルなしで音声のみで動画を楽しむ、逆に音声なしでビジュアルだけで動画を楽しむというのは、通常のテレビを障害者や高齢者が視聴しているのと同じだ。
ビジュアルと音声がテキスト情報以上の有効な情報適用手段となっている場合もある。すでに現在多くの障害者、高齢者にFlashコンテンツが広く利用されていることをまず認識してほしい。
しかし一方で、LD（学習障害）などのユーザーにとっては、画面に動き続けるものがあると、他の情報の閲覧に集中できないといった問題もある。障害によっては、Flashコンテンツ中の文字が動くと読めない場合や、音声読み上げソフトの音声とコンテンツの音声が重なって聞き取りづらいこともあるので、動きや音をユーザーが静止したり、再開したりできるような仕組みは欠かせない。
単にFlashを使うか使わないかの単純な議論だけでなく、Flashがそのサイトを取り巻くユーザーにどんなメリット、デメリットがあるか、さまざまなユーザーの状況を把握したうえで総合的に判断し、またコンテンツを制作していく必要がある。
アクセシビリティに配慮したFlashコンテンツの制作
Flashのテキストを音声読み上げソフトに対応させる方法
Flashで、音声読み上げソフトなどが認識できるようにテキスト情報を残すには、Flashのステージに書かれた文字のテキストの属性を「ダイナミックテキスト」にする必要がある。「静止テキスト」やアウトライン化したテキストは、読み上げられないので注意が必要だ。
しかし「ダイナミックテキスト」はフォント属性などが保持できず、再生環境によって見た目が大きく変わってしまうという問題がある【1】。
【1】アクセシビリティを維持するためにダイナミックテキストにするとデザイン的に使えないテキストになってしまう
そこで、音声読み上げソフト用の「ダイナミックテキスト」とデザイン用の「静止テキスト」を同時に配置することで回避する。「ダイナミックテキスト」は、ステージの裏（レイヤーの下）や、端っこに配置し、読み上げ順（タブインデックス）を設定する。文字の色は、透明か背景の色と一緒にする。さらに、選択不可に指定すれば、マウスと視覚でアクセスするユーザーからは、音声読み上げソフト用のテキストを隠すことができる【2】。
【2】ステージに配置した読み上げ対応のテキスト例。上から、ダイナミックテキスト。静止テキスト+読み上げ用のダイナミックテキスト。分解テキスト+読 み上げ用のダイナミックテキスト。読み上げ用のテキストは、いずれも背景色と同じにして、画面の端に少しだけかぶるようにしてある（かぶらないと認識され ないため）
これらは、独立したテキストの場合向けの手法で、Flash内でボタンを作成したときは、ボタンの中に入れるテキストを「静止テキスト」にしておいても、音声読み上げソフトはそれを読み上げることができる【3】。
【3】ボタンの中で使用された「静止テキスト」は、ボタン名称と判断されて読み上げられる
「自動ラベル」などの機能は、Flash5以前の古いSWFコンテンツを自動で読み上げ対応にするためにFlash Playerが搭載している機能と考えたほうがよく、完璧な動作を保証するものではない。Flash MX 以降では、積極的にアクセシビリティ対応をするためのアクセシビリティパネルがあるので、きちんと「名前」を設定したほうがより確実な情報を伝えることができる【4】。
【4】アクセシビリティパネルの「自動ラベル」オプションを、デフォルトのオンにしておくと、ボタンやテキスト入力フィールドなどが読み上げ可能になる場合が多い
視覚シンボルを使った文意理解支援システムの研究
Flashは、拡大縮小しても画像が乱れないベクターによる描画が基本である。このため、Flashコンテンツの表示サイズをパーセントにするだけで、ウインドウサイズにFlashコンテンツのサイズを連動させることができ、Flashコンテンツ中の文字サイズが小さい場合など、ウインドウを拡大すると文字も拡大されるので、閲覧しやすくなる【5】。
【5】Flashコンテンツの表示サイズをパーセントにするだけで、ウインドウサイズにFlashコンテンツのサイズを連動させることができる
【6】はHTMLソースの例だが、＜object＞タグと＜embed＞タグでそれぞれ、width="100%" height="100%" となっている点に注目してほしい。このHTMLで表示されるFlashコンテンツは、ユーザーが開いたブラウザウインドウのサイズによって拡大縮小する【7】。ピクセルからパーセントに書き直す個所は、＜object＞と＜embed＞の両方のタグにあるので、合計4ヵ所となる。もちろん、Flash内のパブリッシュ設定やDreamweaverでサイズをパーセントに変更すれば、すべてがパネルだけで完了する。
【6】HTMLソース例。この例ではHTMLソースがわかりやすいようにActiveコンテンツ未対策なので注意
【7】ブラウザのウインドウサイズとFlashコンテンツのサイズを連動させた例。富士通のプラズマディスプレイ（jp.fujitsu.com/museum/pdp/plasma1.html）
本記事は『Web STRATEGY』2007年9-10 vol.11からの転載です
