asahi.com： アサヒ・コムがリニューアル　ユニバーサル・デザインを導入 - asahi.com提供サービス

web

さらに新しいサービス機能としてウェブ・アクセシビリティ支援ブラウザを用意。アサヒ・コムのページを音声で読み上げたり、漢字の読み仮名を表示、文字をより大きく拡大することができます。このブラウザはアサヒ・コムからダウンロードして無料でご利用いただけます。「インターネットで文字を読むときに目が疲れてつらい」「こどもと一緒に読むときにルビがほしい」といったときにお使いください。ブラウザの操作もプルダウン・メニューのような複雑な操作でなく、単純なボタン式でわかりやすいものになっています。また、市販の読み上げソフトをご利用の方にも、いままでより使いやすく、読みやすい仕様を心がけました。

ウェブアクセシビリティ対応が目玉らしいので、個人的に視覚障害者サポートのボランティアをしている都合、どの辺が変わったのか asahi.com トップの HTML ソースをざっと眺めてみましたが、1x1 ドットの gif イメージと img タグの alt 属性をうまく使って、音声読み上げ時にいまどのページのどのブロックを読み上げているのかわかりやすいよう配慮がなされていました。例えばトップ記事ブロックの頭にはこんな記述がされています。

<!-- コンテンツ左 --><td id="con1">

<div id="bc">
<a name="constart"><img src="/image/dot.gif" width="1" height="1" alt="ここから本文エリア"></a><img src="/image/dot.gif" width="1" height="1" alt="現在位置">asahi.comトップ
</div>

〜トップ記事見出し〜

<h2 class="b1"><img src="/image/dot.gif" width="1" height="1" alt="その他の最新トップニュース"></h2>

〜以降トップ記事一覧〜

これを音声ブラウザで読み上げると『ここから本文エリア』→『現在位置』→『asahi.comトップ』→記事見出し→記事といまどの部分を読み上げているのか一目(一聴？)瞭然、という具合になっています。CSS でのレイアウトを徹底出来ず(デザイナーの技量の問題とか、記事の生成システムの限界か)テーブルタグレイアウトから脱却できない状態でアクセシビリティを改善するための苦肉の策なのかな、と思いました。他にも accesskey 属性をきちんと使っていたり、記事本文ブロックは読み上げを意識して余計なタグを入れずプレーンなテキストで構成されていたりと、ソースを眺めるといろいろ工夫したところが見てとれました。