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

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

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

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


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

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

条件)

  • 欲しい情報:「福岡市の明日の天気情報」
  • Yahoo!@niftyの各TOPページからスタート
  • 時間の目安はだいたい10分程度。
写真:音声読上ブラウザを使ってる風景2
ノートPCの画面は隠してます
  • 立候補してくれた生徒には、ホームページリーダー(ver3.01)の基本操作を教える
  • 始めるときはノートPCの画面を隠す
    • 目隠しだと不慣れなキーボードで操作してもらうことになるので画面を隠すだけに
  • プロジェクタにはホームページリーダーの画面を表示し、他の生徒たちには対象生徒の手元や、実際にどこを読み上げてるかを見比べてもらう。
    • Webサイト上のどこをどう読み上げてるのか、どこで詰まっているかを観察してもらうのが目的

結果)

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

個人的感想

  • @nifityの方がアクセシビリティの面では頑張ってるように感じた。
    例えば、現在位置表示のパンくずリストも、読み上げを意識したマークアップになっていた。

    • 天気予報トップ の中の 九州 の中の福岡県 の中の福岡市博多区の天気 」は、『現在位置:天気予報トップ の中の 九州 の中の 福岡市博多区の天気』 と読み上げられる
  • 講義後、体験してもらった生徒に感想を聞くと「目が疲れた」と意外な感想が。
    • 耳に集中するため、目を一点に集中させていたためらしい。
      目を動かすと集中できなくなるのと、キーボード操作のためには目は開けてないといけなかったからみたいだ。
    • 目隠しをすると結果は変わったかもしれない。
    • 普段慣れない耳を使って情報収集する時に、無意識に日頃情報を取得する視覚も使おうとしてたのかもしれない。

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

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

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

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

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

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

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

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

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

アクセシビリティ講義で実際に音声読み上げブラウザを使わせてみたよ” への3件のフィードバック

  1. 僕もWebは大工に近いと思っています。
    同じような感覚を僕も持っているのですが、
    やはり派手な方向が重宝されてしまう現状。
    裏方の話で盛り上がる場が欲しいですね~。

  2. 以前、熊本県下の自治体のサイトを作る会社で働いていたのですが、自治体サイトは特にアクセシビリティが重要視されていました(盲目の方が公共情報を得られないなんて、あってはならないことですからね)。IBMのホームページリーダーを使って試行錯誤したのを覚えています。

    それにしても『目が疲れた』とは面白い感想ですね!なんだか分からなくもないです。

    あ、僕のブログの引用ありがとうございます!

  3. 意外にアクセシビリティネタでコメントしてもらって嬉しい我流です。

    >inamoto殿
    裏方は裏方で「やる事の意味・意義」を持つべきだし、
    それが「独りよがり」にならないようにしないといけないとも思います。
    あと裏方も説明する義務があるなーと最近感じてます。

    FWW(福岡のWebで働く人々)と中心とした各コミュニティには裏方の方々も大草んかしてて、話も盛り上がってますよ。
    ご興味あれば、このブログの一番下のコミュニティのリンクを覗いてみてください!

    >nippei殿
    >(盲目の方が公共情報を得られないなんて、あってはならないことですからね)
    情報格差/差別はあってならんですからね!
    僕らの後ろには情報を待ってるユーザーがいると思うと頑張れたりしませんか?そうですよね?

    「目が疲れた」は面白かったですね〜
    今度は実際の利用者の声や実操作を見たいです。
    ブログも楽しみにしております^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*