お使いのブラウザは最新版ではありません。最新のブラウザでご覧ください。

CNET Japan ブログ

FLASHのアクセシビリティ/Webアクセシビリティ概論 - アクセシビリティセミナーレポート[1]

2008/08/12 07:50
  • このエントリーをはてなブックマークに追加

ミキ・オキタWebClip ウェブデザインのニュース

この記事のトピック

アクセシビリティセミナーに参加してきた。

こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。
このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしています。

2008年7月18日(金)、Webアクセシビリティのセミナーに参加した。その様子を3回に分けて報告したい。

参加したセミナーは以下。

本物のWebアクセシビリティー・セミナー
〜「知ってる・やってるつもりになっていませんか?」
ユーザーが求める本物のアクセシビリティお見せします!〜
主催:NPO法人ハーモニー・アイ
協賛:株式会社クリーク・アンド・リバー社
開催日:2008年7月18日(金)

セミナーでは大きく4つのセッションがあった。

  1. 特別講演1「FLASHのアクセシビリティ&ユーザテストを成功させるTIPS」 インフォアクシア 植木 真 氏
  2. 特別講演2「Webアクセシビリティ概論」 東京女子大学 渡辺 隆行 氏
  3. 研究発表「評価ツールだけでは役立たない! ユーザー評価で分かった使えないアクセシビリティの実態」 NPO法人ハーモニー・アイ
  4. パネルディスカッション 「東西の視覚障害者に、生の声を聞く」 NPO法人ハーモニー・アイ

今回は、特別講演1のインフォアクシア 植木 真 氏の講演と、特別講演2の東京女子大学 渡辺 隆行 氏の講演をレポートする。研究発表とパネルディスカッションは次回以降の記事でレポートする予定だ。
内容は主に僕が会場でメモしたものを中心にお届けする。

特別講演1「FLASHのアクセシビリティ&ユーザテストを成功させるTIPS」

インフォアクシア 植木 真氏による講演。講演内容は「FLASHのアクセシビリティ」と「ユーザテスト」について。

FLASHのアクセシビリティ

  • JIS 8341-3(日本のアクセシビリティ規格)にも、FLASHへのアクセシビリティ実装を指示している項目がある。「5.2 a ウェブコンテンツには,アクセス可能なオブジェクトなどの技術を使うことが望ましい。」がそれ。
  • 支援技術(以下 UA :スクリーンリーダや音声ブラウザをはじめ、障がい者を支援するハードウェアやソフトウェアのこと)の、日本の現状はまだよくない。
  • 一昔前のFLASHのアクセシビリティというと「読み上げできない」「キーボード操作できない」状態だった。
  • 最近のFLASHのアクセシビリティは「制作時の配慮で対応する」ようになっている。
  • 書籍『Webアクセシビリティ』のFLASH制作におけるアクセシビリティの基本ルールより、今回のセミナーでは、特にポイントになる点をピックアップして紹介する。
  • 制作者にとってはものの数分でできる作業だが、次の2点だけでも、大きくアクセシビリティが向上する。

FLASHのキーボード操作対応

  • キーボードのTABキーを押していったとき、フォーカス移動の順がおかしい。画面上のレイアウトと一致しない。
  • FLASHの「アクセシビリティパネル」>「タブインデックス」でフォーカス移動の順を設定できる。
  • 「タブインデックス」の指定にコツがある。「1.2.3...」と連番で移動順を設定せず、「10.20.30...」と10刻みくらいで設定すること。10刻みくらいにしておくと、後から修正が入ったとき、メンテナンスしやすい。

FLASHの音声読み上げ対応

  • FLASHの「アクセシビリティパネル」>「名前」で読み上げる内容を設定できる。

アクセシブルなFlashの事例

FLASHの字幕(キャプション)対応

  • FLASH CS3で、かんたんに字幕(キャプション)をつける機能がついた。
    1. FLVPlaybackCaptioningコンポーネントをステージに置く。
    2. 「パラメータ」で字幕の内容を書いたXMLファイルを指定する。
  • XMLファイルはTimed Textという仕様にする。内容は単純な構造のXMLファイル。

FLASHのアクセシビリティの参考図書

ユーザテストの成功のポイント

