JIS X8341-3や、WCAGの規格に完全に準拠することは困難です。しかし視覚障害者や高齢者への配慮が不要な訳ではありません。できることから始めませんか。

このページは、晴眼者向けに視覚障害、色覚障害および高齢者へのWebページ制作上の注意点を記述しています。
そのため、「悪い例」としてアクセシブルではない記述を行なっている個所および、文法的に不適切な個所があります。ご了承ください

文書構造と視覚表現を分離する

難しいタイトルを付けましたが、要はHTML内部からデザイン要素を排除してCSSをきちんと使いましょうということです。

HTMLがシンプルになることで、視覚化されたモダンブラウザ（Internet Explolerや、Firefox、Safariなど）だけではなく、音声ブラウザや、点字ディスプレイと組み合わされたスクリーンリーダなどの支援デバイスでも文書構造が解釈しやすくなるというメリットがあります。

文章の論理構造を正しくマークアップする

HTMLには様々な要素（タグ）が用意されています。それぞれの意味を理解し、正しく論理構造をマークアップすることが大切です。

例えば、項目を列挙する場合は、下記のように書いてはいけません。

・共有サーバ

・仮想専用サーバ

・専用サーバ

番号なしリストであることを論理的に表現できるように<ul>要素（タグ）を利用して下記のように書きます。


  共有サーバ
  仮想専用サーバ
  専用サーバ

文字を太字にして強調したい場合は物理タグを利用して下記のようにせず、

ここは大切な部分です

強調の論理タグである<strong>要素（タグ）とCSSを組み合わせて表現すべきです。<strong>要素（タグ）は、視覚化されたブラウザでは自動的に太字になることが多いですが、明示的にCSSで太字であることを示した方が良いでしょう。

ここは大切な部分です

strong {
  font-weight: bold;
}

その他、見出しである<Hn>要素（タグ）を正しく入れ子にすることや、段落には、<div>要素（タグ）ではなく、段落用の<p>要素（タグ）を利用することも大切です。

音声読み上げブラウザによっては、論理タグを解釈し、「ゆっくり読む」「大きな声で読む」「読み上げる声を変える」などの支援機能が付いている場合があり、アクセシビリティに大きく貢献します。

可能な限りDoctype宣言で明示した規格に準拠する

ブラウザはHTMLファイルに示されたりDoctype宣言に記述されているDTDに従って要素を解釈し、画面に表示します。音声ブラウザやテキストブラウザでも同様です。HTML4では、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

などがそれにあたります。

例えば、番号付きリストに説明を加えたいからといって、下記のような記述をしてはいけません。


  ウォーターフォール
    要求仕様を完全に定義してから開発を行うため長期間になりやすい
  プロトタイピング
    U/I設計が重視され、ビジネスプロセスの検証が軽視される傾向がある
  アジャイルソフトウェア開発
    開発工程全般に、顧客の積極的な参画が必須

晴眼者が利用する視覚化されたブラウザは寛容なので下記のように表示されるかもしれません。

ウォーターフォール

要求仕様を完全に定義してから開発を行うため長期間になりやすい

プロトタイピング

U/I設計が重視され、ビジネスプロセスの検証が軽視される傾向がある

アジャイルソフトウェア開発

開発工程全般に、顧客の積極的な参画が必須

ただしこれは正しい文法ではなく、<ol>の子要素としては<li>要素しか記述することはできません。画面上正しく表示されているように見えても、実は文法に違反しているということがよくあり、音声リーダやその他の支援デバイスを混乱させることがあります。HTML lintや、W3Cが提供しているHTML Validatorなどでチェックするとよいでしょう。