百見は一聴に如かず

面白い記事タイトルだなと思ってご一読いただければ幸いですが、Webページの音声読み上げをチェックする場合は、スクリーンリーダーや音声ブラウザで実際に読み上げてみましょう(ちゃんと「聴いて」みましょう)というお話です。

スクリーンリーダーや音声ブラウザといった支援技術を使っての読み上げチェックは、それなりの時間が取られてしまったり(シリアルに情報を見る/聞く形なので素早く一瞥して検証することができない)、あるいは支援技術の使いかたに不慣れで効率的に作業できなかったりして、つい面倒だと感じてしまうサイト制作者やウェブマスターさんも多いと思います。そういった方のために、簡易的に、音声読み上げの内容や順序を線形化(リニアライズ)という形で表示してくれるツールがあります。テキストブラウザのLynxや、FirefoxアドオンのWeb Developerなどです。しかし、こうしたツールを使ったリニアライズ表示ではわからないことがある、というケーススタディをご紹介したいと思います(恥ずかしながら、当サイトの失敗例から...)。

Lynxでの表示例
Web DeveloperでCSSを無効にした表示例

上の2つの図は、ある時点での、当サイトのトップページの新着情報をそれぞれLynxとWeb Developerでリニアライズ表示してみた例です。一見何の問題もなさそうに見えますね。併せて、W3CのHTMLバリデータを使って検証しましたが、ソースコードの記述も適切(XHTML 1.0 Strictに適合している)という判定でした。

ところが、この新着情報部分をソースコードで見てみると、下記のようにリスト(箇条書き)の入れ子になっていたのです。

<ul>
 <li>2009年11月14日
  <ul>
   <li>
    <a href="(略)">ユーザビリティの側面からURLを考えてみる</a>
   </li>
  </ul>
 </li>
</ul>

<ul>
 <li>2009年11月 5日
  <ul>
   <li>
    <a href="(略)">「WCAG 2.0」の読みかた</a>
   </li>
  </ul>
 </li>
</ul>

<ul>
 <li>2009年10月30日
  <ul>
   <li>
    <a href="(略)">文字拡大/縮小機能の実装を外しました</a>
   </li>
  </ul>
 </li>
</ul>

[Tab]キー操作でリンク箇所(この例の場合、コラム記事のタイトル)だけにフォーカスを当てて読み上げる分にはさほど問題ないのですが、この新着情報部分を頭からすべて読み上げた場合、「リスト、項目数は1つです。2009年11月14日。リスト、項目数は1つです。リンク:ユーザビリティの側面からURLを考えてみる。リスト、項目数は1つです。2009年11月 5日。リスト、項目数は1つです。リンク:「WCAG 2.0」の読みかた。...」といった具合になります。日付とその直後の記事タイトル名は続けて読み上げてほしいところですが、いちいち、箇条書きであることとその項目数が読み上げられてしまうのです。聴覚によってのみ情報を得るユーザーにとっては、とても煩わしく聴こえてしまうことでしょう。

この問題は、音声読み上げのエミュレーター「Fangs」で表示してみて「あれ?おかしいかも」と気付き、念のため音声読み上げで確認して「やっぱり煩わしい」ということがわかったケースです。これを受けて、今回は下記のようにソースコードを変更することにしました。

<ul>
 <li>
  2009年11月14日<br />
  <a href="(略)">ユーザビリティの側面からURLを考えてみる</a>
 </li>
 <li>
  2009年11月 5日<br />
  <a href="(略)">「WCAG 2.0」の読みかた</a>
 </li>
 <li>
  2009年10月30日<br />
  <a href="(略)">文字拡大/縮小機能の実装を外しました</a>
 </li>
</ul>

他にも、ソースコードの記述(マークアップのしかた)としては正しく(W3Cのバリデータで確認したところOK)、かつ、リニアライズ表示(あるいはCSSを外して表示)して問題なさそうでも、実際に音声で読み上げてみると問題あるケースがあるかもしれません。意外なところに、細かな(でも視覚障害者にとっては大きな)落とし穴がある可能性があります。皆さんもぜひ、「百見は一聴に如かず」を肝に銘じて、できるところ/気づいたところから改善してみてはいかがでしょうか。