www.taako.com

strictHTML & CSS によるアクセシビリティの恩恵

strictHTMLと言う言葉が、なにやら流行になっているらしいです。 strictHTMLとはつまり日本語にすると厳格なHTML。この言葉の意味と、そしてそれについてまわる「アクセシビリティ」という「ユーザビリティ」とはまた違うこの言葉についてレポートしてみたいと思います。

ここでは、このstrictHTMLという言葉を、 W3Cの提唱するHTML4.01の概念である「HTMLは文書交換を目的とし、レイアウト等の表現手段として使わない。」 ということを厳格に守るポリシーのことと解釈します。

つまり表現手段にはスタイルシートを使って、HTMLにはほんとに文書定義だけを任せるという住み分けを 守ってみようということなのですが、例えばhtmlの記述において、どのような注意点が発生するかみてみましょう。

HTML4.01 において非推奨となっているタグは使わない。

htmlのタグは大きく 論理タグ、と物理タグ(taakoはビジュアル系タグと呼んでいる)に分けられ、 例えば<strong>タグは、「強調」という論理的な意味を持ち、<b>タグは、「太字」という 物理的な意味を持つタグと考えられます。基本的にこのような物理タグはそのHTML4.01のポリシーから非推奨となっており、 太字に強調が目的であれば<strong>を使い、<strong>タグの表現方法をCSSで定義する。という手法が 推奨されています。
ちなみに<b>タグは非推奨ってわけではない。

よって色指定、サイズ指定、等はすべてスタイルシートで行う。

TABLEは「表を表現する」という目的のタグであり、レイアウトを構築する為には使わない。

<title>の的確な記述、<img>におけるalt属性などの記述を徹底する。文書をその意味に適応するタグでマークアップする。(見出しはHn、意味段落にはP、等)

なぜその縛りを設ける必要があるのでしょうか？ まずは実現におけるメリットデメリットをまとめてみましょう。

デメリット

デザインによるプレゼンテーションが主であるウェブサイトに関して現状のCSS2では表現力に限界がある。
→TABLEレイアウトに頼らざるを得ない。

メリット

スタイルシートによるレイアウトに適応できないブラウザで確認しても伝えるべき情報は的確に伝えることができる。
→これによりアクセシビリティの恩恵が受けられる。

「決してユーザがIEやNetscapeといったビジュアルブラウザで閲覧するわけではない。」 ということはウェブサイト開発者であれば誰もが意識していることで、

• 古いブラウザやUNIXでネットスケープを使わざるを得ない人の為に対応ブラウザの枠を広げる。
• JavaScriptを切っていても、閲覧できるようにする。

なんてことが開発に求められていましたが、イマイチその必然性を感じられませんでした。 しかし今その目的の方向性が変わっており、 いわゆるバリアフリー、例えば音声ブラウザや点字ブラウザを使っている人にも的確に情報が伝わるようにする。 といった大義により、テキストブラウザなどでも確認できる必要が出てくるわけです。

• 色んなブラウザで見た目を維持することよりも、すべてのユーザに伝えるべき文書情報を的確に伝えること。

これがいわゆるアクセシビリティというものですが、この目的を達成するために、 HTMLという文書マークアップ言語としての役割を見直そうというわけです。 ちなみに音声読み上げブラウザなどは、HTMLのマークアップに従って文書を読み上げます。<h1>で囲まれた部分は見出しであることをユーザに伝えます。強調部分は強調して読む、なんてこともしてくれるそうです。なお検索エンジンのロボットもこのようにHTMLを解析しながら巡回しますので、正しく記述しておけば、HTML文書のより的確な情報を検索エンジンデータベースに登録してくれます。

デメリットも多く、やはりデザインによるプレゼンテーションがメインであるウェブサイトに関しては、 ブラウザも制限されますし、現状のCSS2での表現力にはまだまだ足りない部分があります。

確かに今主流のビジュアルブラウザのスタイルシートへの対応も整ってきたので、実現は可能かもしれません。

