longdesc属性が復活しそうなので思うところを書いてみた。その2 HTML5との関係な話

昨日のつづき。今日はHTML(5)とかその辺にlongdescがどう影響をあたえるかとか、実際の制作でどうなるんだろねーみたいなことをまたダラダラと考えてみようと思います。

HTMLの現状を含めて考えてみる

HTML5というか、広い意味でHTML。longdescによる画像の詳細説明というのがHTMLひいては将来のWeb関連技術にどう影響するか、ちょっと考えてみたい。

基本的にメジャーなブラウザでlongdescがサポートされたらWeb制作において画像のアクセシビリティを高めるための選択肢がひとつ増えることになる。これはHTML仕様がよりアクセシブルになったと言い換えてもいいことだと思う。

RIAやWebサイトを制作する上でも面白いことができるかもしれない。ここで深くは考えないけど、例えばlongdesc属性値のURLに非同期にアクセスして説明文を取得しておき、ユーザーの操作に応じてツールチップ的に表示するとか、UXを向上させる目的でも使えそうだ。

どっかの会社がつくってるメガネでもしWebアプリが動いたら「OK glass, show description of this photo.」などと言うとメガネはlongdesc属性値のURLを辿って説明文を表示するとか。マシンリーダブルである。写真の表示時には説明文までダウンロードしなくていいし。低リソース環境のアプリにやさしい作りができるかもしれない。

まあそんなんマジメに検討できるようになるにはもうちょっと未来だろう。もうちょっと直近の影響についてはなんかないだろうか?うーん、たぶんalt属性値の考え方が少し変わるんじゃないかなと思う。たぶん。

HTML5におけるalt属性値の書き方については、HTML5: Techniques for providing useful text alternativesにまとめられ中である。現在はEditor's Draft。まだまだ長くなりそうだなーと思いつつ個人的に注視しているTRである。

例えばこの中の、3.2 Graphical representations: charts, diagrams, graphs, maps, illustrationsのExample2.1をみてみよう。現在では下記のようになっている。

f:id:bathtimefish:20130313220436p:plain

ランプが動かなくなったときの対処法がフローチャート画像として提供されている。そのalt属性に「もしランプが動かなくなったら、まずプラグが入ってるか確認して、入っててもダメなら...なにがし」というふうにフローチャートの内容を説明した文章が設定されている。

HTML5におけるaltの使い方としては正しいんだけど、ちょっと文章長いよね?めんどいよね^^;と思える。こういうのはalt="ランプが動かなくなった場合の対処方法" としてlongdescに対処法を文章で説明したテキストへのリンクを指定するほうが無理がないように見える。

longdescがあるからaltではこういうふうに書かなくてよくなるというわけではなく、「詳細説明の代替テキストが長くなる場合はlongdesc属性を推奨するよ。altで書いてもいいけどね。」程度にこのExample2.1のパターンは補足されるといいんじゃないかと思います。

まあ、こんな単純なフローチャートだったらまだaltでいいけどね。並のアプリケーションのフローチャートを掲載したとして、それを文章にしたら本一冊くらいになると思う。それに絶対代替テキストが必要だ!というケースは(そんなケースないだろうけど)altが嫌がらせになるわなw

Web制作の現場的視点もからめて考えてみる

Dreamweaverのalt入れるテキストボックスそんなにデカくねーだろと。そのフローチャート画像がアップデートされたとして、またalt入れなおし??。。。なんかそんなサイトメンテしたくなくなる。そういうときにlongdescを使ったら少しマシになるかもしれない。

まあ上記は半分ネタなんだけど、実際の制作現場で使えるなというケースもあると思う。例えば、大規模なWebサイト全体をアクセシブルにしようという場合。

多くのページに多数のグラフや図案などが掲載されているとして、それらの詳細説明の代替テキストを提供する場合に、なるべく既存のソースコードをいじりたくない。つーか今の表示をまったく変えずにしてほしい。つーか融通の利かないCMSだからややこしいす。というあるある話はけっこうよくあるあるだろう。

その時に代替テキストを別ページとして用意し、元ページのimg要素にlongdesc属性をつけて代替テキストページにリンクする。こうすることで元ページの視覚的な表示に難の変更も加えることなく画像の代替テキストに関する達成基準を満たすことができる。

別ページで用意する代替テキストの作成作業は、元ページの更新作業と非同期にできるので、人海戦術で作業効率が上がる可能性がある。今までの経験も含めて考えると、大規模公共系サイトにはハマるパターンだと思う。

官公庁とか政令市級の公共サイトとか、longdescが普及すると受ける恩恵はけっこうあるんじゃなかろうか。とも思えてくる。

もちろん公共だけじゃなくて一般的なWebサイトでも代替テキストを適切に提供することはいいことだ。HTML5は旧バージョンに比べて各要素の意味がしっかりと規定されてよりセマンティックなマークアップが実現できるようになった。

セマンティックなマークアップはマシンリーダブルなサイトを実現する。マシンリーダブルとはウェブブラウザ、検索エンジンなどのソフトウェア機械がページの情報をより正確に理解できる。ということだ。

機械がウェブ上の情報を理解する。そこから今よりももっと便利ですばらしいサービスが生まれる可能性がある。セマンティックに記述されたページは、将来生まれるであろう付加価値の高いサービスの中で、より上質なデータとしてその価値を発揮することができるのである。

HTML5でのマシンリーダブルなマークアップは現在でもスクリーンリーダーをはじめとする支援技術が追従していっている。つまり、よりよいマークアップが実質的に目の不自由な障害者などへの情報提供に実質的に貢献するようになってきていると言っていい。

このlongdescやその他HTML5のセマンティックな機能は、ウェブアクセシビリティを向上させるとともにマシンリーダブルを実現するというわけだ。その点でもこれからのウェブ制作者が理解して制作で実践していく意義は大きいと思える。

障害のある方々に微笑んでもらえるかどうかはマークアップエンジニアの腕次第だ!

と、ちょっと大げさに言っておこうかw

ウェブ制作者としての雑感

長文書いて疲れたしけどもう少しw

HTML Image Description Extensionにおいて、longdesc属性は今のところ次のように紹介されている。

a longdesc attribute for the img element. This enabled a machine-discoverable description of an image to be linked to the image.

longdesc属性は、機械が判読可能な説明文を画像にリンクさせることができる。
マシンリーダブルであり、アクセシブルな機能だと言えると思う。

考えてみれば技術の発達によりマシンリーダブル=アクセシブルというケースは増えてきている気がする。それは技術の発達方向としてよい方向に向いていると思える。

あらゆる立場の人々がひとつのデータに同じようにアクセスする。という「OneWeb」の理想。これを実現するためにW3Cが牽引するウェブ技術は日々進化していってるのだけど、ウェブ制作者にとってはそれは紙とハサミにすぎない。

制作者としてはこの紙とハサミをどう使って、どんないいものが作れるか?ということが大事な気がする。そういう意味でこれらのセマンティックな新機能を率先して試し、実装方法をよく考えて、ひいては仕様の問題点を指摘したり、新しくよりよい提案ができたりするのが制作者ならではの貢献ではないかと考えるのである。

まあボクはまだまだ勉強不足でそこまでいってませんけどね。まあぼちぼち努力しますw