Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Michael Irigoyen氏がSmashing Magazineにおいて10 Ways To Make Your Site Accessible Using Web Standardsのタイトルのもと、XHTMLで構築されたWebサイトのアクセサビリティを向上させるための10の方法を紹介している。好ましいXHTMLを記述する方法としても参考になる。紹介されている方法は次のとおり。

適切なDOCTYPEを指定する

DOCTYPEが指定されていないとブラウザは自動的にDOCTYPEを判断しようとするため、処理速度の低下につながるほか、適切に描画されない可能性がでてくる。XHTML 1.1かまたはXHTML 1.0 Strictを指定することが望ましい。

名前空間と言語を定義する

デフォルトで利用する名前空間と言語をhtml要素に属性(xmlns、lang)として指定する。

適切なメタタグを指定する

http-equiv、language、description、keywordsなどのメタタグを正しく指定する。

理解しやすいナビゲーションを使う

スクリーンリーダを使ってサイトから情報を得ている人に対してもアクセスしやすいようにサイトを構築するべき。まずtitle要素に適切なタイトルをつけ、文章は文脈に応じて複数のサブセクションに分類する。h1要素はtitleと同じかその一部を含んでいても問題ない。それ以外は文脈に応じてh1、h2…要素でサブセクションを設ける。

JavaScriptを組み込む場合は正しい方法を使う

HTMLではscript要素内のテキストはCDATAとして処理されるが、XHTMLではscript要素内のテキストはPCDATAとして処理される。PCDATAはバリデータで処理されてしまうのでCDATAで処理する必要がある。このためXHTMLではかならずscript要素のなかにCDATA指定をいれる

HTMLエンティティを正しく使用する

さまざまな問題の原因になるため& (&amp;)、" (&quot;)、< (&lt;)、> (&gt;)のようにHTMLエンティティを正しく使う

タグと属性には小文字を使う

XHTMLの規約で定められているため、すべての要素と属性は小文字で記述する。属性に指定する値は大文字であっても小文字であってもかまわない。JavaScriptになれていると属性名にonClickのように大文字を含めてしまいがちだが、これはonclickのようにすべて小文字で書く。

すべてのフォームにはラベルをつける

マウスやスクリーンリーダはklabel要素を活用するため、すべてのフォームにはlabel要素でラベルをつける

画像に対してはalt属性でかならずテキストも提供する

すべての画像にはalt属性を指定し、その画像に対する説明を記載する。空のままにはしない

idとclass属性を正しく使用する

id属性は一度だけ、class属性は使いたいだけ使えるが、これを誤ってid属性ですべて処理しているケースがある。id属性とclass属性をそれぞれ適切に使用する。誤った使用をするとクロスブラウザで思いも寄らない影響がでたり、バリデーションに通らなくなる