ただしかし、現在世の中では「HTML=レイアウトするもの」という認識が定着しており、 htmlオーサリングツールなども、普通にレイアウト目的にTABLEタグを使っていますし、 スタイルシートが普及していない時代からおよそ5年、HTML書きによって、 培われてきたありとあらゆるテクニックを捨ててまで、実現する価値があるのか？ ほんとにそれで表現の幅は狭まったりすることはないか？ など不安はつきまといます。

それはそれで現状のまま、HTMLによるレイアウト構成を続けてもいいんじゃないでしょうか？ このポリシーを推奨するサイトでは「そんなデザインは捨てちまえ」なんてヒステリックな 発言が多々見受けられるのですが、 実際デザインによる影響力は、文書を凌ぐケースの方が圧倒的ですので切り捨てることなんて 不可能だと思います。そういうわけで、私は「できるだけstrict」を提唱します。

もしサイトリニューアルの案件が来た場合などに顧客にアクセシビリティという切り口から 提案を進めてみるのもいいかもしれません。顧客にまず尋ねましょう、
「公開したいものは、デザインによるプレゼンテーションですか？それとも情報提供ですか？」さらに「アクセシビリティを意識したサイトを構築すれば、各方面から褒めてもらえますよ。」

関連リンク

HTML 4.01 Specification (ja)

W3C HTML4.01仕様書 和訳。

ごく簡単なHTMLの説明

HTML4.01仕様書に基づきHTMLの知識、アクセシビリティなどの考え方を判りやすく解説。

CSSでイケてるデザインサイトリンク集2

ソースをぱくれ、こぴれ。このポリシーを遵守しているサイトのhtmlソースを見ればわかりますが、html自体が非常に シンプルな構成になっていることがわかるでしょう。基本的に文書なんてものは見出しがあって本文がある。たまにリストがある。たまに表がある。てな具合ですので、hnタグと、pタグ、リスト系タグ、そしてdiv,spanタグぐらいしか使われていません。またMozillaなどのブラウザで確認すると、左下からCSSのon off が切り替えられるので、楽しいです。

島根県_Shimane Prefectural Government

アクセシビリティは重要課題であるお役所系サイトですが、徹底していることは稀。企業サイトについても 例えばISO規格制定に加えてもいいような気がする。んじゃぁ意識改革に繋がるような気がするんだけど。

でここまで書いたところで知ったのですが、なんと既にJISの方で策定しようとしているようです。アクセシビリティについての情報をまとめたサイトによれば2003年10月23日には「高齢者・障害者等配慮設計指針 − 情報通信における機器・ソフトウェア・サービス − 第三部：ウェブコンテンツ」と題してJIS素案が公開レビューされています。日本でも着々と進んでいるようです。 アメリカでは、既にリハビリテーション法５０８条として法律が施行されており、罰金制度まであるようです。(2003.11.8追記)

W3C CSS 検証サービス

CSSの検証を行ってくれる。

Another HTML-lint gateway

HTMLの文法チェックを行うサービス。問題点に対する解説が詳しくでてきますので、大変参考になります。

TAAKO.COM

試しに、私の個人サイトのトップページだけを全CSSによるレイアウトにリプレイスしてみました。 私が、ブラウザ以外からのアクセスと聞いてまず最初に思いついたのが、携帯端末なわけですが、 アクセシビリティというからには、携帯から見てもそれなりでないといかんだろう。ということで、 「携帯からそれなりに見えること」を第一目標としました。そのために大きめの画像は、imgタグを使わずに、 スタイルシートやjavascriptなどから画像を表示させる、などのトリッキーなことをやってます。 filter 使えばいいじゃんとかそういうツッコミは却下。

MACROMEDIA

デザイン至上主義っぽいmacromediaが意外にもアクセシビリティに注意を払っています。例えばFlashデータなどはすべて javascriptによる読み込みをさせていて、アクセシビリティについてのヘルプにて、HTML VERSION とFLASH VERSIONを切り替えるだけで、上部のFlashメニューが劇的に切り替わってくれます。これすげー。