情報バリアフリーポータルサイト

日本アクセシビリティ普及ネットワーク

  1. 現在位置
  2. ホーム　>
  3. 実装チェックリスト　>
  4. 「達成基準A」実装チェックリスト（HTML版）

おしえて！
アクセシビリティ

検索方法

人気コンテンツ

実装チェックリスト 等級A（HTML版）

実装チェックリスト　等級Aについて

試験では、まず実装チェックリスト例を使用して、実装チェックを行います。以下の実装チェックリストは、当ネットワークがUnderstanding WCAG 2.0（日本語訳）（外部リンク）とTechniques for WCAG 2.0（日本語訳）（日本語訳）（外部リンク）を元にして、ウェブアクセシビリティ基盤委員会「JIS X 8341-3:2010 試験実施ガイドライン」（外部リンク）を参考に独自に作成したものです。HTML版は閲覧のみとしてください。間違いを発見された際は、ご連絡をいただければ修正いたします

実装チェックリスト項目　等級A
検証項目 実装番号
7.1.1.1非テキストコンテンツに関する達成基準
状況A：短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合：
1.img 要素の alt 属性を用いる H37
2.applet 要素に代替テキストを提供する H35
3.object 要素のボディに代替テキストを記述する H53
4.イメージマップの area 要素に代替テキストを提供する H24
5.非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する、簡潔な代替テキストを提供する G94
6.隣り合った画像とテキストリンクを同じリンクの中に入れる H2
7.ASCII アート、絵文字、及びリート語に代替テキストを提供する H86
8.a要素のリンクの目的を説明するテキストリンクを提供する H30
9.画像のグループにある一つの画像に代替テキストを提供して、そのグループのすべての画像を説明する G196
状況B：短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できない場合（例：チャート又はダイアグラム）：
  • 1.いずれかの方法を用いて、非テキストコンテンツの簡単な説明を提供する、簡潔な代替テキストを提供する
  • 1-a.非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する長い説明を提供する
  • 1-b.短い説明の中で長い説明のある場所を示して、非テキストコンテンツの近くにあるテキストで長い説明を提供する
  • 1-c.非テキストコンテンツのすぐ隣に別の場所へのリンクを置き、その別の場所で長い説明を提供する
状況C：非テキストコンテンツがコントロールである、又は利用者の入力を受け入れる場合：
1.送信 / 実行ボタンとして用いる画像の alt 属性を使用する
  • 2.いずれかの方法を用いる
  • 2-a.label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける
  • 2-b.label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する
状況D：非テキストコンテンツが時間の経過に伴って変化するメディアである場合：
  • 1.以下のいずれかの方式で、非テキストコンテンツの内容が分かるラベルを提供する
  • 1-a.コンテンツの内容が分かるラベルを提供し、ライブの音声しか含まないコンテンツ及びライブの映像しか含まないコンテンツの目的を説明する
  • 1-b.非テキストコンテンツの一般に認められた名前又は内容が分かる名前を提供する
状況E：非テキストコンテンツが CAPTCHA である場合：
1.代替テキストを提供して、CAPTCHAの目的を説明する G143
2.同じ目的を果たす、異なる感覚モダリティを用いたもう一つのCAPTCHAがウェブページにあることを確認する G144
状況F：非テキストコンテンツを支援技術が無視するようにしなければならない場合：
1.支援技術が無視すべき画像のimg要素は、alt属性値を空にして、title属性を付与しない H67
2.CSSで指定する画像は、装飾的なものだけである C9
7.1.2.1収録済みの音声しか含まないメディア及び収録済みの映像しか含まないメディアに関する達成基準
状況 A：収録済みの音声しか含まないコンテンツの場合：
  • 1.いずれかの方法を用いる
  • 1-a.時間の経過に伴って変化するメディアの収録済みの音声しか含まないコンテンツに対して代替コンテンツ（書き起こしテキスト）を提供する
  • 1-b.時間の経過に伴って変化するメディアの収録済みの音声コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする
