トップ  »  東京Webデザイナー日記リターンズ  »  アクセシビリティ  »  ハーモニー・アイ主催「本物のWebアクセシビリティ・セミナー」参加レポート

ハーモニー・アイ主催「本物のWebアクセシビリティ・セミナー」参加レポート

2008年7月18日(金)、NPO法人 ハーモニー・アイ主催の「本物のWebアクセシビリティ・セミナー」に参加してきました。

今まで書籍やネットで収集したアクセシビリティの知識を元にWebサイトを制作してきましたが、どうしても実際にサイトを使用している視覚障害者の方々のお話を伺ってみたかったのです。

今までに聞きたくても聞くことが出来なかった視覚障害者の方の生の声を聞くことができ、本当に有意義なセミナーでした!関係者の方々に、深く感謝いたします。

今回のセミナーは以下の5つのパートに分かれていました。

以下、一つ一つのパートに関して、セミナー中に取ったざっくりとしたメモと簡単な感想を共有いたします。

セミナー内で伺ったお話のメモは「引用(blockquote)」で表現し、それに対する私個人の意見は地の文で表現します。

タイピングが遅くて文章を端折ってしまっていたり、理解不足でご発言をきちんと拾えていない可能性があるので、そのような点にお気づきの方はご指摘いただければ幸いです。

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

我が家では「アクセシビリティの巨匠」というあだ名で呼ばせていただいている、インフォアクシアの植木さんが、FLASHコンテンツをアクセシブルにするためのお話をしてくださいました。

過去のFlashの問題「読み上げ出来ない・キーボードで操作できない」

現在は、作成方法に気をつければ、ある程度解決できる。

Flashで複数のボタンがある画面を制作する際、アクセシビリティパネルにてタブインデックスの順番を指定できる。(後で、中途の順番に何かを挿入する際に備えて、タブインデックスの数字を10番刻みにしておくと安心)

音声読み上げをして欲しいオブジェクトは、アクセシビリティパネルで「名前」と「説明」をテキスト入力する。

2008年7月25日追記

植木さんご本人より、"アクセシビリティパネルで「名前」と「説明」をテキスト入力する。"というのは、基本的には「名前」だけでOKです。HTMLのalt属性値=Flashの「名前」、という感じですね。というコメントを頂戴いたしましたので、謹んで追記訂正させていただきます。

参考サイト

Flash CS3では、FLVPlaybackCaptioningコンポーネントを使用し、XMLファイルを読み込んで、Flashビデオにキャプションを入れることができる。

Flashのアクセシビリティに関してのユーザーテストに関してのTIPS

  • サイトに全く関係していない人に協力を依頼する。
  • PCのスキル(ブラウザの操作などが一人でできる)がある人を探す。
  • ユーザー数は、ひとつの属性につき5名。(「全盲の方で5名、弱視の方で5名…」など)
  • 進行役は、ユーザーの手助けをしない(完全に観察・記録に徹すること)
  • ユーザーのコメントを鵜呑みにしない。(もしかしたらユーザーのスキルに問題があるのかもしれない。他に問題があるとしたら、「コンテンツに問題がある」「ユーザーエージェント[特に支援技術]に問題がある」かもしれない。)
  • リデザインは、分析結果に偏り過ぎない。
  • ユーザーテストは、ガイドラインへの対応度を調べるには不向き。(JIS X 8341-3への適応度を調べるには、専門家によるレビューをしてもらった方がよい)

2008年7月25日追記

植木さんご本人より、ユーザーテストのTIPSは、Flashや視覚障害者に限定したものではなく、ユーザーテスト全般についてのものです。言葉足らずでスミマセン(汗)というコメントを頂戴いたしましたので、謹んで追記させていただきます。こちらこそ、理解不足で失礼いたしました(汗)

ニュース

「WAI-ARIA」日本語訳が公開

私は最近Flashの技術にはかなり疎くなってしまっているので、タブインデックスの指定が出来ることや、XMLファイルを読み込んでキャプションをつけられることなどを知らなかったので、とても参考になりました。

また、ユーザーテストに関してのTIPSは、視覚障害者の方に限らずどのようなユーザーテストの際も気をつけたい事柄だと感じました。

