アクセシビリティ講義で実際に音声読み上げブラウザを使わせてみたよ

昨日は久々のデジハリ講義でした。
内容は一ヶ月前のWeb概論に続いて、ユーザービリティやアクセシビリティの概論的な講義でした。

スライドは用意されており、基本こちらとしては何も準備しなくても良かったのですが、
それ以上の事も持ち帰って欲しかった個人的な想いもあり、
頼まれてもいないのに「音声読上ブラウザで明日の福岡市の天気が分かるかどうか」も敢行。

写真：音声読上ブラウザを使ってる風景

前半は準備したスライドをそのままで、実際の案件や実例などを補足として見せながら。
印刷して配布してもいるので、読んで分かる内容は、軽く触れる程度に。

アクセシビリティ体験：音声読上ブラウザで欲しい情報に辿り着けるか

条件）

• 欲しい情報：「福岡市の明日の天気情報」
• Yahoo!、@niftyの各TOPページからスタート
• 時間の目安はだいたい10分程度。

ノートPCの画面は隠してます

• 立候補してくれた生徒には、ホームページリーダー(ver3.01)の基本操作を教える
• 始めるときはノートPCの画面を隠す
  • 目隠しだと不慣れなキーボードで操作してもらうことになるので画面を隠すだけに
• プロジェクタにはホームページリーダーの画面を表示し、他の生徒たちには対象生徒の手元や、実際にどこを読み上げてるかを見比べてもらう。
  • Webサイト上のどこをどう読み上げてるのか、どこで詰まっているかを観察してもらうのが目的

結果）

他の生徒は実際の操作する手元と、プロジェクターの画面を見てもらいました

• 結果としてはYahoo!,@niftyともに欲しい情報は時間内に取得できなかった。
• Yahoo!天気情報 では以下の点で苦労していた
  • [本文へジャンプ]のページ内リンクがなぜか効いていなかった
  • 日頃使ってるだろう、日本地図から地域選択する部分はFlashだったため、何もテキストで読み上げられる事が無かった
    • ホームページリーダー ver3.01がFlashに対応していないため。 ver 3.04なら読み上げたかもしれない。
  • [ピンポイント天気]の後の都道府県のセレクトボックス[全国▼]の中身が毎回全て読み上げられてしまう。[東京都「オフ」]と選択してる状態かどうかも読み上げてしまう。
    （ここはさすがに戸惑っていたのでヒントを出しました）
  • 都道府県で[福岡県▼]で検索すると、郵便番号別に地名の一覧表で出てくる。
    • テーブル(表)の聞き方が慣れてない生徒はここで一度パニックに
    • 福岡市の情報が出るまで[次の25件]を探してはリンク、探してはリンクで頑張ったところでタイムオーバー。
• 全国の天気総合情報サイト｜@nifty天気予報 では以下の点が特徴的だった
  • 天気図の情報部分はリストタグ+CSSでの表現なので音声でも読み上げられ、わかりやすかった
  • 九州　今日・明日の天気｜@nifty天気予報 で県名の順番が[福岡県]が一番最後だったので、読み上げまで困惑してた（生徒の中では、九州で最初に読まれる都道府県は福岡県だろうという「日常の慣れ・予測」から大きく外れたから）
  • 福岡市博多区の天気｜@nifty天気予報 まで辿り着いたが、天気情報がテーブルだったため、表の聞き方がわからない彼はここで混乱し、そのままタイムオーバー。

個人的感想

• @nifityの方がアクセシビリティの面では頑張ってるように感じた。
  例えば、現在位置表示のパンくずリストも、読み上げを意識したマークアップになっていた。
  • 「天気予報トップ 九州 福岡県 福岡市博多区の天気 」は、『現在位置：天気予報トップ の中の 九州 の中の 福岡市博多区の天気』 と読み上げられる
• 講義後、体験してもらった生徒に感想を聞くと「目が疲れた」と意外な感想が。
  • 耳に集中するため、目を一点に集中させていたためらしい。
    目を動かすと集中できなくなるのと、キーボード操作のためには目は開けてないといけなかったからみたいだ。
  • 目隠しをすると結果は変わったかもしれない。
  • 普段慣れない耳を使って情報収集する時に、無意識に日頃情報を取得する視覚も使おうとしてたのかもしれない。

Webデザインもいろいろあって、Webサイトの目的を達成できるのであれば、
アクセシビリティを切り捨ててグラフィカルな表現を追求したデザインというのは全然有りだと考えてます。

