この文書にはより新しいバージョンが存在します。
この実装チェックリストは主にHTML 4.01、CSS2を使用することを前提とした例であり、実際に使用する技術やその使用方法に合わせて、変更して使用することが望まれる。なお、JIS X 8341-3:2010 の細分箇条8.2の表4の例では、すべての達成基準を一つの表として表現しているが、この例では達成基準ごとの表を採用している。統合して一つの表にしてもよいし、そのままの形式でもよい。
また、この例では実際に使用しない可能性のある技術も網羅的に記載しているため、「適用」という欄が設けてある。使用しない実装技術かどうかをこの欄で区別してもよいし、適用欄を使用せず、その実装技術を表から削除してもよい。また、「状況-番号-項目」「関連する実装テクニック」「検証方法」の欄は、この実装チェックリストを理解しやすくするために付け加えたものである。検証方法の欄に実装テクニックの番号だけが書いてある場合には、その実装テクニックの検証(Tests)手順(Procedure)を利用することを示している。
| 項番 | 実装方法 | 適合 | 適用 | 試験方法 | 注記 | 状況-番号-項目 | 関連する実装テクニック | 検証方法 |
|---|---|---|---|---|---|---|---|---|
| 状況 A： ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合： | ||||||||
| 1 | セマンティックなマークアップを用いて、強調したテキスト又は特別なテキストを示す | A-1 | G115 H49 |
強調、又は視覚的な装飾個所が特別な意味を持つ場合、その情報がセマンティックなマークアップによって伝えられているかどうかを確認する。font、b、i、uの使用は禁止されてはいないが、セマンティックなマークアップ(em、strong)が併用されていなければならない。 | ||||
| 2 | 引用箇所がある場合、blockquote要素でセマンティックにマークアップする | A-1 | G115 H49 |
引用箇所に、blockquote要素が使われていることを確認する。 | ||||
| 3 | 引用箇所に参照情報がある場合、参照先を cite 要素でセマンティックにマークアップする | A-1 | G115 H49 |
参照箇所に、cite要素でが使われていることを確認する。 | ||||
| 4 | 下付き文字、上付き文字がある場合、それらを sub、sup要素でセマンティックにマークアップする | A-1 | G115 H49 |
下付き文字、上付き文字がある場合、それらがfont、span要素などではなく、sub、sup要素でマークアップされていることを確認する。 | ||||
| 5 | フォントの種類や形状で情報を伝えている場合、その情報をテキストで提供する | A-2 | G117 | フォントの種類や形状を変化させて情報を伝えている場合、その情報をテキストでも提供しているか、フォントの種類や形状がわからなくても情報が利用できることを確認する。 | ||||
| 6 | CSSを用いて構造と表現を分離する | A-3 | G140 | CSSをオフにして、情報が伝わることを確認する。 | ||||
| 7 | 色の手がかりを用いる場合には、セマンティックにマークアップする | A-4-1 | G138 | 色で情報を伝えている場合、セマンティックなマークアップ(例えば、em、strongなど)を用いていることを確認する。 | ||||
| 8 | テーブルのマークアップを用いて、表の情報を提示する | A-4-2 | H51 | H51 | ||||
| 9 | caption 要素を用いて、データテーブルの表題とデータテーブルを関連付ける | A-4-3 | H39 | H39 | ||||
| 10 | table 要素の summary 属性を用いて、データテーブルの概要を提供する | A-4-4 | H73 | H73 | ||||
| 11 | データテーブルに列方向か行方向かあいまいな見出しセルがある場合、scope属性を用いて、見出しセルとデータセルを関連付ける | A-4-5 | H63 | 列方向か行方向かあいまいな見出しセルがあるか確認し、存在する場合 scope 属性が指定されているかどうかを確認する。 | ||||
| 12 | 見出し構造が複雑で、scope属性だけでは見出しセルが指定できないデータテーブルでは、id 属性及び headers 属性を用いて、データテーブルのデータセルを見出しセルと関連付ける | A-4-6 | H43 | H43 | ||||
| 13-a | label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける | A-4-7 | H44 | H44 | ||||
| 13-b | label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する | A-4-8 | H65 | H65 | ||||
| 14 | フォームのコントロールがあるグループを形成している場合、fieldset 要素及び legend 要素を用いて、フォーム・コントロールのグループに関する説明を提供する | A-4-9 | H71 | H71 (input type="text" でもグループを形成しているときは、同様に確認する。) |
||||
| 15 | optgroup 要素を用いて、select 要素内の option 要素をグループ化する | A-4-10 | H85 | H85 | ||||
| 16 | リストに、ol 要素、ul 要素、dl 要素を用いる リストのマークアップを用いて、リストの情報を提示する |
A-4-11 | H48 | H48 | ||||
| 17 | h1要素～h6要素を用いて、見出しを特定する | A-4-12 | H42 | H42 | ||||
| 18 | ページにコンテンツを追加する場合、DOM（ドキュメント・オブジェクト・モデル）を用いる | A-4-13 | SCR21 | SCR21 | ||||
| 状況 B： ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供していない場合： | ||||||||
| 1 | コンテンツがテキスト(非HTML)の場合、テキストの表現のバリエーションによって伝えている情報を標準的なテキストの記述方法を用いて伝達する | B-1, 2 | G117 T1 T2 T3 |
非HTMLのテキスト文書で、段落、リスト、見出しであることが記述方法やテキストで明確になっているか確認する。 | ||||
作成者：ウェブアクセシビリティ基盤委員会
This document is licensed under a Creative Commons 表示 - 継承 2.1 日本 License.