状況 B：収録済みの映像しか含まないコンテンツの場合：
  • いずれかの方法を用いる
  • 1-a.時間の経過に伴って変化するメディアの収録済みの音声しか含まないコンテンツに対して代替コンテンツ（書き起こしテキスト）を提供する
  • いずれかの方法を用いる
  • 1-a.時間の経過に伴って変化するメディアの映像しか含まないコンテンツに対して代替コンテンツ（書き起こしテキスト）を提供する
  • 1-b.重要な映像コンテンツを説明する音声を提供する
  • 1-c.時間の経過に伴って変化するメディアの収録済みの映像コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする
7.1.2.2収録済み音声コンテンツのキャプションに関する達成基準
  • いずれかの方法を用いる
  • 1-a.オープン・キャプション（常に表示）を提供する
  • 1-b.クローズド・キャプションを提供する
  • 1-c.時間の経過に伴って変化するメディアの収録済みの音声コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする
7.1.2.3収録済みの映像コンテンツの代替コンテンツ又は音声ガイドに関する達成基準
  • いずれかの方法を用いる
  • 1-a.時間の経過の伴い変化するメディアに対して代替コンテンツを提供する
  • 1-b.音声ガイドを含んだ、利用者が選択可能な副音声トラックを提供する
  • 1-c.時間の経過に伴って変化するメディアの収録済みの映像コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする
  • ※映像トラックにある情報のすべてが音声トラックですでに提供されている場合には、音声ガイドを必要としない。
7.1.3.1情報及び関係性に関する達成基準
状況 A：ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合：
  • 1.セマンティックな要素を用いて、構造をマークアップする
  • 1-a .強調、又は視覚的な装飾個所が特別な意味を持つ場合、その情報がセマンティックなマークアップによって伝えられている。
  • 1-b. 引用箇所に、blockquote要素が使われている。
  • 1-c. 参照箇所に、cite要素が使われている。
  • 1-d. 下付き文字、上付き文字が、sub、sup要素でマークアップされている。
2.テキストを用いて、テキストの表現のバリエーションによって伝えている情報を伝達する G117
3.情報と構造を表現から分離して、異なる表現を可能にする（CSSを用いて構造と表現を分離する） G140
4.色の手がかりを用いる場合には、セマンティックにマークアップする G138
5.テーブルのマークアップを用いて、表の情報を提示する H51
6.caption要素を用いて、データテーブルの表題とデータテーブルを関連付ける H39
7.table 要素の summary 属性を用いて、データテーブルの概要を提供する H73
8.データテーブルに列方向か行方向かあいまいな見出しセルがある場合、scope属性を用いて、見出しセルとデータセルを関連付ける H63
9.見出し構造が複雑で、scope属性だけでは見出しセルが指定できないデータテーブルでは、id 属性及び headers 属性を用いて、データテーブルのデータセルを見出しセルと関連付ける H43
10.label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける H44
11.label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する H65
12.フォームのコントロールがあるグループを形成している場合、fieldset 要素及び legend 要素を用いて、フォーム・コントロールのグループに関する説明を提供する H71
13.optgroup 要素を用いて、select 要素内の option 要素をグループ化する H85
14.リストに、ol 要素、ul 要素、dl 要素を用いる
リストのマークアップを用いて、リストの情報を提示する		 H48
15.h1要素～h6要素を用いて、見出しを特定する H42
16.ページにコンテンツを追加する場合、DOM（ドキュメント・オブジェクト・モデル）を用いる SCR21
状況 B：ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供していない場合：
1.テキストを用いて、テキストの表現のバリエーションによって伝えている情報を伝達する G117
  • 2.表現によって伝えられている情報及び関係性をプログラムが解釈可能にする、又は次の実装方法を用いてテキストで入手可能にする：
  • 2-a.段落に、標準的なテキストの書式の表現法を用いる(TXT)
  • 2-b.リストに、標準的なテキストの書式の表現法を用いる(TXT)
  • 2-c.見出しに、標準的なテキストの書式の表現法を用いる(TXT)