ただプロとして仕事するならば、アクセシビリティ切り捨てた先に情報得られない人達がいる事も十分に承知した上で行って欲しいと願ってます。
（覚悟みたいなもんでしょうか）

あとSEOだけじゃなくアクセシビリティの面でも(X)HTMLのマークアップの大事さも伝わってくれたみたいで良かったです。

次では講義中に紹介したサイトやツールのリンクをまとめてます。

メモ：講義中に紹介したサイトやツール等

• アクセシビリティ関係
  • アクセシビリティPodcast | アクセシビリティBlog | ミツエーリンクス
    • iTuneのpodcastで最新のアクセシビリティ動向を配信中
    • Webアクセシビリティのポータルサイト『Infoaxia(インフォアクシア)』の代表：植木さんは福岡や佐賀で講演されてます。
    • 植木さん関連のレポートや公開スライド
      • 佐賀のデジタルコンテンツセミナーに行ってきたんだった – 我流天性 – がらくた屋
        • 佐賀のデジタルコンテンツセミナーの植木さんの講演スライド(PDF 1.1MB)
      • 今更だけどCSS Nite in Fukuoka Vol.2の感想 – 我流天性 – がらくた屋
        • 福岡で働くWebの人々: CSS Nite in FUKUOKA Vol. 2フォローアップ(2) 植木さんのプレゼン資料を公開します
    • みんなの公共サイト運用モデル　誰でも使える地方公共団体ホームページの実現に向けて
      • 障害者のホームページ利用方法が動画で公開されています（必見！）
    • 視覚障害者のパソコン・インターネット・携帯電話利用状況調査200
• 視覚障害者のためのソフト紹介
  • まとめサイト
    • スクリーン・リーダー・音声ブラウザについて(KeiYu HelpLab)
    • 用途で選ぶ：就労支援機器のページ
      • 各障害別に多様な用途に応じてソフトを紹介してるサイト
  • スクリーンリーダー
    • PC-Talker XP / PC-Talker Vista 体験版
      • 30日の体験利用可能
      • PC全般操作を音声で読み上げてくれる
  • 音声読み上げブラウザー
    • ホームページリーダー (IBM)
      • 最新版は Ver3.04でFlashにも対応(但しFlash Player7まで。最新版に対応してるかは不明)
      • 授業で使って見せたのは Ver3.01でFlash 未対応。
• 便利ツール
  • Firefox拡張
    • Web Developer 1.1.6 日本語版
      • CSSのON/OFF、画像のALT属性の可視化・置き換え等、Webデザイン、チェックにおいて便利な機能が満載
    • Firebug :: Firefox Add-ons
      • HTML+CSSのレンダリングの解析、JavaScriptのデバックなどWebデザイナーやプログラマにも必須な拡張機能
  • IETester
    • 紹介サイト：IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス
    • IE5,6,7,8 beta2まで一度に動作確認できます。
    • Windows XPの人はIE7にアップデートしてる事が条件。IE6の人はWindows UpdateからIE7にしましょう。
    • 動作は不安定です。IE7を先に起動しておくと安定するようです。
      参考サイト：4バージョンのIEを同時にチェックできる『IETester』を今更ながらテストしてみた / DESIGN Oil BLOG

余談ですが丁度、タイムリーなエントリー発見。

「MEは、WEB業界の大工だ。」僕は以前からこう思っていました。

• 建築家が施主の要望を元に建築デザイン・設計を行なう、大工はその設計を元に忠実に家を組上げる。
• WEBデザイナーがクライアントやWEBプランナーの要望を元にWEBデザインを行なう。MEはそのデザインを元に忠実にWEBサイトを構築する。
• 丈夫でしなやかな家を作る為に、大工は基礎や構造設計など、様々な手法の組み合せからベストな方法を選択し、丁寧に施工を行なう。
• 正しい文書構造で拡張性あるサイトを作るために、MEは様々なマークアップ手段から無駄のない方法を選択し、ミスなくコーディングを行なう。
• 職人気質の大工は仕事の至る所にこだわりを込める。しかしこのこだわりは人目に付いて、喜ばれることを目的としていない。
• 職人気質のMEは、仕事の至る所にこだわりを込める。しかしこだわりを込めたところで、サイトの見た目が良くなるわけでもなく、クライアントも特に喜ぶことはない。

引用元：大工とマークアップエンジニア 〜宮内寿和を知って〜｜grooweb