音声ブラウザと相性の良いHTMLを作る(1)。

先週から「音声ブラウザ用にできるだけ読み上げやすいHTMLに変換するゲートウェイ」なるものを少しずつ書いている。

関連エントリー

• 音声ブラウザができるだけ読み上げやすいページに変換しようと試みるゲートウェイ(β)。
• 音声ブラウザができるだけ読み上げやすいページに変換しようと試みるゲートウェイ(続き)。
• 音声ブラウザと相性の良いHTMLを作る(2)。
• 音声ブラウザと相性の良いHTMLを作る(3)。
• 音声ブラウザと相性の良いHTMLを作る(4)。
• 音声ブラウザと相性の良いHTMLを作る(5)。

毎日少しずつ修正しているのだけれど、どうやって読み上げやすいHTMLへ変換するかについての考え方を(これも少しずつ)書いてみよう。

画像に関する問題

画像には等価なaltテキストが指定されている筈、という前提に立たないで考えないといけないから、どんな条件の場合にはどんな画像が利用されるかについて考えて処理を行う必要がある。

画像には等価なaltテキストが指定されているのであれば画像はすべてaltテキストを展開すれば良いわけだが、続けて読み上げて意味の通る文章になるとは限らないのだ。

また、敢えて「画像」であることが分かったほうが良い場合もある。

画像がそこにあることを理解出来た方が良い画像

日本について。<img alt="富士山" src="fuji.jpg" />

というようなHTMLの場合、

日本について_[一拍置いて]_ 富士山

「富士山」が装飾のための画像だったら、何だかおかしくなってしまうだろう。

日本について_[一拍置いて]_[声を変えて]_富士山_についての写真があります

とすれば「そこに画像があるんだな!?」っていうのが分かる。音で読み上げているにしても「そこに写真があるんだな!?」ってなことが把握したいケースがある筈だ (例としてはあまり良くないかもしれないが)。

画像が「視覚的な」装飾のためでのものあれば以下のように書くべきだろうが、それが装飾のための画像かどうかの判断は (文脈でも理解しない限りは) 不可能である。

日本について。<img alt="" src="fuji.jpg" />

「画像＝コンテンツの一部」である場合、強制的にテキスト変換だと困るし (画像であることが理解できるようにして欲しいだろうし)、alt属性を空にすべきではないものもある。

例えば「地図」の場合

自分が「視覚的」に地図を見ることができなくても、印刷して (それを誰かに見せて) 人に説明を求めることだってできるし、現地で誰かに地図を見せて道を尋ねることもできる。

「何番出口を出てどういってこう行って」等のaltテキストを指定するとベストなのだろうが、現実的にそんなページは殆ど無い。

画像を画像へのリンクにしたら(イメージへの直接リンクは良くない、ということに注意は必要)読み上げ音声も(ホームページリーダー等の場合)変化するし、画像をプリントすることもできるだろう。ただし、その場合のリンクテキストについては

地図_についての写真があります

だと不自然だろうから、単純に

画像_地図

とかの方が良いのかもしれない。また、alt属性に「画像:地図」とか書いてあるページがあって、その場合は重なってしまう(画像_画像_地図)ので「画像」で始まるalt属性の場合は単純にalt属性をただ展開すれば良いだろう。

画像が視覚的なアクセントや「機能」を表す場合

いわゆる「パンくずリスト」について、

<img alt="現在位置" src="you_are_here.gif" /> ホーム <img alt="の中の" src="arraw.gif" />...

のように音声読み上げ環境に配慮したHTMLがある。これを画像をリンクにして

画像_現在位置

ではちょっと困る。

画像_現在位置_ホーム_画像_の中の

せっかくの配慮が逆効果になってしまう。もちろん「現在位置_についての写真があります」ではもっと困る。

この場合は画像は画像でも、そこに画像がある/ないを意識させないのが親切だろう。

同じく、リストマーカーのような画像(例えば行頭の矢印)等の画像について、

<img alt="→" src="arraw.gif" />
<img alt="矢印" src="arraw.gif" />

とかいう指定をしているもの。これは alt="" にすべきケースが殆どなんだろうが、

画像_矢印

なんて読み上げたら鬱陶しいことこの上ないだろう。

そこで、小さな画像は概ね「写真」や「画像」そのものが意味を持つものではないという仮説を立てる。width属性とheight属性を見て一定サイズ以下だったら「画像_altテキスト」とせずに単にaltテキストを展開する。

見出しやボタンのための文字の画像化

「見出し」文字を画像化しているケースも多いだろう。これはプロのウェブデザイナーでもやっている。CSSで画像置換 (Image Replacement) というテクニックも一時流行ったが、画像オフ/CSSオンだと何も見えなくなるということで最近は下火のようだ。

<h1><img src="product.png" alt="製品案内" /></h1>

これが、

[見出し強調された(且つリンクになっている)音声で] 画像_製品案内

これも"ちと"辛い。この場合は「画像であることイコール見栄えを良くしたい」わけだから、音声読み上げ環境のユーザーには関係のないことである。この場合は

[見出し強調された音声で] 製品案内

であるべきだろう。

見出しと似たケースでは「画像ボタン」があげられる。ボタンが「クリック」しやすいように画像にする。ユーザビリティ面でも「ボタンは一目でボタンとわかるように」とか「ボタンは"押せる"ように」とかの鉄則? があるし。この場合も、

<a href="product.html"><img src="product.png" alt="製品案内へ" /></a>

の読み上げは、単純に以下のようになるのが良いだろう。

[リンク用音声で] 製品案内へ

まずは画像について書いたが、まだまだ考慮すべき問題はある。

例えば「日付」「記号」「通貨」「日本語の単語の空白文字での分割」等。これらについてもおいおい書いていこうと思う。

でも、何と言っても難しいのが「レイアウトのためのテーブルと構造を示すテーブルが混在しているHTML」である。これについても考え方はある程度固まっているけれども。

続きは以下のエントリーで

• 音声ブラウザと相性の良いHTMLを作る(2)。
• 音声ブラウザと相性の良いHTMLを作る(3)。
• 音声ブラウザと相性の良いHTMLを作る(4)。
• 音声ブラウザと相性の良いHTMLを作る(5)。