浅川智恵子のアクセシビリティ論(5)

図1 代替テキストの例<BR>富士山の写真に対して使われがちな代替テキスト。「富士山」または「夕焼けと富士山」が適切である。<p></p><b>代替テキストの候補</b><br>「山」<br>「写真」<br>「富士山」<br>「img0032.jpg」<br>「夕焼けと富士山」<br>「210万画素,シャッタースピード1/50秒,AF, AE」<br>「真ん中左がわに雪が積もった富士山あって，右の方から夕焼けに照らされいる。画面下の方には湖がある。空夕焼けから夜になりかけていて，雲が少しだけ，まばらに浮かんでいて夕日に照らされている」

[画像のクリックで拡大表示]

図2 aDesignerでの到達時間の視覚化結果<BR>（a）は通常のブラウザでの表示画面。（b）（c）（d）はaDesignerで到達時間を視覚化した画面。背景色が暗いほど音声での読み上げが始まるまでに時間がかかることを示している。（c）は「本文へジャンプ」という目には見えない本文へのページ内リンクがページの先頭に挿入されているため，（b）よりも中心部分への到達時間が短くなっている。（d）は見出しタグ（太枠で囲んだ個所）があるためページ全体が明るくなっており，到達時間が全体的に短いことが分かる。

[画像のクリックで拡大表示]

　アクセシブルなWebページを作成するには，ガイドラインや法律の各項目に一つずつ対応していけばよい。ところが，初めからすべての項目に対応した理想的なWebページを作れるほど簡単ではない。しかも，ガイドラインや法律をすべてカバーさえすれば，障害者が本当に使いやすいと感じる“真のアクセシビリティ”が実現できるとは限らない。

　視覚障害者の音声による情報取得能力は健常者と比較すると非常に高い。私は健常者の情報製作者の方からよく，「なぜ音声だけで視覚的なWebページが理解できるのか」という質問を受けるが，情報を取得するポイントがいくつかある。そこで，Webにおいて“真のアクセシビリティ”を実現する具体的な方法を紹介する。

　難易度に応じて，初級，中級，上級に分けている。まずは効果的に視覚障害者のユーザビリティを向上できるポイントに絞って対応する「初級レベルのアクセシビリティ対応」をお勧めしたい。

初級(1)：適切な代替テキストを付ける

　初級レベルで確認すべきは2点のみ。音声ブラウザを使い，音声で提示されている情報を確認することと，本文や主要部分に到達するまでの時間を確認することだ。

　音声ブラウザが読み上げる情報は，「画面上に表示されている文字情報」と「画像などに付加されている代替テキスト」がほとんど。前者は画面に表示されているが，後者の代替テキストは画面上では確認できないため厄介だ。最近は代替テキストを付加しているサイトが増えてきたと実感しているが，同時にチェック項目の存在意義が正しく理解されていないケースが多く見られる。

　代替テキストは「何の」写真（または画像やリンク先）かが伝わらなければ情報としての価値がない。図1[拡大表示]は，富士山の写真に対し使われがちな代替テキストをリストアップしたものだ。この場合，「富士山」または「夕焼けと富士山」が適切といえる。ところが実際には，ファイル名を付けたものや長い説明を見かける。長い説明は写真集のようなページでは適切かもしれないが，一般的なページでは逆に内容理解の妨げになることが多い。

　また，画像が単にレイアウトのために用いられているなら代替テキストは必要ない。しかし，画面上にすき間をつくるための画像（スペーサーと呼ばれる）に対して「spacer」と付加する例や，画面上の線の画像に「ライン」と付加する例，広告に対してただ単に「Click Here」と付加する例が散見される。これらは，空文字列（alt=””）や半角スペースを代替テキストとして指定すればよい。

　これらを回避すべくアクセシビリティのチェックツールを使用する場合，代替テキストが何であれ存在すればエラーがないとレポートしてしまうものが多い。つまり代替テキストが適切かどうかは，人間の目で確認しなければならないのが現状である。そこで筆者のチームでは，アクセシビリティ評価ツール「aDesigner」を2004年に開発した。aDesignerでは，不適切な代替テキストを辞書や文字列マッチングによってある程度検出できる。例えば，「spacer」が代替テキストとして用いられていた場合には，「“spacer”は画像のalt属性として不適切です」のような警告メッセージを表示して確認を促す。

　またaDesignerは，画像リンクへの代替テキストについても確認を求める仕組みになっている。ハイパーテキストの基本である「リンクをたどる」という操作のためには，リンクが次にどのページを開くのかを表示しなければならない＊2。注意しなければならないのは，イメージ・リンクとテキスト・リンクが同じリンク先の場合だ。テキスト・リンクがあるなら，イメージ・リンクの代替テキストは空文字列または半角スペースだけででよい。

初級(2)：読み上げに至る時間を測る

　初級二つ目のチェック項目は読み上げ到達時間である。音声ブラウザではHTMLファイルに記述されているタグの順序で情報を読み上げる。このため目で見る場合と違い，ページ内のコンテンツを順番に聞かなければならない。しかも，ファイル上部のヘッダーやリンクのリストなど，本文とは関連のない情報を初めに読み上げるので，本文に到達するまでに想像もつかないほどの時間がかかってしまうことがある。このような「到達時間」は，ユーザビリティの観点からも重要な項目であるにもかかわらず，チェックが難しい厄介な項目だ。

　前述のaDesignerでは到達時間を確認するための機能を持つので，この機能を参照しながら説明しよう。到達時間を視覚化した画面は，通常のブラウザ・ビューと音声ブラウザを用いた場合の到達時間を視覚化したビューを表示する（図2[拡大表示]のaとb）。到達時間を視覚化した画面（b）ではページを分割し背景色を変えて表示する。背景色が暗くなるにつれ音声では時間がかかることを示しており，真っ暗になる位置への到達時間はおよそ90秒。つまり，ページ内の重要な部分がすぐに読み上げられるかどうかを一目でチェックできる。

　次にアクセシブルな視覚化ビューを（c）に示す。今度は右側の同じ位置が明るくなっている。これは「本文へジャンプ」という目には見えない本文へのページ内リンクがページの先頭に挿入されているからだ。このようなリンクは「スキップリンク」と呼ばれており，時間のかかる作業を少しでも効率化するのに役立つテクニックである。スキップリンクがあれば音声だけでも瞬時に本文位置にジャンプできるため，本文への到達時間が劇的に短くなる。

　同様に，（d）は見出しタグによりページ全体が明るくなっている例である。太枠で囲んだ（実際は背景が水色）個所が見出しタグの位置だ。見出しジャンプ・コマンドにより瞬時に所望の位置へ到達できるため，各個所への到達時間が短いと判定される＊3。