リリースされた Mozilla の最新版 0.9.7 では、新たにHTML4.01のlongdesc属性がサポートされました。longdesc属性? そんなのあるの? 実際問題どんなときに使うんだろう? などちょっと興味を持たれたかたもおられるのでは、ないでしょうか。えてして机上の空論におちいりやすい「アクセス性」の問題を、多少なりとも実感としてとらえる良い機会かもしれません。longdesc属性を指定したイメージが、実際に音声ブラウザでどのようにレンダリングされるのか、音声のサンプル(mp3)もつけました。
例えば、画像を含むこんな記事があるとします。
偽春菜だから、しゃべる言葉も偽中国語。こんなぐあいだ。
この画像は、じつは透過PNGなので、環境によっては表示できないかもしれません。もともと画像を表示しないブラウザもあるし、もちろん視覚障害者もいます。目が見えないのにインターネットなんてしたってつまらないんじゃない、とか思うかもしれませんが、まぁそういう面もあるでしょうが、基本的には正反対、目が見えずに従来の書物等が利用できないからこそデジタル化されてテキストリーダーで自由にアクセスできるネットは素晴らしい世界、晴眼ユーザ以上に視覚障害者にとってネットやパソコンは世界との重要な接点であり得るのです。ともあれ、なんらかの理由で上の画像が表示できない環境のユーザにも、この画像のおもしろさを少しでも伝えたい、と仮に思ったとします。
alt属性として長文を書くことも考えられますが、説明を別ページに分けることにもそれなりのメリットがあります(デメリットもあります)。例えば、次のような説明ページ image/d-niseharuna.htm を用意するとします。
偽春菜(読み方は、ニセハルナ)がニセ中国語で叫んでいます。ニセハルナは歴史を築いたのだ。邪悪な企業は滅びよ。そんな意味のことを言っているようです。ニセハルナのあいぼう、ウニュウがかたわらで、つぶやいています。これもニセの中国語ですが、「あの会社は断固たる措置を採用すると言っていたが、結果は断固たる自滅だな」といったような意味の皮肉を言っているようです。
あとは画像と説明ページを関連づけるわけです。ベタでリンクを張るなら、こんな感じでしょう。
<p>偽春菜だから、しゃべる言葉も偽中国語。こんなぐあいだ。</p> <div class="center"> <img src="image/niseharuna_nisechinese.png" alt="可可逝世!" width="500" height="275"> </div> <p>上の画像の内容について、 <a href="image/d-niseharuna.htm">テキストによる詳しい説明</a>も、 ご利用いただけます。</p>
HTMLの仕様では上記のソースと同等のことを次のように書けることになってます。
<p>偽春菜だから、しゃべる言葉も偽中国語。こんなぐあいだ。</p> <div class="center"> <img src="image/niseharuna_nisechinese.png" alt="可可逝世!" longdesc="image/d-niseharuna.htm" width="500" height="275"> </div>
これが longdesc属性というもの。「上の画像の内容について、テキストによる詳細説明がこちらで利用可能です」といったようなリンクを書く代わりに、imgタグのなかに longdesc と書いて、リンク先のURIだけ書いておけば、あとはブラウザが適切に処理してくれる……というのが仕様。 —— 上と下を見比べると、longdesc属性を使った下の書き方のほうがエレガントでスッキリし、意味的にも緊密になります。とくに多数の画像に「別紙で説明」をつけたいとき、いちいち「画像の説明もごらんください」「画像の説明もごらんください」とリンクをいっぱい書くと、どの画像の説明がどのリンクなんだか、正解は画像の上のリンクなのか下のリンクなのか閲覧者が混乱しかねません。画像に番号をふるなりすれば良いとしても、スマートじゃないでしょう。
IBMホームページ・リーダー 日本語Windows版3.01 の場合、デフォルトでは、ふつうのテキストは男性音声、リンクが設定してあるところは女性音声、女性音声のところで [Enter] を押すとリンク先に移動できる、といったしかけになっており、longdesc属性が設定されている画像の場合、alt 属性の内容を読み終わったあとで「イメージの説明」という女性音が続きます。理解を深めるために、実際にホームページ・リーダーでこの記事の一部を読みあげた例(mp3, 216KB, 55秒)を用意しました。「偽春菜だから、しゃべる言葉も偽中国語。こんなぐあいだ。」というテキストに続いて、画像のalt属性の「可可逝世(カカ、セイセイ)!」を読みあげ、さらに女性の声で「イメージの説明」というアナウンスが入る点を注意して聴いてください。「イメージの説明」という言葉はHTMLのソースにありませんが、longdescを音声でレンダリングした結果です。(そこで [Enter] を叩くと、longdescで指定されたURIへ飛ぶし、もちろん「イメージの説明」というリンクを無視して先を読み続けることもできます。)
この音声デモは、日本IBMのホームページ・リーダー お試し版 ver.3.01(+ IBM ProTALKER®97)を用いて作成されました。この音声ファイルは「ホームページ・リーダー」の動作のデモ(実演)ですが、あくまでHTMLのlongdesc属性のレンダリングのデモであって、読み上げ音声の音質の評価には必ずしも適しません(ファイルサイズを最小にするように音声圧縮をかけているため)。
最新の Mozilla 0.9.7 では、画像のプロパティとして、longdesc属性値を参照できるようになりました。
上の画像で、Description: とあるのが longdesc で指定したURL
表示されるURLは、ほかの要素のcite属性などと同様、クリッカブルです。もちろん「視覚障害者が自分で画像を右クリックしてこのダイアログを呼び出す」というのは、かなり非現実です(スクリーンリーダーを使えば不可能でないが)。が、Mozilla のコアがlongdesc属性へのアクセスを提供してくれさえすれば、それを利用するアドオンは開発可能でしょう。
余談ついでですが、上の画像例をよく見るとテキストの言語属性が Nise (Chinese) となってます(笑) これは alt のテキスト「可可逝世!」の属性です。同様の遊びとして、
<q cite="http://pc.2ch.net/..." lang="ja-2ch">ハゲ銅!ahooのせいでみかかが株をあげたと思われ。</q>
なんてこともできます。モジラでプロパティを見ると...
lang属性=「2ch地域の日本語」
「正しい日本語を使いましょう」な老人が「そんな日本語は無い」とかほざいたとき ja-JP に無くても ja-2ch では基本語彙なんだよとゴルァしませう。イギリス英語とシンガポール英語みたいなもんですな。ケベックのカナダ人いわく「フランスのフランス語はフランスなまりがひどいね」。
(この脚注は冗談半分なのであまり真剣にとらないように。)
ブラウザの未対応に対する現場的解決法として、視覚に制約のあるユーザを特に意識したサイトなどでは画像に「D」1文字のリンクを添える慣用もあるようです:
<p>2001年12月現在、ブラウザのシェアは次のようになっている。</p> <div> <img src="graph.gif" alt="IE6が最も多い" widht="200" height="200"> <a href="longdesc.htm">D</a> </div>
上の例で、画像が見れるユーザは円グラフか何かが見えてます。画像が見れない環境では、とりあえず「IE6が最も多い」という簡単な説明にアクセスできるはずです。そして円グラフか何かのその画像の内容をもっと詳しくテキストで欲しい場合、Dのリンクをたどることになります。
longdescにせよ、Dのリンクにせよ、なぜこんなまわりくどいことをするのでしょうか。alt属性としてすべての説明を直接、書き込んでは、まずいんでしょうか?
……というと、あなたは、この円グラフに興味があるかもしれないし、ないかもしれないわけです。晴眼ユーザなら興味がなければ一瞬で目をそらして読み飛ばせますが、音声ブラウザだと明示的にやめさせない限り、興味があろうがなかろうが、alt属性をえんえんと読み続けます。longdesc(ないしDリンク)を使えば、画像の説明を聞きたいユーザだけ(その画像の内容に興味がある場合だけ)longdesc.htm を参照できる、というメリットがあります。しかしデメリットもあります。例えば「もし読んでいればあなたにとってとても興味深い情報が書いてあったのに、リンクをたどるのが面倒で読まずに飛ばしてしまって損する……」という場合もあるでしょう。
もうひとつの検討すべき戦略は、次の書式でしょう。
<p>2001年12月現在、ブラウザのシェアは次のようになっている。<br> <a href="longdesc.htm"><img src="graph.gif" alt="IE6が最も多い" widht="200" height="200"></a> </p>
視覚系の環境では単にグラフが見えるし、非視覚系の環境では、「……次のようになっている。IE6が最も多い」というリンクに見えるでしょう。 —— 文法的に正しく、いっけんうまいやり方のようですが、じつは問題があります: 視覚系の閲覧者がこのグラフの画像がクリッカブルであることに気づいたとして、クリックすると何が出るのか想像がつかないので、ナビゲーション上、好ましくないからです。大きな画像だったらマウスが触れたときに cursor:hand になるし、画像の枠線がリンクを暗示するかもしれません。何だろう?と思って興味本位でクリックしてみても、その円グラフ画像が見えていれば読む必要などない同じ内容の統計がテキストで書いてあるだけ。longdescによるリンクは、ただのリンク一般と異なり、「オブジェクト(画像やフレーム)の内容を詳細に説明したリソース(HTMLに限らず音声や動画でも良い)へのリンク」という限定された意味を持つものなので、ただのリンクでは置換しにくいです。
ここで内部コンテンツとは、代替可能な要素が(属性値または要素として)同じルート<html>要素に含まれる場合。ページ全体の代替案は当然、別URIだから外部コンテンツとなり、内外の区別は意味を持ちません。一方、部分要素の第一優先プレゼンテーションが利用不可能な場合の代替として外部コンテンツを参照する一般的方法が、仕様面でも実装面でも、たちおくれてます。<object> によるインポート。imgのlongdesc属性も意味論的には <object> と同様の代替インポート作用素ですが、<object> と参照機能が異なります: <object> が原則として自動的、強制的に実体をインポートしようとするのに対して、longdesc属性はインポートされうる実体への間接参照(つまり代替リソースへのアクセスについて選択の機会)を提供します。
もうひとつの論点として、longdesc属性を持つ画像は、画像が表示される環境からも属性値(つまり画像についての詳細説明があるページへのリンク)が参照されても良い、という仕様の問題があります。画像は表示されているが、さらに別ページに画像の説明テキストがあるなら読みたいという読者もいるかもしれません。 —— これに対して、objectタグで作る多段構造は、「画像が見れない環境では、仕方ないから、次の優先順位のオブジェクトのレンダリングを試みる」というもので、画像が表示されるなら優先順位が下のオブジェクトは参照されては、ならないのです。<object> で第一優先が画像、第二優先がテキストリンク —— というのとimg longdesc= は、等価でないのです。
それはいいとして、longdesc属性が画像の代替(altの補足)だけでなく画像そのものの補足説明にも使われうる、という事実が、この属性の意味をあいまいにし、従って実装しにくくしているとも思われます。補足なのか代替なのか。画像の代替なら、画像をレンダリングしたらlongdescは評価しなくて良いのです。補足なら、画像を代替して、さらにlongdescもレンダリングする必要があります。補足か代替かあいまいだと、実装が定まらないことは明らかでしょう。
本来、(教団側の布告によると)longdescはaltの補足であって、画像の補足ではありません。longdesc側からみれば、altはキャプションです。alt+longdescで、画像の代替です。だから、理論的には、画像が見えるユーザから、これらの属性は隠蔽されるべきです。実際、MozillaはMSIEやNetscape4と違い、画像のレンダリングに成功すればalt属性を隠蔽します(カーソルを合わせてもポップアップさせません)。一方においては、longdesc属性については、なおさらそうすべきとも思えます(簡略説明のaltすら見えないのに、詳細説明のlongdescが見えるのは、おかしいという考え方) —— 画像のプロパティとして longdesc がクリッカブルなのは、テスト目的としては良くても、理論的には不整合であって、ブラウザが「画像非表示モード」を実装し、そのモードにおいてのみ alt と longdesc をテキストでレンダリングするのが本来だ、とも。longdesc属性を利用するユーザのエイジェントは、原則として、画像を取得することでトラフィックを無駄遣いするべきでない、ということにも注意します。
しかし、他方において、テキストブラウザと視覚系ブラウザについては二分法でいいとしても、視覚障害者については「全盲」か「晴眼」かだけじゃありません。弱視だったり色覚異常の場合、画像も見えるけれど、いちぶ見にくい可能性があるので、画像とlongdescの両方を利用したい、ということがあるでしょう。だから、longdescは画像の代替なのか画像の補足なのかどうしても両義的になってしまいます(健常者にとってlongdescは画像の代替だが、弱視者にとっては良く見えない細部についての補足として機能)。「画像の代替」と割り切れれば、画像非表示モードまたは画像の取得に失敗したときだけlongdescをリンクとしてレンダリングすれば良いのですが……。
画像というのは、当たり前にhref属性も持ちうるので、いっそう話がややこしくなります(うるさく言えば、href属性を持つのは画像でなくa要素だが、意味は明白なのでここでは、この用語法で通す)。次の例を考えてみてください。
<p>次のページに進むには、下の美しい写真をクリックしてください。<br> <a href="page2.htm"><img src="photo.jpg" alt="お城の写真" longdesc="d-photo.htm"></a></p>
クリックして次のページに進みたいのでしょうか(href属性によるリンク)? それともお城の写真についての詳しい内容説明を読みたいのでしょうか(longdesc属性によるリンク)? ブラウザは、この2種類を区別できなければならないのは当然として、どちらを選択するにしても分かりやすく選択できるインターフェイスを提供すべきです。実際問題、けっこう難しいことでしょう。視覚系ブラウザでもlongdescにアクセスできるとしたら、IE6でポップアップするイメージツールバーのような実装法も良いと思います。たぶん本当の問題は、longdesc属性値を参照可能にすることそのものより、longdesc属性を持つ特別な画像をそうでないふつうの画像と簡単に見分けられるようにすることだからです。
おそらくHTMLに慣れてるかたなら、「そんな面倒なこと考えなくても、写真の城について、というリンクを1行、書いておけば良いだろう」と思うかもしれません。現状に照らせばまさにその通りですが、これはHTML自身による制約でなく、デファクトの実装上の制約。二次元レイアウトに困って仕方なくテーブルに走ったように、仮想的Z方向、つまり代替レイヤの積み重ねの実装がうまくできないので、平面に書いてお茶をにごしているにすぎないと。 —— もし仮に、longdesc属性を書いておくと「この画像についての詳細テキスト説明」だと分かるリンクが分かりやすいようにポップアップしたり「この画像の内容については別に詳細説明があります」ということを示す小さなしるしが画像のかたすみにあらわれたり……そういうことが当たり前の世界だったら、みんな「このべんりな longdesc」を使うでしょう。
仕様上あってもブラウザが実装してくれないことには絵に描いたモチで、実際に使えるようになってみないとどんなおもしろい使い方ができるかという創造性が発揮されませんし。ブラウザがサポートしてくれたら、あんがい使い道もありそうです……。
「<img longdesc=...>について」への追記。実際のブラウザの対応状況が悪い longdesc属性について、べつのかわりの手段を思いついたのでメモしておく。
<p>私の住まいの写真です。</p> <div class="center"> <img src="castle.jpg" alt="お城の写真"> <p class="none"> <a href="d-castle.htm">写真の風景についてのテキストでの説明</a></p> </div>
この方法では、longdesc属性のかわりに、非表示属性のテキストリンクを用いています。もちろん class="none" は、どこか別の場所で適当に実体を定義しておくわけですが、display:none のほか、visibility: hidden などを使う方法もあります。longdesc に比べれば、まにあわせの手段にすぎませんが、スタイルをサポートする視覚系ブラウザではテキストリンクが見えず、テキスト系ブラウザや、音声ブラウザでは、class="none" の部分が見えるので、longdesc と似た効果が得られます。
なお、記事の書き方がずぼらだったためか一部で「longdesc属性は視覚障害者のための音声ファイルへのリンク」という誤解が生じてしまったようです。ホームページリーダーは、ふつうのホームページをそのまま勝手に読み上げてくれるソフトで、サイトの作者が自分で音声ファイルを用意する必要は、ないのです。「音声ブラウザ」「スクリーンリーダー」などについて、どんなものかちゃんと説明しなかったため、分かりにくかったかもしれません……。言葉で説明するより、ホームページリーダーのお試し版をダウンロードして、あなたのサイトを読み上げさせると、よく分かると思います(おすすめ)。サイトの作者自身が音声版を作らずとも、ふつうのテキストを合成音声でその場で音声化してくれるわけです(いわゆるTTS=Text to Speachエンジン)。画像のAlt属性を書かなかったり、テキストでみだりに変な当て字などを使うと、視覚に障害があるユーザを困らせる結果になる、という基本的事実を学ぶことができるでしょう。
longdesc は、なにも視覚障害者専用でなく、ビジュアル系以外のUAにおける画像の代替説明として、晴眼者にも利用されうべきものです。