達成基準一覧
ウェブアクセシビリティ導入ガイドブックで解説されている達成基準の一覧です。カテゴリごとに整理しています。
達成しないと利用者に重大な悪影響を及ぼすもの(非干渉)
これらの達成基準に適合できていない場合、他の部分へのアクセスを妨げている状態になります。最優先で対応が必要です。
音声の制御
WCAG 1.4.2(レベルA)
音声を自動再生することや強制的に再生させることは避ける。自動再生する音声は3秒以内に収める。その再生が3秒より長く続く場合は利用者が止められるようにする必要がある。
キーボードトラップなし
WCAG 2.1.2(レベルA)
キーボード操作だけで利用しているときに、一度フォーカスしたら抜け出せないコンテンツを作らないようにする。たとえばモーダルダイアログや動画プレイヤーのようなフォーカスを制限するコンテンツで起きやすい。
3回の閃光、又は閾値以下 / 3回の閃光
WCAG 2.3.1(レベルA)/ 2.3.2(レベルAAA)
光の点滅を繰り返すと、光感受性発作等を誘発しやすくなる。1秒に3回を超える点滅をするコンテンツを作ってはいけない。非干渉の達成基準2.3.1は適合判断が難しいため、達成基準2.3.2に適合させることを推奨。
一時停止、停止、非表示
WCAG 2.2.2(レベルA)
スライドショーや自動で切り替わるコンテンツなどがある場合は、一時停止、非表示、停止の機能を設置する必要がある。画面上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利用者がいるため。
必ず達成しなければならないもの
サービスの基本的なアクセシビリティを確保するために、必ず達成すべき基準です。
非テキストコンテンツ
WCAG 1.1.1(レベルA)
ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する。「代替テキスト」とは、写真やイラスト、グラフなど主に画像で提供される情報と「同等の役割を果たすテキスト」のこと。代替テキストの長さは80字を目安にする。
チェックポイント:
- 画像がリンクの場合、代替テキストはリンク先を示す内容にする
- グラフや図表など、ある意味を示す場合はその要約を記述する
- 文字イメージ(ロゴマークや見出しなど)を表現している場合、同じ文字を記述する
- 装飾や意味を持たない画像の代替テキストはalt=""にする
キーボード操作 / フォーカス順序 / フォーカスの可視化 / フォーカス時 / 入力時
WCAG 2.1.1 / 2.4.3 / 2.4.7 / 3.2.1 / 3.2.2(レベルA / AA)
キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする。キーボード操作時に、フォーカスインジケーターが表示されるようにする。フォーカス・入力がキャンセルされたり、勝手に動作することがないようにする。
タイミング調整可能 / 一時停止、停止、非表示
WCAG 2.2.1 / 2.2.2(レベルA)
閲覧や入力の操作に、制限時間を設けてはいけない。設ける必要がある場合は回避手段(事前通知、延長・解除、無制限にできる等)を設ける。
情報及び関係性 / 感覚的な特徴 / 色の使用
WCAG 1.3.1 / 1.3.3 / 1.4.1(レベルA)
赤字・太字・下線・拡大など単一の表現のみで情報を伝えてはいけない。色の違いだけで情報を伝えてはいけない。位置や形の違いだけで情報を伝えてはいけない。
情報及び関係性 / 意味のある順序 / フォーカス順序
WCAG 1.3.1 / 1.3.2 / 2.4.3(レベルA)
スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている。HTMLのソースに記載されている順、視覚的には左上から右下に向かって読み上げる。空白文字(スペース)を使った文字間隔調整は避ける。
情報及び関係性 / 見出し及びラベル / ブロックスキップ / セクション見出し
WCAG 1.3.1 / 2.4.6 / 2.4.1 / 2.4.10(レベルA / AA / AAA)
見出し要素だけで、セクションやブロックに含まれる要素を表現する。大見出し、中見出し、小見出し…となるように見出しレベルを適切に設定する。見出し要素を空にしないこと。強調や文字を大きくするために見出し要素を用いないこと。
コントラスト(最低限)
WCAG 1.4.3(レベルAA)
文字色と背景色の間に、4.5:1以上のコントラスト比がある必要がある。4.5:1以上のコントラスト比は、太字でないテキスト22ポイント(29px)未満、太字のテキストは18ポイント(24px)未満の場合の値。大きいテキストでは3:1以上のコントラスト比である必要がある。
テキストのサイズ変更
WCAG 1.4.4(レベルAA)
テキストの拡大縮小をしても情報が読み取れる。画面拡大ソフトなどを使わずに、ブラウザの文字拡大機能だけで文字サイズを200%まで変更できるようにする。文字サイズなどを固定にしないようにする。コンテンツを200%まで拡大したときに、文字が重なったり見切れないようにする。
ラベル又は説明 / 構文解析 / 名前・役割・値
WCAG 3.3.2 / 4.1.1 / 4.1.2(レベルA)
文字や文字コード、フォントに関する注意。UTF-8を使用する。ウェブフォントを使ってアイコンやUIを表現している場合は注意。PDFから文字をコピーすると別の文字に置き換えられてしまう場合がある。
ページタイトル
WCAG 2.4.2(レベルA)
ページの内容を示すタイトルを適切に表現する。「ページのタイトル|サイト名」とすると判別が容易。複数のページでページタイトルが重複しないようにする。ページタイトルとそのページの大見出し(H1)が揃っていると、利用者はより安心してページを利用できる。
リンクの目的
WCAG 2.4.4(レベルA)
リンクを適切に表現する。リンクがどこへのリンクなのか、単体で、または前後の文脈から簡単に理解できるようにする。リンク先が、PDFなのか外部ウィンドウを開くのか、事前に理解できるようにする。
一貫したナビゲーション
WCAG 3.2.3(レベルAA)
ナビゲーションに一貫性をもたせる。ナビゲーション要素が、毎回同じ順序、表記で実装されているようにする。
一貫した識別性
WCAG 3.2.4(レベルAA)
同じ機能には、同じラベルや説明をつける。同じ機能を複数のページで提供する場合は、同じラベル、説明で提供されているようにする。ボタン要素などのコンポーネント、アイコン、リンクなどに一貫性を持たせる。
状況に応じて確認すべきこと
特定のコンテンツや機能がある場合に対応が必要な基準です。
入力フォームのアクセシビリティ
WCAG 1.3.1 / 3.3.1 / 3.3.2 / 3.3.3 / 3.3.4(レベルA / AA)
入力フォームを様々な使い方でも使えるようにする。ラベルとフォームコントロールは関連付ける。入力形式、文字数、使用できる文字の制限などでエラーが起きる場合は事前に利用者に説明する。エラーの回避方法は具体的に示す。
法律に関わる操作や金融取引などに関する入力フォームでは、入力エラーのチェック、入力内容の確認、送信の取り消しをできるように設計する。
音声・映像コンテンツの代替
WCAG 1.2.1 / 1.2.2 / 1.2.3 / 1.2.4 / 1.2.5 / 1.4.2 / 2.1.2(レベルA / AA)
音声・映像コンテンツに代替コンテンツを付与する。会話の内容や重要な効果音などが伝わるようなキャプション(字幕)を提供する。登場人物の動作や表情、場面の移り変わりなど視覚的な情報を音声で伝える「音声解説」を提供する。
動きや点滅などがあるコンテンツの操作
WCAG 1.2.1 / 2.2.2(レベルA)
アニメーション、スライドショーなどのコンテンツでは、一時停止、停止、非表示にすることができるようにする。
コンテンツの変化がスクリーンリーダーにも分かるようにする
WCAG 3.2.2 / 3.2.5(レベルA / AA)
検索結果の読み込み、ページネーションなどの画面の一部の変更がスクリーンリーダーで読み上げられるようにする。モーダルダイアログを開く場合、当該モーダルダイアログの内容にフォーカスする。モーダルダイアログを閉じる場合、元のコンテンツの位置にフォーカスを戻す。
導入に慎重な検討が必要
以下は非推奨とされている対応方法です。
アクセシビリティ・オーバーレイなどのプラグインは支援技術の機能と重複させない
アクセシビリティ・オーバーレイは、ウェブサイトやウェブシステムにスクリプトを追加することで、アクセシビリティを向上しようとする仕組み。OSの支援技術、アプリの支援技術、ブラウザの機能拡張で実現可能な機能が多いため、必要な機能に限定して使う。
文字サイズの変更、読み上げプラグインの利用は非推奨
支援技術が必要な利用者は、既にOSの支援技術、アプリの支援技術、ブラウザの機能拡張を使っていることが多いため、サイトで支援技術を提供すると過剰対応になってしまう。どのサイトも同様の支援技術を用いて閲覧できることを目指すべき。