「Webアクセシビリティ概論」渡辺隆行先生(東京女子大学)

渡辺隆行先生は、Webアクセシビリティ 標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践の翻訳に携わった方。今日は、この本の第一章についてのお話。

相互依存しているWeb allyの構成要素

制作者→オーサリングツール→評価ツール→コンテンツ→ブラウザ・メディアプレイヤー→支援技術→ユーザー

コンテンツは見出しをきちんとつけてマークアップしよう。(見出しは、下にあるコンテンツを集約したラベルである。)

日本で最も使われているスクリーンリーダーは、見出しを利用することが出来ない。サイト内リンクでジャンプすることが出来ない。(ホームページリーダーやJAWSでは、見出し先読み機能を使える)

支援技術の機能が足りない。機能があってもユーザが使い方を知らなかったら使うことが出来ない。支援技術のレベルアップ、ユーザー教育が必要。

オーサリングツールのレベルが高ければ、制作者のスキルが低くても、アクセシブルなサイト作りの支援をしてくれるはず。(機能はあるけれど、目立たない)

「評価ツールは、スペルチェックと同じ」→間違えた単語が正しいスペルだったら、スペルチェッカーには分からない。

スペーサーGIFのalt属性に「スペーサー」と入っているとか、画像の横にテキストがあるのに、重なるalt属性が入っているなどの事例が多い。

評価ツールには癖があり、万能ではないことを知らないといけない。

JAWSは、高機能なのだが高価格。

NVDAというオープンソースのスクリーンリーダーを、日本語で使えるような試みが始まっている。

サイトの評価方法

  • ユーザーテストを実行
  • 評価ツールを使う
  • 専門家によるチェック

ユーザーテストを実行

  • 単に使ってもらって、感想を聞く?
  • タスクを与えて、実行できるかどうか?
  • 公的なインタビューを行う?
  • 心拍負荷の測定をする(ストレスがあると、高くなる?)(黒野メモ:ここは聞き取れなかったので、曖昧。)

WCAG2.0がそろそろ勧告される。

JIS X 8341は、WCAG(2.0?)に適合しながら、日本ならでの問題をカバーしていくようにする予定。

渡辺先生は非常に早口な方で、スライドも最初の図一枚しかありませんでしたので、内容が聞き取れず曖昧になってしまっている部分が数点あります><

この話をお伺いして、オーサリングツールが現在よりさらに発達していったとすれば、文書内のどこにどのような見出しをつけるか、alt属性をどのようにつけるか、などの人間の判断を補助してくれるようになるのかも?などと妄想した次第です。(「この画像は、見出しですか?写真ですか?」などの質問に答えていくと、適切なalt属性案を提案してくれるとか。はい。妄想です。)

研究発表「評価ツールだけでは役立たない!ユーザー評価で分かった使えないアクセシビリティの実体」村山ひでこさん(NPO法人ハーモニー・アイ研究会)

ハーモニー・アイ研究会は、以下のような方々で構成されているとのこと。

日本の五大政党のWebサイトをアクセシビリティの観点から実際に調査した研究発表でした。

95%→2年前に、英国の調査で(黒野メモ:このあとが聞き取れませんでした><)

会場参加者への、使用チェックツールのアンケート

  • aDesigner(IBM)使用者少なめ?
  • WebInspector(富士通)使用者多め?
  • その他(自社開発)会場にお一人、自社のアクセシビリティガイドラインを作成して評価基準にしている人がいた。

「日本の5大政党のWebサイトをヒューリスティック検証」

問題点の数

  • 自民党 165件(CSSに問題あり)
  • 民主党 306件
  • 公明党 13件
  • 社民党 306件
  • 共産党 67件

ユーザーテストのタスク

後期高齢者医療制度について各政党の政策を調べてください

ユーザーテストは、三つのサイトしかできなかった。その理由は…。

自民党のサイトが、ユーザーテストから外れた理由(のムービー)→自民党のサイトは、「アクセシビリティ〜」の一文があるにも関わらず、グローバルナビゲーションにalt属性が無いので、グローバルナビのところを画像名で読んでしまう。

民主党のサイトが、ユーザーテストから外れた理由(のムービー)→冒頭から、議員の名前を何回も繰り返してしまい、内容に辿りつけない。

