どのような環境でもわかりやすいWebサイト
何度も言うようでくどいかもしれませんが、UAを特定してのWebサイトは気持ちのいいものではありませんね。確かに複数のUAで確認するということは難しいことです。WindowsだけでもいくつのUAがあるか分からない状況では仕方ないのかもしれませんが、上手に構造だけをマークアップしていればある程度はアクセシブルなWebサイトになるのではないのでしょうか？
ここからはしばらくWAIのWeb Content Accessibility Guidelines 1.0を参考にしながら話しを続けていこうと思います。
このガイドラインではアクセシビリティに関する項目を3つの優先度に分けてあります。優先度1はWebコンテンツ作成者はそれを満たさなければならない、優先度2は満たすべきである、そして優先度3は取り組むことが望ましい、となっているので、まず今回は優先度1から取り組んでみましょう。
優先度1をチェックしてみる
まず、自分のHTML文書を自分でチェックしてもなかなかわからないものなので、Tidyを使ってみます。Tidyのコンフィグファイルに"accessibility-check"の記述がない場合は「accessibility-check: 1」を追加し、あったなら値を1に設定してください。これで優先度1のチェックができます。
このサイトのトップページをチェックしてみると
- line 11 column 5 - 警告: [6.1.1.1]: style sheets require testing (link).
- line 12 column 5 - 警告: [6.1.1.1]: style sheets require testing (link).
- line 13 column 5 - 警告: [6.1.1.1]: style sheets require testing (link).
- line 17 column 19 - 警告: [7.1.1.5]: remove flicker (animated gif).
- line 17 column 19 - 警告: [2.1.1.1]: ensure information not conveyed through color alone (image).
- line 17 column 19 - 警告: [1.1.2.1]: <img>missing 'longdesc' and d-link.
- line 42 column 103 - 警告: [7.1.1.5]: remove flicker (animated gif).
- line 42 column 103 - 警告: [2.1.1.1]: ensure information not conveyed through color alone (image).
- line 42 column 103 - 警告: [1.1.2.1]: <img>missing 'longdesc' and d-link.
- line 42 column 251 - 警告: [7.1.1.5]: remove flicker (animated gif).
- line 42 column 251 - 警告: [2.1.1.1]: ensure information not conveyed through color alone (image).
- line 42 column 251 - 警告: [1.1.2.1]: <img>missing 'longdesc' and d-link.
- line 42 column 385 - 警告: [2.1.1.1]: ensure information not conveyed through color alone (image).
- line 42 column 385 - 警告: [1.1.2.1]: <img>missing 'longdesc' and d-link.
これだけ警告が出てきました。ちょっと驚くくらいの数かもしれませんが、エラーというわけではないので確認してみたほうがいいということです。ではこれらの警告を元に検証してみましょう。
スタイルシートがなくても読めるようにする
まず"style sheets require testing (link)"ですが、警告文の左にどのガイドラインを参照すればよいかということを表す数字がついていますので、今回はガイドラインの6.1を見てみると
「スタイルシートなしでも見ることができるようにHTML文書をまとめる。スタイルシートがない状態でも文書を読むことが可能でなければならない。」
と書いてあります。それに伴ってスタイルシートのテストが必要、ということですね。というわけでスタイルシートを外してみました(これを書いたときのTOPページです)。元がシンプル過ぎて大して変わらないのでサンプルになるのかどうか分かりませんが、普通に読むことができるのでこれはクリアとします。
画面を明滅させない
続いて"remove flicker (animated gif)"ですが、ガイドラインには
「ユーザーエージェントが明滅を制御できるようになるまで画面の明滅を引き起こすことは避けるように」
とあります。ということはこの警告はアニメーションGIFを使用して明滅させているようなら、取り外しなさい。という意味なのでこれもクリアですね。
色に依存しない
次の"ensure information not conveyed through color alone (image)"は
「色で表現されている全ての情報は色がなくても利用できることを確認する。（例えば文脈やマークアップによって）」
とあります。これはちょっと迷いましたが、今回はイメージの色のことなのでイメージ4つをモノクロにして確認してみました。この項目のチェック法としていくつか挙げられているので読んでみると
- モノクロのモニタを使ってみる
- 色が表示されない状態でブラウザで確認
- ブラウザの配色を白と黒、ブラウザセーフカラーのグレイ4色(#CCCCCC,#999999,#666666,#333333)のみを使用して確認してみる
- 白黒のプリンタで印刷、それを数回コピーし劣化した状態で確認
とありました。全体的にチェックするにはこれらを試してみたほうがよりアクセシブルだということですね。
同等の内容のテキストをつける
残るひとつは"<img>missing 'longdesc' and d-link."ですね。IMG要素にlongdesc属性とd-linkがないとありますが、ガイドラインには
「あらゆるテキスト以外の要素(ASCIIアートも含む)には同等のテキストをつける」
とあり、またその中で、「短い同等のテキストがイメージの機能や役割を伝えるのに不十分な場合は、longdesc属性が示すファイルに追加情報を書く」「longdesc属性をサポートしないUAのために画像の隣に同様にd-link(Description Link)をつける」とありました。しかしこのサイトではlongdesc属性を必要とするような複雑な画像や図、イメージマップは使用していないので、これもクリアとしてしまいます。
優先度1はクリアか？
Tidyが出した警告はクリアしたつもりですが、やはりTidyのようなアプリケーションでは視覚効果まではチェックできないので第3者に確認してもらえればそれが一番いいと思います。
このサイトが単純すぎたところもありますが、構造だけをしっかりとマークアップしていれば優先度1は混乱なくクリアできそうな気がしますが、いかがでしょうか？
優先度1 チェックリスト
- 1.1 - テキスト以外の要素(Asciiアート含)には同等のテキストをつける
- 1.2 - サーバーサイド・イメージマップには各領域と同等のテキストをつける
- 1.3 - ユーザーエージェントが自動的に映像のトラック情報などを読めるようになるまでは、マルチメディアを使用したプレゼンテーションではの重要な情報を音声によって提供する。
- 1.4 - あらゆる動的な内容のマルチメディアを使用したプレゼンテーション（例えば動画やアニメーション）のために、同等な代替手段（見出しか音声による説明）を同期させる。
- 2.1 - 色で表現されている全ての情報は色がなくても利用できることを確認する
- 4.1 - 文章中の自然言語の変化を明示する
- 5.1 - データを表す表では列と行のヘッダを特定する
- 5.2 - データを表す表で二つ以上のヘッダがある場合は、マークアップによってデータセルとヘッダーセルを関連付ける
- 6.1 - スタイルシートがなくても読めるようにする
- 6.3 - スクリプトやアプレットなどがオフやサポートされないときでも確実にページが使用可能であるようにする。それが不可能なら代替のアクセスしやすいページへの情報を提供する
- 7.1 - 画面を明滅させない
- 9.1 - サーバーサイド・イメージマップの代わりに領域を定義できないなどの理由がない場合はクライアントサイド・イメージマップを使う
- 12.1 - 各フレームには名前をつける
- 14.1 - サイトの内容に適切で簡単な言葉を使用する
- 11.4 - 最善の努力をしてもアクセシブルなページが作成できない場合、アクセスしやすく同等の情報（または機能）を持った、アクセスしにくい（オリジナルの）ページと同じくらい更新される代替ページへのリンクをつける。
アクセシビリティに関するリンク