7.1.3.2 意味のある順序に関する達成基準
1.コンテンツを意味のある順序で並べる G57
2.単語の文字間にスペースやタグを用いない C8
7.1.3.3感覚的な特徴に関する達成基準
1.理解すべき情報を感覚的にだけ伝えることのないように、テキストでも情報を伝える G96
7.1.4.1色の使用に関する達成基準
状況 A：ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合：
1.色の違いで伝えている情報をテキストでも入手可能にする G14
2.テキストの色の違いで情報を伝える際は、視覚的な手がかりを補足する G182
3.色の違いだけで示されているリンク又はコントロールは、その文字色と周囲にあるテキストとのコントラスト比を 3:1 以上にして、フォーカスを受け取ったときには視覚的な手がかりを補足して強調する G183
状況 B：情報を伝える画像の中で色を用いている場合：
1.色とパターンを併用する G111
2.色の違いで伝えている情報をテキストでも入手可能にする G14
7.1.4.2音声制御に関する達成基準
1.音声の再生を3秒以内に自動的に停止する G60
2.自動的に再生される音声を停止するコントロールを、ウェブページの先頭付近で提供する G170
3.利用者の要求に応じてのみ、音声を再生する G171
7.2.1.1キーボード操作に関する達成基準
1.HTMLのフォーム・コントロール及びリンクを用いる H91
2.キーボードがトリガーとなるイベント・ハンドラを提供する G90
7.2.1.2フォーカスに関する達成基準
1.ユーザーがコンテンツ内に閉じ込められないようにする G21
7.2.2.1調整可能な制限時間に関する達成基準
状況 A：セッションの制限時間がある場合：
  • 1.次のいずれかを適用する
  • 1-a.複数の画面で構成されるフォームの最初のページに、利用者がセッションの制限時間を延長又は解除できるチェックボックスを提供する
  • 1-b.利用者が制限時間を解除できる手段を提供する
状況 B： 制限時間がページ上のスクリプトで制御されている場合：
  • 1.次のいずれかを適用する
  • 1-a.利用者が制限時間を解除できる手段を提供する
  • 1-b.利用者が初期設定の制限時間を10倍に設定できる手段を提供する
  • 1-c.制限時間が切れようとしていることを利用者に警告するスクリプトを提供する。利用者が初期設定の制限時間を延長できるようにする
状況 C： コンテンツを読むのに制限時間がある場合：
  • 1-a.コンテンツを一時停止させて、一時停止させたところから再開できるようにする
  • 1-b.利用者が制限時間を解除できる手段を提供する
状況に関らず、以下のいずれかを満たす場合は例外とする
1.リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない 実装番号なし
2.制限時間は必要不可欠である 実装番号なし
3.制限時間は20時間より長い 実装番号なし
7.2.2.2 一時停止，停止及び非表示に関する達成基準
状況：動き、点滅、スクロール　　動きのある、点滅している、又はスクロールしている情報が、(1) 自動的に開始し、(2) 5秒よりも長く継続し、そして (3) その他のコンテンツと並行して提示される場合、利用者がそれらを一時停止、停止、又は非表示にすることのできるメカニズムがある。ただし、その動き、点滅、又はスクロールが必要不可欠な動作の一部である場合は除く。
  • いずれかを用いる。
  • 1-a.コンテンツを一時停止させて、一時停止させたところから再開できるようにする
  • 1-b.スクリプトを用いてコンテンツをスクロールし、それを一時停止できるメカニズムを提供する
  • 1-c.5秒未満で点滅が終わるようにコンテンツを制作する
  • 1-d.ユーザーエージェントによって点滅するコンテンツを停止できるウェブコンテンツ技術を用いる
  • 1-e.数回のループ後（5秒以内）に停止するように、アニメーションGIFを設定する
  • 1-f.スクリプトを用いて、点滅を制御し、5秒以内に停止させる
  • 1-g.動きのあるコンテンツ、点滅するコンテンツ、又は自動更新されるコンテンツを停止させるコントロールを用いる
  • 1-h.点滅するコンテンツのないページを読み込むリンク、ボタン、又はその他のメカニズムを提供する