公明党だけ、「ウェブアクセシビリティについて」のページがある。

ここで、テストの様子のムービーを見る。

各政党、リッチコンテンツで必ず閲覧できない状態になる。

各政党、YouTubeで番組をもっていたりする(のがよく分らない?)

政策の部分がFlashのことが多い。

社民党のサイトは、見出しが画像化されている部分のalt属性が無いところがあり、今どこを読んでいるか分からなくなることがある。

altに「社民党ロゴ」と入れてしまっている。

共産党は志位さんを「ココロザシイ」さんと読んでしまっている。

社民党は「ヤシロミントウ」と読んでしまっている。(黒野メモ:この部分で、「ページの冒頭で漢字に振り仮名をつけるとよい」とおっしゃっていたが、その方法で、そのページのその単語全ての読みを指定することが可能なのか?私には分らなかった。)

どの政党も、各ページで情報構造が違うので混乱を引き起こしがち。(右メニューのページと左メニューのページの混在など)

ツールとJISは「=(イコール)」ではない。

伝え方と伝わり方は違う

理想は「ユーザーテスト」「チェックリスト」「JIS」三つで評価すること。しかし、予算や時間の都合で三つ全てを行うことは出来ないかもしれないので、そこはケースバイケースで。

政党のサイトというのは、幅広い方々にその内容を伝えるために、かなりアクセシビリティに配慮して作成すべきWebサイトであるのだろうと思いますが、なかなかまだ実現できていない部分も多いのだな、ということをまざまざと思い知らされました。

ひとつのサイト内で、各ページの情報構造をころころ変えないというのは、政党のサイトに限らず様々なサイトについても同様かと思われます。

また、テキストとalt属性内の漢字で書かれた固有名詞を、スクリーンリーダーや音声ブラウザが違う読み方で読んでしまうことがあるということは、初めて知りました。村山さんがちらっと「ページの冒頭でその固有名詞の読み仮名を提示する」ということに触れられていたように思うのですが、その方法で、ページ内に出現するその固有名詞全ての読み仮名を指定できたりするのでしょうか?ということが分らなかったので、後日調べてみたいと思っています。

ハーモニー・アイオリジナルの視覚障害者Web使用現状DVDのCM

ハーモニー・アイで過去に行った視覚障害者の方のWebサイトユーザーテストの様子をビデオで撮影したものがあり、そのDVDを現在製作中。ということで、製作中のDVDの一部分を見せてくださいました。

5分間拝見した限りではとても勉強になりそうな内容でしたので、価格にもよりますが、購入してみたいと感じました。

以下、DVDを見た感想メモです。

パネルディスカッション「東西の視覚障害者に、生の声を聞く」

今回のセミナーで、私が一番感銘を受けたのがこのパートです。モデレータの武者さんをはじめとした5名の視覚障害者の方々が会場とSkypeで参加し、生の声を色々聞かせてくださいました。

会場の参加者からの質問に答えるコーナーがあったのですが(質問は休憩時間にシートに書いて提出してある)、なんと私の質問が一番目に採用されましたw(詳しくは以下に)

会場参加者は、モデレータの武者さんとDさん(パソコン暦20年/PCスキル高)という男性。Skype参加者は、Sさん(元SEの男性/PCスキル高)、別のSさん(地方公務員の男性/PCスキル高)、Nさん(主婦/PCスキル中程度?)。

「政党サイトはよく見ているか?」という質問には、全員NO。

