HTML5の現実的な実装案を考えてみた。

最低限のアクセシビリティを確保し、高水準ブラウザのパフォーマンスを最大限に発揮させようという『プログレッシブエンハンスメント』という考え方があります。私はこれについて、IEなどの低水準ブラウザでは最低限の見栄えが確保されていれば良いだろうと述べましたが、現実的にそうした考え方を浸透させるのは困難であり、それこそ「単なる理想論」で終わってしまいます。そこで、今一度「現実的な実装案」について考えてみたいと思います。

誰にとっても重要なこと

「どのような人にどのようなことをどのように伝えるか」というユーザエクスペリエンスに基づいて『表側のコンテンツ』は作られます。それは私たちWeb制作者にとっても、クライアントにとっても大変重要なことであり、それが明確でなければWebサイトを作る意味すらないと思います。しかし、人間が十人十色であるように、専門分野が違うもの同士では考え方の違いや齟齬などがどうしても生じてしまいます。こちら側のエゴを相手に押し付けるのも、相手の要望を鵜呑みにするのもあまりスマートとはいえません。現時点で理想が叶わないのなら、実情を把握し、妥協点を見つけることから始めましょう。

私たちにとって重要なこと

プログレッシブエンハンスメントといえば「新しい技術を最大限に生かす」という側面が注目されがちですが、「コンテンツそのものに重きを置き、Web本来の能力を最大限に生かす」という側面も持ち合わせています。Webの世界はグーグルボットに代表されるクローラーというプログラムが、Web上にある文書や画像などの情報を周期的に取得し、データベース化、インデックス化することで成り立っています。要するに彼らはコンテンツだけを求めています。

HTML5では、section、nav、aside、header、footerなど、セマンティックなタグが追加され、より論理的なマークアップが可能になります。これらのタグを利用することで、単純に構造が分かりやすくなるという表面的なメリットだけではなく、クローラーが文書の内容をより正確に収集できるようになり、検索の精度が格段に向上するという恩恵を受けられます。コンピュータにやさしいマークアップは最終的に人間にとってもやさしいものになります。

また、駅に設置されているエレベーターが高齢者や車椅子を利用されている方々だけではなく健常者にとっても便利なものであるように、多様な環境で利用されるWebという世界では、環境に依存しないアクセシブルなコンテンツが求められています。Webサイト上で、情報を発信、普及、収集、要求したりするのには、コンテンツというレベルでの情報提供は必須なのです。

このように、HTML5というテクノロジーを活用してマークアップの精度を高め、アクセシブルなものにするといった『裏側のコンテンツ』が最も重要であると私は考えています。それらを導入することで、すぐに変革がもたらされるわけではありませんが、将来的にWebという媒体が最大限に力を発揮するためのいわば投資のようなものです。皆さんがどうお考えになるのかがとても知りたいのですが、ここではHTML5を活用することを最優先事項として話を進めたいと思います。

一企業にとって重要なこと

TML5やJavaScriptなどの標準技術に基づいて開発されたアプリケーションは、あらゆるデバイスで互換性を持ち、クロスプラットフォームの基盤を作る重要な鍵となります。これが実現するのは随分先のことになるとは思いますが、一部の企業にとっては今すぐにでも取り組むべき重要な課題だと思います。それとは別に、多くの企業では直接収益に影響がでるSEO/SEM、Webパフォーマンスの方に力を入れているように思います。SEO/SEMに関しては、具体的にどのような対応しているのかは分からないのですが(すいません‥)、WebパフォーマンスについてはGoogleが検索ランキングアルゴリズムにサイト応答速度を取り入れるという発表があったこともあり、今後はより専門的な分野として発展していきそうです。

クロスブラウザに関しては重要視しているというよりも、IE6の対応を行うのが当たり前という認識なのだと思いますし、現実問題としてIE6を切り捨てるのは難しい状況にあります。シェアが下がり続けそのまま消えてゆくと思われたIE6ですが、聞いた話によると、ある一定の状態を維持し、それがまだ無視は出来ないシェアを占めているということなのです。単純にIE6以外のブラウザを使うことができない、何らかのシステムにIE6のエンジンを採用している、IE6を拘って使用しているという強者もいるかもしれませんが、とにかくそのような低水準のブラウザでも「高水準ブラウザと同等の見栄えを確保する」という需要はまだまだ根強く残っているのです。

依存する技術とアクセシビリティサポーテッド

では、実際にHTML5を活用するためには、どのようなことに留意しなければならないのでしょうか。まず、IE6ではHTML5で追加された新しい要素を認識しないため、レンダリングが行われずスタイルも適用されません。これを解決するためにはRemy Sharp氏が公開した『html5.js』というライブラリを使用します(適用方法などは「HTML5×CSS3の実装で抑えておくべきこと」へ)。つまり、IE6の環境で見栄えを確保すること即ち、JSに依存するということになります。