FLASHの話が終わった後、ユーザテスト全般について、植木氏からアドバイスがあった。

  • サイトに全く関係していない人に協力を呼ぶ。
  • サイトのターゲットに近い人を呼ぶ(年齢・性別)。
  • ただし、いくらターゲットに近くても、最低限PC/インターネット基本操作はできる人がよい。基本操作すらできないとユーザテストにならないことがある。
  • ユーザ数は、属性につき5人必要。障がい者のユーザテストをする場合、視覚障がい5人、聴覚障がい5人・・・と属性ごとに5人。1人だと主観が入ってしまう。
  • ユーザ操作中は観察・記録に徹する。声をかけて正解に誘導しようとしない。
  • ユーザのコメントを鵜呑みにしない。
    1. コンテンツに問題がある場合
    2. UAに問題がある場合
    3. ユーザのスキルに問題がある場合

    1ならば修正すべきだが、2や3の場合は・・・?

  • サイトの再デザインは、分析結果に偏りすぎない。ひとつの属性のユーザだけに偏りすぎると、その他のユーザにマイナスが発生する。
  • ユーザテストはJIS 8341-3(JISのアクセシビリティ規格)への対応度を調べるには不向き。専門家の診断が良い。
  • JIS 8341-3やWCAG1.0は最低限のことしか定めていない。実際にサイトが使えるかどうかはユーザテストが必要。

リッチ・インターネット・アプリケーションのアクセシビリティ

特別講演2「Webアクセシビリティ概論」

東京女子大学 渡辺 隆行氏の講演。書籍『Webアクセシビリティ』第1章よりを中心にWebアクセシビリティの概論を説明。

書籍『Webアクセシビリティ』の紹介

  • 『Webアクセシビリティ』は貴重な本。アクセシビリティ専門家向けの本はアメリカにもなかった。

アクセシビリティの構成要素

  • コンテンツが制作され、ユーザに届くまでには、いくつもの段階がある。
  • 「制作者」→「オーサリングツール(Dreamweaverなど)」→「アクセシビリティの評価ツール(WebInspectorなど)」→「コンテンツ」→「ブラウザやメディアプレーヤー」→「UA(支援技術)」→「ユーザ」
  • これらの段階すべてで、アクセシビリティへの対応を底上げしないと、アクセシビリティは良くならない。
  • 例えば、オーサリングツールが賢ければ、制作者が負担を感じずにアクセシビリティが実現できる。しかし、日本で一番使われているツールは、アクセシビリティ機能は持っているけど、知られていない。
  • アクセシビリティの評価ツールには限界がある。喩えるならスペルチェッカーと同じ。スペルチェッカーは単語単位のチェックはできても、文章の内容がわかりやすいかチェックできない。また、ツールまた得意分野に偏り(クセ)がある。
  • 正しいHTMLが書かれていても、UAが対応していないことがある。例えば日本で一番使われているスクリーンリーダは見出し読み上げに対応していない。欧米ではこれは少ない。日本特有の傾向と思われる。
  • 正しく対応しているUAがあっても、ユーザがその機能を知らなければ使えない。例えば、そこに表があることにユーザが気がつかなければ、表読み上げモードを利用しない。ユーザの教育も必要。

UAI研究会の取り組み

  • UAI研究会では、海外のNVDAというオープンソースのスクリーンリーダを、日本語で使えるようにしようとしている。

アクセシビリティが確保できているか確認する方法

  • アクセシビリティが確保できているか確認する方法は3つ。
    1. ユーザテスト
    2. 評価ツール
    3. 専門家の評価
  • ユーザテストには「ユーザ数」「どう評価してもらうか(タスクの設定)」などのポイント。また「ユーザの心的負荷」も測定できるのではないか。

WCAG2.0とJIS 8341-3:2009

  • WCAG2.0が4月に勧告候補になった。2008年末に勧告予定。
  • WCAG1.0には欠点があった。それを補うよう、WCAG2.0は「人間の認知」にもとづいて策定されている。
  • JIS 8341-3 2004年6月に策定。JISは5年に1度見直しがある。2009年6月の見直しでWCAG2.0に完全対応させる予定。
  • JISの項目を個別にはつくらない予定。植木真氏が代表としてW3Cのワーキンググループにも意見を出している。

セミナー資料はダウンロード可能。

嬉しいことに、当日のセミナー資料がハーモニー・アイのウェブサイトに公開されている。特に植木氏の資料はWeb上でもあまり見かけることのないFLASHのアクセシビリティ確保に関するポイントが掲載されており、貴重な資料だと思う。

【セミナー資料】

発表資料ダウンロード

セミナーレポート、次回は研究発表「評価ツールだけでは役立たない! ユーザー評価で分かった使えないアクセシビリティの実態」について報告する。<つづく>

【関連リンク】

NPO法人ハーモニー・アイ

この記事に拍手する

はてなブックマークに追加はてなブックマークに追加

※このエントリは CNET Japan ブロガーにより投稿されたものです。朝日インタラクティブ および CNET Japan 編集部の見解・意向を示すものではありません。
運営事務局に問題を報告

最新ブログエントリー