「それ以外によく利用するサイトは?」という質問で挙げられていたのは、以下のサイト。

  • Yahoo!オークション(パソコン部品を買って、自作組み立てする。商品の説明欄が重要。最近「詳しくは画像を見ろ」という説明が多くて困る。欲しい情報はなんとしてでも取得しようとしている。(Dさん)
  • Amazon(別のSさん)
  • Yahoo!ミュージック(別のSさん)
  • ヨドバシカメラ(別のSさん)
  • ネットの辞書/Wikipedia(別のSさん)
  • Google(Sさん)
  • 生協のサイト(は、楽に注文できる)(Nさん)
  • 温泉や旅行関係のサイト(入力フォームの最後の最後で使えなくなってしまうサイトあり)(Nさん)

高知システムのネットリーダーというブラウザが使いやすいらしい。

キーボードの「H」で見出しにジャンプ、「T」で表にジャンプ、「E」で入力フォームにジャンプ、などの機能があるとのこと。(黒野メモ:HTMLをある程度知っている人でないと、使うのが難しいかも?)

質問コーナー

質問1「ページの上部にグローバルナビゲーションがある(HTML上でもソースの先頭にある)場合、『ナビゲーションをスキップして本文へ』などのリンクをつけることがあるが、使っていますか?使いにくいとしたら、改善案などを教えてください」(←これが私の質問!)

主婦のNさんは「使います」とのお返事。

PCスキルの高い別のSさんは、ブラウザのナビゲーション機能を使うので使わないとのお返事。

パソコン暦20年のDさんは、使うけれどやはり本文が先にあったほうがよいとのお返事。

元SEのSさんは、「ナビゲーションをスキップして本文へ」が最善ではない。ページ内リンクが効かないこと(音声閲覧環境)もある、とのお返事。

質問2「YahooやGoogleを使いにくいと感じますか?(黒野メモ:だったと思うのですが、質問内容あってるでしょうか?)」

これに対して、別のSさんが「検索結果一覧に表示される文章が短く、結局内容を把握するには対象ページに飛んでいかなければならないので不便」とおっしゃっていた。

(黒野メモ:このあたり、PCの電源が切れてしまいあまりメモを取れていません…)

質問3「リンク先がPDFファイルだった場合、いかがですか?(黒野メモ:だったと思うのですが、質問内容あってるでしょうか?)」

PDFファイルを作成する場合「コピーのためのテキストを抽出」と「×××(聞き取れず。アクセシビリティオプション?)」を許可しておいて欲しいとのこと。

元SEのSさんは、PDFファイルをWordにして閲覧することもあるとのお返事。

主婦のNさんは「PDFファイルは難しいのでパス。テキストファイルも欲しい」とのお返事。

パソコン暦20年のDさんは、テキスト化できる形にしておいて欲しいとのお返事。

別のSさんは、PDFファイルをテキスト化すると表が崩れてしまうので、表はExcelなどであげておいて欲しいとのお返事。

質問4「動画コンテンツの音声が良くない場合、サブ音声としてプロのナレーションが入っていると嬉しいか?」

武者さんが、「プロのナレーションがついていたとしても、耳の聞こえない人には内容が伝わらない」とのお返事。

その他、気になったご意見のメモ。

元SEのSさんから、「作る立場で作るのではなく、ユーザの立場でユーザの行動を考えて作成すれば、おのずと答えが見えるのでは?」「先ほどのスキップリンクの話も、スキップリンクではなくて、本文が先にあってメニューを後にしてもらった方がよい。視覚系ブラウザでは、CSSでメニュー部を上に来るようにできるはず。本文が先にあるほうがSEO的にもよいのでは?ページ構造そのものを見直して欲しい」とのお話。

モデレータの武者さんから、「教科書的なサイトだけでなく楽しめるサイトがよい。視覚障害者の方々は、意外と情報を映像メディアからとることが多く、Youtubeもよく使っている」とのお話。

閉会後にDさんにご挨拶させていただいて立ち話をしたのですが、やはり、私が質問させていただいたスキップリンクについて「メニューよりも本文を先にして欲しい。やはり、素早く内容にアクセスしたい。本文が文書のはじめにある上で、冒頭に『メニューへジャンプ』のスキップリンクをつけると良いのでは?サイトのトップページでは、サイトの概要を知るためにソースの上部にナビゲーションがあるのでも良いかも」とおっしゃっていました。

これらのご意見には、正直に言ってかなり驚きました!今までのサイト制作は机上のアクセシビリティ知識で行っていたのかもしれないと反省しましたし、音声ブラウジングに最適なHTMLのソースオーダーについて、もう一度色々勉強してみる必要があると感じました(ただし、それ以外にも様々な閲覧環境があるので、それぞれに対して全てベストなHTMLを準備できるのか?など、考えるべきポイントは沢山あります)。

以上、長文になってしまいましたが、私のレポートとさせていただきます。

3500円の有料セミナーでしたが、非常に内容の濃い有意義なセミナーでしたし、直接視覚障害者の方とお話できるなど会場に足を運ぶことで得られるものも多くありましたので、参加して非常に満足しました。

また機会がありましたら、ぜひお邪魔させていただきたいと考えています。改めて、関係者の皆さまありがとうございました!

[2008年7月22日]   はてなブックマーク - ハーモニー・アイ主催「本物のWebアクセシビリティ・セミナー」参加レポート

トラックバック(0)

このブログ記事に対するトラックバックURL

http://cremadesign.jp/mt401/mt/mt-tb.cgi/818

コメント(8)

村山ひでこ :2008年7月23日 01:01

こんにちは、村山です。
先日はセミナーにお越しくださってありがとうございました。またすっごい詳細なレポートもありがとうございます!!

当日は聞き取りにくいところもありまして失礼しました。英国調査の元はこのサイトです。
http://www.comm.twcu.ac.jp/~nabe/UAI/20060909/data/presen/nabe_DRCReport2004.html
当日講演された渡部先生が訳されたものです。この報告の一番最後の方に当日引用した調査があります。

あとよみがなについてですが、最初に出現したものによみがなをつけておくとそれ以降変わることはないです。ただ、読み方を教えるという意味で、よみがなをふっておいたほうが親切かと。一度正しいよみかた聞けば、その後正しく読まれなくても「そういうことか」とユーザーの方が認識してくれるので。特に社民党は必須ですね。ロゴ部分から読み上げるので。。。

以上、セミナー補足編?でした(長文失礼しました)。

crema Author Profile Page:2008年7月23日 12:32

村山さん、こちらこそ当日はありがとうございました!
村山さんの発表を含め、全てが非常にためになるセミナーでしたので、沢山の気付きをいただくことができました。
英国調査元サイト、教えてくださってありがとうございます。ボリュームがあるので、ゆっくり読ませていただきます!
読み仮名の件は、なるほどです。もし、技術的に音声ブラウザ向けに読み仮名を指定することができれば良いですよね。XHTML 1.1のruby要素とかを使って、ごにょごにょできないのでしょうか〜(などど、また妄想です><)。

植木 :2008年7月24日 19:52

詳細なレポート、恐縮です。
2点補足ですが、まず"アクセシビリティパネルで「名前」と「説明」をテキスト入力する。"というのは、基本的には「名前」だけでOKです。HTMLのalt属性値=Flashの「名前」、という感じですね。
もう一つ、ユーザーテストのTIPSは、Flashや視覚障害者に限定したものではなく、ユーザーテスト全般についてのものです。言葉足らずでスミマセン(汗)

crema Author Profile Page:2008年7月25日 16:08

植木さんご本人からコメントを頂戴できて、とてもありがたく思います!
きちんとお話を聞けていなかった部分があり、大変失礼いたしました。
慎んで追記訂正させていただきました。
色々と植木さんにお話を伺いたいことがありますので、
またゆっくりお時間あるときに飲み会などご一緒できれば嬉しいです!

kirara_397 :2008年7月25日 17:47

ビデオ撮影&CM制作担当の者です。
DVDのCMをご興味を持っていただき、ありがとうございます!
頑張って作りますので、どうぞご期待下さい!

crema Author Profile Page:2008年7月27日 16:47

わざわざコメントありがとうございます!
楽しみにしております!!

ミキ・オキタ :2008年8月14日 10:13

はじめまして。ミキ・オキタと申します。

CNET Japanで読者ブログを書いている者です。
私もセミナー参加しておりました。
少し時間が空いてしまいましたが、
私も当日のレポートをブログに掲載いたしました。

その際、こちらのページへもリンクさせていただきました。

【読者ブログ】- アクセシビリティセミナーレポート[3]
http://japan.cnet.com/blog/webclip/

以上、よろしくお願いいたします。

crema Author Profile Page:2008年8月16日 11:26

ミキ・オキタさん、わざわざお知らせありがとうございます!
返信が遅れて失礼いたしました。
リンク先のページ、ありがたく拝見いたしました。
アクセシビリティに関しても、今後勉強を続けていきたいと思います。
どうぞよろしくお願いいたします。

コメントする

このページの先頭へ

東京ナイロンガールズ

比較的人気の記事

crema design menu