状況：自動更新　　自動更新する情報が、(1) 自動的に開始し、 (2) その他のコンテンツと並行して提示される場合、利用者がそれを一時停止、停止、もしくは非表示にする、又はその更新頻度を調整することのできるメカニズムがある。ただし、その自動更新が必要不可欠な動作の一部である場合は除く。
  • いずれかを用いる。
  • 1-a.コンテンツを一時停止させて、一時停止させたところから再開できるようにする
  • 1-b.スクリプトを用いてコンテンツをスクロールし、それを一時停止できるメカニズムを提供する
  • 1-c.5秒未満で点滅が終わるようにコンテンツを制作する
  • 1-d.ユーザーエージェントによって点滅するコンテンツを停止できるウェブコンテンツ技術を用いる
  • 1-e.数回のループ後（5秒以内）に停止するように、アニメーションGIFを設定する
  • 1-f.スクリプトを用いて、点滅を制御し、5秒以内に停止させる
  • 1-g.動きのあるコンテンツ、点滅するコンテンツ、又は自動更新されるコンテンツを停止させるコントロールを用いる
  • 1-h.点滅するコンテンツのないページを読み込むリンク、ボタン、又はその他のメカニズムを提供する
7.2.3.1 3回の閃光又は閾値以下に関する達成基準
1.どの1秒間においても、コンテンツに3回よりも多く閃光を放つコンポーネントがないことを確認する G19
2.閃光を放つエリアを十分に小さくする G176
3.ツールを用いて、コンテンツが一般閃光閾値及び赤色閃光閾値を越えていないことを確認する G15
7.2.4.1ブロックスキップに関する達成基準
1.コンテンツの各セクションの開始位置に見出し要素を提供する H69
2.構造を示す要素を用いて、リンクをグループ化する H50
3.frame要素を用いて繰り返しているブロックをグループ化し、frame要素にはtitle属性を付与する H70
H6
7.2.4.2ページタイトルに関する達成基準
1.ウェブページに対して、コンテンツの内容が分かるページタイトルを提供する H25
G88
7.2.4.3フォーカス順序に関する達成基準
1.コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する G59
  • 2.以下のいずれかを用いて、ウェブページを動的に変化させる：
  • 2-a.動的なコンテンツをDOMのそのトリガーとなる要素の直後に挿入する
  • 2-b.デバイス非依存な方法でカスタム・ダイアログを作成する
  • 2-c.DOMを用いて、ページ上にある複数のセクションを並び替える
7.2.4.4文脈におけるリンクの目的に関する達成基準
  • 1.以下のいずれかを用いて、リンクの目的を特定する
  • 1-1. リンクの目的を説明したリンクテキストを提供する
    • a. a 要素のリンクの目的を説明するリンクテキストを提供する
    • b. イメージマップのarea要素に代替テキストを提供する
  • 1-2. 利用者が簡潔なリンクテキスト又は長いリンクテキストを選べるようにする
    • a. ウェブページの先頭近くに、リンクのラベルを変更するコントロールを提供する
    • b. スクリプトを用いて、リンクのラベルを変更する
  • 1-3.リンクテキストとそれが含まれている文章中のテキストとを組み合わせて、リンクの目的を特定する
  • 1-4. リンクの目的の説明を補足する
    • a. title属性を用いて、リンクテキストの文言を補足する
    • b.CSSを用いて、リンクテキストの一部を非表示にする
  • 1-5. プログラムで判断されるリンクの文脈と一緒にリンクの目的を特定する
    • a.リンクテキストとそれが含まれているリスト項目とを組み合わせて、リンクの目的を特定する
    • b.リンクテキストとそれが含まれているパラグラフとを組み合わせて、リンクの目的を特定する
    • c.リンクテキストとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせて、リンクの目的を特定する
    • d.リンクテキストとその直前にある見出し要素とを組み合わせて、リンクの目的を特定する
    • e.入れ子になったリスト項目にあるリンクテキストとその親のリスト項目とを組み合わせて、リンクの目的を特定する