2010年に改定されたJIS規格では、『依存しているウェブコンテンツ技術』という章が明示化されました。簡単に言えば、利用者が(JSやFLASHなど)特定の技術を有効にしていることを前提にして制作をしてもよいというものです。では、何を基準に依存する、しないを決めるのでしょうか。そこで同時に明示化された『アクセシビリティ・サポーテッド』という概念があります。

【アクセシビリティ・サポーテッドを満たす条件】

• WCAG2.0やJIS X8341-3に適合していること
• 実装技術、ユーザーエージェント、支援技術の折り合いをつける
• 全方位的なアクセシビリティを確保する

第一に規格で定められた要件を満たす必要があります。ただし、規格には適合レベルというものがあり、最低でもレベルA、可能であればレベルAA、余裕があるならレベルAAAというくらいの感覚で良いと思います。この時点で、JSが無効の場合でもコンテンツが問題なく取得できるように配慮する必要はありますが、基本的に適切なマークアップがなされていればCSSが無効の状態でも正しくカスケードされるはずです。

第二にHTMLやJSなどの『コンテンツ側の実装技術』と、ブラウザなどの『ユーザーエージェント』、音声ブラウザなどの『支援技術』とを鑑みて、依存するかしないかを検討する必要があります。なぜこのような過程が必要なのかというと、規格に適合していても、要件によっては相応しくないケースがあるからです。

例えばIE6での閲覧環境を第一優先にする場合や、障がい者や高齢者の訪問が想定される場合は「依存しない」として従来どおりの方法で実装するべきです。前者はイントラネットを制作する場合などで、クライアント側がIE6をメインに使用している場合、後者は自治体のサイトなどで、スクリーンリーダーや音声ブラウザの利用が想定される場合などが挙げられます。もちろんそれらの支援技術がHTML5の新要素を正確に読み上げられるように改善されれば『依存する』と決定することができます。

第三はそれらの折り合いがついて初めてアクセシブルなコンテンツを提供することができるということです。この「折り合いをつける」という部分は非常に難しいところで、作り手である私たち制作者側とユーザーエージェント、支援技術のベンダー側が歩み寄って意識を共有していく必要があると思います。

CSS2.0でクロスブラウザを実現

アクセシビリティ・サポーテッドを満たし『依存する』と決まれば、JSを利用してIE6でも新要素を認識させることができ、スタイルの適用も可能になります。しかし、CSS3には当然対応していないため、『IE9.js』などのライブラリ駆使しても最低限の見栄えしか確保することが出来ません。上でも述べた通り、現時点ではクロスブラウザの需要が高いということもあり、ここを妥協点とさせていただきます。

私たちが最重要事項としているのはコンテンツの充実であり、進化であって、見栄えに関しては従来通りの方法で実装を行うのが得策だと考えます。妥協点というよりも、あらゆる選択肢の中から最適だと思われる方法を選択しているに過ぎず、時代の変化に合わせて柔軟に対応していくべきことであると考えています。

『html5.js』も日々進化しているようで、最近バージョンアップされたものでは、プリントにも対応しているとのことです。

高水準ブラウザへの対応

CSS3がお預けになり(´・ω・｀)ｼｮﾎﾞﾝﾇ となってしまった方々、ご安心ください。プログレッシブエンハンスメントの考え方に則るなら、今までの経緯は最低限のアクセシビリティを確保していたに過ぎません。CSS2.0で従来通りのコーディングを行う以上、CSS3.0のプロパティをフルに活用するのは難しいまでも、高水準ブラウザ向けに施せることはたくさんあるはずです。

モバイル版Safariしか選択肢がないiPhoneでは、事実上HTML5とCSS3が標準プラットフォームになっているわけなので、それ専用のCSSを用意するのも良いかもしれません。時間やコスト的に余裕がないのなら、ちょっとしたスパイスを加える程度でも良いですが、とにかくCSS3がまるで活用できないということはありません。

あくまで最後の楽しみにとっておく程度にはなってしまいますが、そう遠くない未来、それこそIE9のシェアがIE8を抜く頃には時代は変わっているでしょう。

最後に

ここまできたらお気づきの方もいらっしゃるかと思いますが、見栄えに関しては従来通りの方法で行うというだけで「最低限のアクセシビリティを確保し、高水準ブラウザのパフォーマンスを最大限に発揮させよう」という『プログレッシブエンハンスメント』の考え方にはちゃんと則っています。

私の知識量ではこの程度のことしか思いつかないのですが、もっと良い方法があるという方がいらっしゃればどうぞご教授ください。ご意見なども大募集です。