記事本文
Another HTML-lint gateway だけに頼るのは危険
小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）を読んで、間違いがあったり不十分な記述があったりするなあと思いました。 全体としては頷ける内容なのですけれども。
テンプレートをカスタマイズされるユーザの方から「表示がくずれるのですが」という質問を頂くことがあります。その方々のページを Another HTML-lint gateway で検証すると、HTMLマークアップの誤り、つまりタグの過不足から表示が崩れるケースが少なくありません
と、 not well-formed であるケースを指摘していますが、どうも小粋空間の yujiro さんは Another HTML-lint gateway ( というか Validator の類 ) に頼りすぎている印象があります。
小粋空間: このサイトについてでも
このブログではウェブスタンダード（Web標準）への準拠とアクセシビリティにこころがけています
と謳っていますが、
XHTML 1.0 Transitional によるマークアップを行っています。全てのページで W3C Markup Validation Service で valid となるよう、また Another HTML-lint gateway で文法を適宜チェックするよう、こころがけています
という記述もあり、どうも機械的なチェックしかしていないように思えるのです。
( これは ソースコードは blockquote でマークアップ ? - Validator では見えないモノでも一度述べましたが。 )
HTMLタグは、あるタグの開始・終了が他のタグの開始・終了と重なってはいけない
重箱の隅をつつくような指摘になりますが、 HTML ( というか SGML ) の場合は 開始タグ・終了タグの省略が可能な要素もありますので、ソース中では開始タグのみが連続し、重なっているように見られることがあります。 「 XHTMLタグは、あるタグの開始・終了が他のタグの開始・終了と重なってはいけない」という記述なら問題は無いのですが。 ( 「あるタグの開始・終了が他のタグの～」というのも少し変な言い回しとは思いますが。)
色の情報だけを用いない
トラックバックスパムの対策を講じてみた - Quasi-Spam Filter Plugin にフィルタ対象を加えるおよびトラックバックスパムの対策を講じてみた - トラックバックスパム対策（その2）: 小粋空間の記述との違いで一度指摘したことですが、相変わらずの記述なので再度指摘します。
<p><strong>１．HTMLマークアップの基本</strong><br />
HTMLタグは、あるタグの開始・終了が他のタグの開始・終了と重なってはいけないというルールになっています。<br />
下記に一番簡単な例を示します。誤ってマークアップしたタグを赤で示します。</p>
<dl><dt>正しい例</dt></dl>
<blockquote><head><br />
</head><br />
<body><br />
</html></blockquote>
<dl><dt>正しくない例</dt></dl>
<blockquote><head><br />
<span class="red"><body></span><br />
</head><br />
</body></blockquote>
<p>お分かりの通り、head 終了タグの前に body タグが挿入されているのが誤りです。これがいわゆる「タグが重複している」という状態です。</p>
これは小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）のソース記述部分なのですが、強調 ( したいのだろうと思われる ) 部分に <span class="red"> という論理的意味を持たないマークアップがなされています。
そして、スタイルシートの方で span.red { color: #e50003; } として文字色を赤にして
誤ってマークアップしたタグを赤で示します
と示していますが、これだと色の情報を持たない UA では全く意味がありません。
これは Web Content Accessibility Guidelines 1.0 ( WCAG 1.0 ) でも Don't rely on color alone. と示されています。
Ensure that text and graphics are understandable when viewed without color.
If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.
Checkpoints:
- 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority 1]
- Techniques for checkpoint 2.1
- 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].
- Techniques for checkpoint 2.2
同様の部分を邦訳版であるウェブコンテンツ・アクセシビリティ・ガイドライン 1.0 で見てみると、色だけに依存しないと示されています。
色を再現できない環境で表示しても、テキストやグラフィックスが理解できるようにする
ある情報を伝えるために色だけを利用している場合、特定の色を識別できない人やモノクロの画面を使用している人、ビジュアルな表示のできないディスプレイを使用している人などは、情報を受け取ることができなくなります。 また、前景色と背景色の色相が非常に近いような場合、モノクロモニタで見ている人や色の識別が難しい人などに対して、十分なコントラストを与えることができません。
チェックポイント：
- 2.1 色によって表現されている全ての情報は、その色を再現できない環境でも得られるようにしておく（たとえば、前後関係やタグ付けなどによって）。[優先度1]
- チェックポイント2.1の技術書の解説
- 2.2 前景色と背景色の組み合わせは、色の識別が困難な人やモノクロ画面を使用している人などに対しても十分なコントラストを与えるようなものにする。[対画像：優先度2 、対テキスト：優先度3]
- チェックポイント2.2の技術書の解説
不適切なマークアップ
<span class="red"> 以外にも「 ? 」と思うマークアップが随所に見受けられます。
- 前後する見出しレベル
-
例えば、小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）の見出しだけを抜き出してアウトライン表示をすると、
- <h1>小粋空間 - a cheap joke and a play on words site</h1>
- <h2>a cheap joke and a play on words site</h2>
- <h3>2006年05月02日</h3>
- <h2>テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）</h2>
- <h3>Posted at May 2,2006 01:32 AM Category：[blog] Tag：[Template, HTML]</h3>
- <h2>a cheap joke and a play on words site</h2>
というように、見出しレベルが適切な関係になっていません。 例えば、 a cheap joke and a play on words site という h2 要素を無くして以降の見出しを 1 レベルずつ上げ、日付を h2 、記事タイトルを h3 、投稿者情報やカテゴリ・タグ情報を h4 ( あるいはこれはメタデータと考えて見出しを割り振らない ) というようにすると適切な関係になると思います。
- <h1>小粋空間 - a cheap joke and a play on words site</h1>
- 謎の dl 要素
-
これは DTD には反していない ( =Validator ではエラーにならない ) けれども、前後の文章から考えてマークアップがおかしなパターン。
<p><strong>１．HTMLマークアップの基本</strong><br /> HTMLタグは、あるタグの開始・終了が他のタグの開始・終了と重なってはいけないというルールになっています。<br /> 下記に一番簡単な例を示します。誤ってマークアップしたタグを赤で示します。</p> <dl><dt>正しい例</dt></dl> <blockquote><head><br /> </head><br /> <body><br /> </html></blockquote> <dl><dt>正しくない例</dt></dl> <blockquote><head><br /> <span class="red"><body></span><br /> </head><br /> </body></blockquote> <p>お分かりの通り、head 終了タグの前に body タグが挿入されているのが誤りです。これがいわゆる「タグが重複している」という状態です。</p>これは先ほどと同じく小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）のソース記述部分なのですが、「正しい例」や「正しくない例」と示された部分に対応する内容が示されていません。
dl 要素自体は、その直下に dt 要素または dd 要素が最低 1 つ存在すれば良い ( 例えば XHTML 1.0 では Strict DTD 、 Transitional DTD ともに <!ELEMENT dl (dt|dd)+> と定義されていますし、 HTML 4.01 では Strict DTD 、 Transitional DTD ともに <!ELEMENT DL - - (DT|DD)+> と定義されています。 ) ので Validator ではエラーになりませんが、この場合は前後の文脈から考えて
<p><strong>１．HTMLマークアップの基本</strong><br /> HTMLタグは、あるタグの開始・終了が他のタグの開始・終了と重なってはいけないというルールになっています。<br /> 下記に一番簡単な例を示します。誤ってマークアップしたタグを赤で示します。</p> <dl> <dt>正しい例</dt> <dd> <blockquote><head><br /> </head><br /> <body><br /> </html></blockquote> </dd> </dl> <dl> <dt>正しくない例</dt> <dd> <blockquote><head><br /> <span class="red"><body></span><br /> </head><br /> </body></blockquote> </dd> </dl> <p>お分かりの通り、head 終了タグの前に body タグが挿入されているのが誤りです。これがいわゆる「タグが重複している」という状態です。</p>というマークアップをするのがより正しいマークアップに近づくと思います。 ( ただ、これ以降の「３．HTMLマークアップを間違えない方法」ではきちんと dl 要素を活用しているんですよね。 こちらの「正しい例」や「正しくない例」が何故こういったマークアップになっているのかが謎です。 )
- ソースコードは引用 ?
-
これも以前ソースコードは blockquote でマークアップ ? で指摘したので詳しくは書きませんが、ソースコード部分を blockquote でマークアップするのは不自然だと思うのです。
- 見出しにした方が良い部分
-
Movable Type は記事中に HTML タグを記述することができます。 よって、記事内の小見出しとしたい部分には、テンプレートの見出しレベルを勘案しながら h3 や h4 あたりの見出し要素でマークアップした方がアクセシビリティが向上します。 ( ホームページリーダーやボイスサーフィンのような音声ブラウザや、 Firefox のように拡張機能を用いることができる最近のブラウザなどではキーボード操作で「次の見出し」へスキップするといった機能が実装されています。 )
<p><strong>１．HTMLマークアップの基本</strong><br /> HTMLタグは、あるタグの開始・終了が他のタグの開始・終了と重なってはいけないというルールになっています。<br /> 下記に一番簡単な例を示します。誤ってマークアップしたタグを赤で示します。</p>たとえば、この例では「１．HTMLマークアップの基本」という部分は単なる「強調 + 強制改行」ではなくきちんと見出しとしてマークアップした方が良いと思います。
ネスト ?
- タグにネストをつける
- ２項の例でもお分かりの通り、タグの中に別のタグを書く場合、ネストをつけて右寄り（2～4カラム程度）に書きます。 これを行うことでタグの親子関係と開始・終了タグの関係が明確になります。 タグが兄弟関係（head と body 等）の場合は同一のネストします。
これは単純に言葉の誤りだと思うのですが、ネストではなくてインデントではないでしょうか……。 見出しやセクションなどを適切にマークアップしていけばネスティングされるのは自然なことですし、ソースコードの可読性を高めて開始タグと終了タグの関係を見た目でも明確にするのはインデントだと思います。
ある程度の知識を身につけて欲しい
ここまでかなり小さな部分から、是非改善してもらいたい部分 ( 色の情報だけを用いない ) まで指摘をしましたが、 yujiro さんは
このブログではウェブスタンダード（Web標準）への準拠とアクセシビリティにこころがけています
と表明している以上、チェックツールの使用や孫引きの知識だけではなく、仕様書に基づいた知識を身に着けて欲しいなという思いから指摘をしました。
小粋空間は Movable Type の良質なテンプレートを配布しており、ユーザへのサポートも真摯に行っているので尊敬している人の一人なのですが、こうしたカスタマイズの記事には誤解が広まるような内容は含まないでもらいたいと思うのです。
もちろん、私も偉そうに言っていますが多かれ少なかれ誤解をしている部分がこの記事に限らず多々あると思います。 そういった部分を見つけられた場合は遠慮なく指摘をしてください。
トラックバック送信先
- 小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）
-
テンプレートのカスタマイズのマークアップ的なポイントということですが、その記事中のマークアップ自体にいくつか良くない点があるので、指摘させていただきました。
