longdesc属性が復活しそうなので思うところを書いてみた。その1 ウェブアクセシビリティな話

白石さんのおなじみのスレでも紹介されているとおり、HTML Image Description ExtensionW3CのWorking Draftとして公開された。現時点の仕様をみるかぎりではlongdesc属性を復活させるという内容のようだ。

これはちょっとWebアクセシビリティ的に興味があるので思うところを書いておくことにする。

longdesc属性とは?

使ったことない人も多いんじゃないかと思う。つーか知らない人もけっこういるかも、ボクも実際仕事では一度もマークアップしたことがない。longdesc属性はHTML4.01でサポートされていて、画像の詳細な説明を記載した文章へのリンクを示すものである。値にはURLを設定する。

画像を説明するための代替テキストとしてはalt属性を使うのが一般的だけど、説明がすごく長くなるような場合、別の文章を用意して、そのリンクをlongdesc属性に設定するというふうに使う。

longdesc属性を適切に解釈するユーザーエージェントでは、画像の説明文が必要なときに、何か操作するとlongdesc属性のリンク先から文章を取得して参照できる。といったことが期待されるわけだ。

しかしこのlongdesc属性、ほとんどのブラウザが実装していなかった。また、実装しているブラウザはあっても、それを有効活用しているケースがほとんど見られなかったようだ。たぶんそういう理由でHTML5では当初採用されなかったんだろう。

しかしHTML5の大方の仕様が安定して、アクセシビリティについて考える余裕ができて、改めて考えたらあってもいいんじゃね?となって上記WDが公開された。ざっくり運びなんじゃないかなと想像しています。

Firefoxにおけるlongdesc属性の実装

上記白石さんのスレでは矢倉さんがOpera(Presto)も実装してるよってレスをつけていらっしゃる。さすがだよこの人HTMLで知らないことってあるんだろうかまじで。恐れ多くも過去2回、おおやけで対談させていただいたことがあるけどほんとすげえ人です。

ボクはメインブラウザのFirefoxでlongdesc属性がちゃんと解釈されているかをみてみることにする。チェックするサイトはH45: longdesc 属性を用いるのテストファイルにする。確認したFirefoxはバージョン19.0.2。

これはWCAG2.0の実装法のひとつH45: longdesc属性を用いる に対応するテストケースだ。サイトにはグラフの画像がひとつあって、longdesc属性が以下のように設定されている。

f:id:bathtimefish:20130313145219p:plain

これはH45-ref1.htmlに詳細な説明があるようだ。アクセスしてみるとたしかにグラフの内容が文章で説明されている。これをalt属性に設定するとなると、、、うーんたしかにちょっと長くてイヤな感じかな。

さて、このlongdescをFirefoxは解釈しているか?画像を右クリックして、画像の情報を表示 を選択してみる。

f:id:bathtimefish:20130313145624p:plain

すると以下のように画像に関する情報を表示するダイアログが現れる。

f:id:bathtimefish:20130313145838p:plain


赤線の箇所、「詳細説明」という行にlongdesc属性が指定されている。Firefoxはlongdesc属性を認識しているようだ。

次に、画像を非表示にしてページをリロードしてみる。結果は下記のようになった。

f:id:bathtimefish:20130313150223p:plain

グラフの画像が非表示になり、alt属性に設定されている「会員数の遷移グラフ」というテキストが現れた。特にlongdesc属性の設定値は表示されないようだ。個人的にはここに詳細説明へのリンクボタンでも表示されたら親切なんじゃないかなと思うけど、そのへんはどう考えられているのかな?

ちなみに、FirefoxのアドオンにLongdescというのがある。名前そのまんまなんだけど、これを入れると右クリックしたときのコンテキストメニューに、longdesc属性値のURLにとぶボタンを表示してくれる。

f:id:bathtimefish:20130313175310p:plain


こんな感じで画像を右クリックすると「View Image Longdesc: ....」というメニューが表示されて、クリックするとリンクに飛ぶことができる。

Firefoxの標準機能じゃないけど、これを使ったらlongdescの意義も多少みえる気がしますね。Chromeにも同じようなエクステンションがありました。

WAガイドラインからlongdesc属性をどうみるか?

Web Accessibility(長いのでWA)的にlongdesc属性はどう見たらいいか?
以下、個人的な見解です。と前置きした上で書いておく。

WCAG2.0を眺めると、以前Webフォントのことで書いたとおり、ざっくり「テキストデータは最強アクセシブルじゃね?」的な考え方を読み取ることができる。img属性で画像を掲載する際は、alt属性値で説明するとか、画像のすぐそばに画像の説明文を記載するなどしてスクリーンリーダー等が読み上げられるようにするのが良いとされる。

WCAG2.0の実装方法として、前者はH37: img 要素の alt 属性を用いる、後者については、以下が該当するとかんがえられる。

G73: 非テキストコンテンツのすぐ隣に別の場所へのリンクを置き、その別の場所で長い説明を提供する
G74: 短い説明の中で長い説明のある場所を示して、非テキストコンテンツの近くにあるテキストで長い説明を提供する
G92: 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する長い説明を提供する
G94: 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する、簡潔な代替テキストを提供する

上記のように複数の方法がある。実装経験から言うと、どれでも選べばいいという感じじゃなくて、コンテンツに応じて一番適したものを選択するのがいいと思ってる。

例えば、風景写真を掲載して、そのすぐ横に風景描写を詳細に説明した記事があるコンテンツの場合は、G73適合とみなす。画像のみで近くに説明を書きたくないレイアウトの場合はH37に応じてalt属性値を書く。といった感覚だ。

上記の他にWCAGにはlongdesc属性をつかった実装方法がある。

H45: longdesc属性を用いる

がそれだ。
しかし、日本のWAガイドラインJIS X8341-3:2010を策定しているウェブアクセシビリティ基盤委員会はこのH45について達成不可能という見解を示している。現時点でブラウザやスクリーンリーダーがlongdescをほとんどサポートしていないというのが理由だ。

このページには現在、2012年5月のテスト結果が記載されている。その結果をみるとスクリーンリーダーのJAWS 9.0 for Windows、ホームページリーダー3.04がlongdescの存在を読み上げるということらしい。UAのlongdesc対応が普及してないからH45は事実上達成不能という見解だ。


ごもっとも。いくら仕様があっても実装がなければユーザーが使えない。使えないものが達成基準には成り得ない。上記のFirefoxで検証したように詳細説明にアクセスできないんだったらlongdesc使ったからアクセシブルになったって言えないよね?ということだ。

こういうわけで、Web制作者の観点ではlongdesc属性を使っても意味がない、だから使わなくていいという感覚だったんだけど、このWDが公開されてHTML5でもlongdescがサポートされるかもとなると、ちょっと考え方を改めないといけないかなと思うわけです。

勧告される頃には全てのブラウザ(UA)が実装するだろうから。
あと、longdescが普及するとWAICのH45に対する見解も変更されると考えられるから。


、、、とまあlongdesc属性という現役のころも絶滅危惧種で、滅んだと思ったら虫の息を吹き返した超マイナー属性でも、書こうと思ったら意外と長くなるもんでした。我ながらびっくり。

まだ書きたいことはあるんだけど、ダラダラしすぎてもアレなんで残りはまた明日書こうと思います。