Wrong HTML - アクセシビリティをチェックする - 優先度2

優先度2のチェック、が...

優先度2のチェックの為にこのサイトのトップページを利用しようと思ったのですが、やはり単純すぎるのか、大したエラーが出ないため、某大手検索サイトや某OSベンダーのトップページをTidyでチェックしてみたのですが、検索サイトのほうはエラーが多すぎて(警告672個、エラー40個。これでも全てではないらしい)アクセシビリティチェックまでできず、OSベンダーのほうはFatal Error & Panic - tree has lost its integrityという前代未聞のエラーが発生したためこちらはHTML自体がチェック不可能でした。

OSベンダーの方はW3Cにも参加して、コンテンツとしてアクセシビリティ云々というものがあったような気がするのですが、まぁ気のせいでしょう(汗)

というわけで、どうにかチェックができた、某省の情報バリアフリー関係のサイトの結果を使用して、解説していきます。

チェック結果

結果から優先度1の項目を削除したものです。

• line 1 column 1 - エラー: [3.2.1.1]: <doctype> missing.
• line 8 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 8 column 2 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 21 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 36 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 36 column 1 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 39 column 5 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 53 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 59 column 9 - 警告: [13.1.1.3]: link text too long.
• line 63 column 9 - 警告: [13.1.1.3]: link text too long.
• line 67 column 9 - 警告: [13.1.1.3]: link text too long.
• line 71 column 9 - 警告: [13.1.1.3]: link text too long.
• line 78 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 78 column 2 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 82 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 157 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 157 column 2 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 161 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 188 column 5 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 188 column 5 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 191 column 9 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 202 column 9 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 202 column 9 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 232 column 5 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 247 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 247 column 2 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 250 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 262 column 5 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 265 column 9 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 265 column 9 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 266 column 9 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 287 column 9 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 287 column 9 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 288 column 9 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 317 column 10 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 322 column 27 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 322 column 27 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 334 column 5 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 336 column 57 - 警告: [13.1.1.3]: link text too long.
• line 347 column 2 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 347 column 2 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 357 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 425 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 467 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 467 column 1 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 484 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 484 column 1 - 警告: [5.3.1.1]: verify layout tables linearize properly.
• line 496 column 1 - エラー: [5.5.2.1]: <table> missing <caption>.
• line 499 column 9 - 警告: [13.1.1.3]: link text too long.
• line 505 column 9 - 警告: [13.1.1.3]: link text too long.
• line 511 column 9 - 警告: [13.1.1.3]: link text too long.
• line 517 column 9 - 警告: [13.1.1.3]: link text too long.
• line 523 column 9 - 警告: [13.1.1.3]: link text too long.

見事に思った通りの結果になっています。返されたエラーと警告の種類はそう多くはないのですが、このページでは1ページ内になんと29個のテーブルを使用しています。段組みのためにテーブルを使用するということがありがちですが、ここではパッと見た感じでは段組みはほとんど使われていません。ではなぜこれだけのテーブルが必要か？それは全てのテキストの位置をテーブルで制御しているからです。

しかも内容がアクセシビリティについてなので、さらに驚きですね。このページ内にはこう書いてあります。高齢者・障害者を含め、誰もがホームページを利用できるよう、ホームページの問題点を点検し、修正を支援するシステム（ウェブアクセシビリティシステム）を平成１２年に開発しています。 さらにこのシステムは、WAIのアクセシビリティガイドラインをベースに作成された、「インターネットにおけるアクセシブルなウェブコンテンツの作成方法に関する指針」を考慮し「日本独自の環境を加味して開発。」した...そうです。なのに中身がこれですか...。

各エラーと警告

公開されている文法の形式に従って文書を作成する

さて、文句を言い出したらきりがないので、ひとつめの<doctype> missingについてです。ガイドラインには

「例えば、公表されたDTD (strict HTML 4.0 DTD など)を参照する文書の初めに文書型宣言を含んでください。」

HTML文書を書く以上はなんらかの文書型に従っているものと思われます。その宣言をすることで、UAに用法の場所を知らせることができます。最近ではWWWブラウザがDOCTYPE宣言によって表示法を変更するので、きちんと宣言しておきましょう。

テーブルの線形化

次は"verify layout tables linearize properly"です。

「テーブルが線形化されたときに理解できない場合はテーブルをレイアウトに使用しない。もし理解できないならば代替(線形化されたものかもしれない)を用意する。」

とありますが、線形化されて意味が通ればいいのかというと、関連項目にガイドライン3.3があります。

スタイルシートの使用(ガイドライン3.3 優先度2)

「レイアウトとプレゼンテーションのコントロールにはスタイルシートを使用する」

この中の「Techniques for checkpoint 3.3」には「レイアウト、ポジショニング、レイヤー、および行揃えはスタイルシート(特にCSSのフロートと絶対的な位置決め)を使用して行われるべきです。」とあるので、たとえ線形化されたときに意味が通っても、CSSを使用して表現できることならCSSを使用しましょう。

表に要約をつける

<table> missing <caption>については、ガイドラインでは必ずしもCaptionは必要ではない、となっていますが、Captionをつけない場合は、title属性で表の性質をいくつかの言葉で説明するように、とあります。それから、summary属性も忘れずに。

リンクテキストについて

最後は「link text too long」ですが、ガイドラインには「各リンクの目標を明確にする」とあり、その下の説明には、「リンクテキストは文脈から離れても十分に意味がわかるようにする(リンクが単独でも、連続したものの一部でも)。また、リンクテキストは簡潔であるべきです。」とあるので、このサイトのように一行まるごとリンクのテキストにするのは好ましくない、ということですね。

思うこと

現状ではCSSのfloatなどを正しく解釈しないWWWブラウザがあるので、テーブルによる段組みに頼らざるを得ないということもあるので、状況によって使い分けるのは仕方ありません。しかし最近では対応、未対応などの話ではなく単に「テーブル = 段組み」になってはいないでしょうか？もしくは「レイアウト = テーブル」でしょうか。特に大手企業や政府機関は、そのレイアウトが参考にされることも多いでしょう。しかし、そのようなサイトの大半がテーブルを使用してレイアウトをしています。せめてアクセシビリティについて触れているページくらいはまともにマークアップして欲しいものです。

たまにDIV病という言葉を目にしますが、1ページ内に30近いテーブルなんて、これはテーブル病と言ってもいいでしょう。特に今回のこのサイトに関しては段組みもほとんど使用していないのならば、CSSでtext-indentなどを使用したほうがページ自体も軽くなっていいと思います(その前に担当者がCSSを知っていたら、ですが...)。

今回はなんだか解説になっていないような感じですが、テーブルを使用したレイアウトが蔓延しているので、取り上げてみました。Tidyのチェック結果の解説で済んでしまう気もしますしね。