7.3.1.1ページの言語に関する達成基準
1.html要素の言語属性を用いる H57
7.3.2.1オンフォーカスに関する達成基準
1.状況の変化を生じるトリガーには、"focus" ではなく、"activate" を用いる G107
7.3.2.2ユーザインタフェース・コンポーネントによる状況の変化に関する達成基準
1.状況の変化を開始する実行ボタンを提供する G80
2.状況の変化を引き起こすフォームのコントロールが変化する前に、何が起こるのかを説明する G13
7.3.3.1入力エラー箇所の特定に関する達成基準
状況 A： フォームが利用者からの情報が必須である入力フィールドを含む場合
1.入力が完了していない必須項目を特定するために、テキストの説明文を提供する G83
状況 B： 利用者によって提供される情報が、特別なデータフォーマットか特定の値であることが求められる場合
  • 1.以下のいずれかを用いる
  • 1-a.利用者が認められた値以外の情報を提供した際に、テキストの説明文を提供する
  • 1-b. 利用者の入力が要求されたフォーマット又は値ではなかった際に、テキストの説明文を提供する
7.3.3.2ラベル又は説明文に関する達成基準
  • 1.以下のいずれかを用いて、目的や内容が分かるラベルを提供する
  • 1-a.データ形式および入力例を提供する
  • 1-b.フォーム又はテキストフィールド一式の先頭で、必須項目に関する説明文を提供する
  • 1-c.入力項目とラベルの関係がよく分かるように配置する
  • 1-d.未入力の必須項目を特定するための説明テキストを提供する
  • 2.いずれかを用いてフォーム・コントロールを関連付ける
  • 2-a.label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける
  • 2-b.label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する
3.fieldset要素及びlegend要素を用いて、フォーム・コントロールのグループに関する説明を提供する H71
4.隣接するボタンを用いて、テキスト・フィールドの目的をラベル付けする G167
7.4.1.1構文解析に関する達成基準
1.ウェブページをバリデートする G134
2.開始タグ及び終了タグを仕様に準じて用いていることを確認する H74
3.ウェブページが well-formed であることを確認する H75
4.要素には重複した属性がないようにする H94
5.ウェブページのid属性値が一意的（ユニーク）であるようにする H93
7.4.1.2プログラムが解釈可能な識別名、役割及び設定可能な値に関する達成基準
1.マークアップを用いて、名前及び役割をユーザーエージェントに提供し、利用者が設定可能なプロパティを直接設定可能にし、変化を通知する G134
2.HTMLのフォーム・コントロール及びリンクを用いる H74
  • 3.いずれかを用いてフォーム・コントロールを関連付ける
  • 3-a.label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける
  • 3-b.label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する
4.frame要素及びiframe要素のtitle属性を用いる H64
5.仕様に準じてHTMLを用いる H88
6.DOM（ドキュメント・オブジェクト・モデル）を用いて、ページにコンテンツを追加する SCR21
7.ウェブコンテンツ技術のアクセシビリティAPIを用いて、名前及び役割をUAに提供し、利用者が設定可能なプロパティを直接設定可能にし、変化を通知する G135
8.識別名及び役割を取得し、利用者が設定可能なプロパティを直接設定可能にし、変化を通知するためにユーザーエージェントが動作する、プラットフォームのアクセシビリティAPI機能をサポートするウェブコンテンツ技術を用いて、コンポーネントを作成する G10

※上記の内容について「難しい」「解読している時間が無い」という方は、「ウェブアクセシビリティ実例集【2012年度】」をご購入ください。WCAG2.0解説書に基づき、WCAG 2.0 実装方法集を図解しています。

←実装チェックリストトップページへ戻る

もし本サイトに関する内容に間違いがあり、気づかれた方がいらっしゃいましたら、お問い合わせよりご連絡ください。
ご意見・ご質問も受け付けております。よろしくお願いいたします。