WebアクセシビリティJIS X 8341-3

らら
らら

WebアクセシビリティJIS X 8341-3

はじめに

障害を理由とする差別の解消の推進に関する法律の件は気が付いていたけど・・放置してたら・・年月がすぎ・・・・・

個人情報とかもあり・・・・・とりあえず・・・・書いておくか・・・・も・・・・放置のまま・・・・Splideの記事を書いてて・・思い出して・・・

なに書くんだっけと・・・思い出しながら・・・・汗

年表

1999年5月平成11年「WCAG 1.00」W3C勧告になった。
2004年6月平成16年「JIS X 8341-3:2004」が初めて制定された。国内外の既存ガイドラインなどを参考に，日本語特有と思われる事項も網羅した独自の指針であった。
2008年12月平成20年「WCAG（Web Content Accessibility Guidelines）2.0」がW3C勧告になった。
2010年8月平成22年「WCAG 2.0」を包含する形でJIS X 8341-3が改正され「JIS X 8341-3:2010」となった。
2012年10月平成24年「WCAG 2.0」がそのまま「ISO/IEC 40500:2012」になった。
2014年3月平成26年「WAI-ARIA 1.0」がW3C の勧告
2014年10月28日平成26年W3CがHTML 5.0 の勧告
2016年3月平成28年「WCAG 2.0」がISO/IECの国際規格になったことを受けて、その一致規格となるように改正され「JIS X 8341-3:2016」となった。
2016年平成28年「障害を理由とする差別の解消の推進に関する法律」(障害者差別解消法)施行
2016年11月1日平成28年W3CがHTML 5.1 の勧告
2017年12月14日平成29年W3CがHTML 5.2 の勧告
2021年1月28日令和3年W3CがHTML 5廃止
2021年5月令和3年WHATWGがHTML Living Standard
2021年6月令和3年「障害を理由とする差別の解消の推進に関する法律」(障害者差別解消法)改正　民間事業者の義務を公共機関と同等に格上げする改正
2021年5月令和3年「WAI-ARIA 1.1」
2024年4月1日令和6年「障害を理由とする差別の解消の推進に関する法律」改正法施行

(障害者差別解消法)改正では公布日（令和3年6月4日）から起算して3年を超えない範囲内において政令で定める日から施行されることになっています。

内閣府

障害を理由とする差別の解消の推進

https://www8.cao.go.jp/shougai/suishin/sabekai.html

要は、W3Cのガイドランから2016年から日本の規格(JIS X 8341-3:2016)にになって、世界規格(ISO/IEC 40500:2012)とも同じですよってこと。

WCAG 2.0＝JIS X 8341-3:2016＝SO/IEC 40500:2012

「障害を理由とする差別の解消の推進に関する法律」はこのJIS X 8341-3:2016をベースにHTML、CSS、WAI-ARIA(HTML属性)を使って対応しましょうって感じです。

JIS X 8341-3とは

『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ』という。

この規格でいう「ウェブコンテンツ」は、ブラウザや支援技術などのユーザエージェントを介して利用者に提供されるあらゆるコンテンツを指します。

JIS番号の8341は「やさしい」って・・・・・・

Web Content Accessibility Guidelines（ウェブコンテンツ・アクセシビリティ・ガイドライン、WCAG）

ウェブのコンテンツを障害のある人に使いやすいようにするためのウェブアクセシビリティに関するガイドラインである。

インターネットのための主要な国際標準化機構であるWorld Wide Web Consortium（W3C）のWeb Accessibility Initiative（WAI）によって公開されている。

WHATWG (Web Hypertext Application Technology Working Group)

Web技術の標準策定はWeb黎明期の1994年に設立されたW3C（World Wide Web Consortium：WWWコンソーシアム）という標準化団体が担ってきたが、

その運営方針などに不満を持つWeb開発者らによって2004年にWHATWGが旗揚げされた。

W3CはHTML4の後継としてXML化されたHTMLであるXHTMLを推進していたが、WHATWGはHTML5を独自に策定し、加盟各社のブラウザに実装した。

しばらくはXHTMLとHTML5が併存していたが、次第にWeb開発者らもHTML5支持が大勢となり、W3CはXHTMLを凍結、WHATWGとのHTML5共同策定に合意した。

2019年にはW3Cが実質的にHTML標準策定から撤退し、WHATWGが随時更新する「HTML Living Standard」が唯一のHTML標準となった。

Web Accessibility Initiative - Accessible Rich Internet Applications（ WAI-ARIA、ウェイアリア）

World Wide Web Consortium （W3C）によって公開された技術仕様で、Webページ（特に動的ウェブページ）内のユーザーインターフェイスのアクセシビリティを向上させられる、

HTMLのための属性が定義されている。

WAI-ARIA: Authoring Practices Guide

https://github.com/w3c/aria-practices

WAI-ARIAのサンプルHTMLが確認できます。

https://github.com/w3c/aria-practices/blob/main/content-templates/Example-Template.html

障害を理由とする差別の解消の推進に関する法律

全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的する。

ホームページでは、Webアクセシビリティ 日本の規格(JIS X 8341-3:2016)を使って、障害の有無なく利用できるようにしましょうねってところ。

引用・リンク先

Understanding WCAG 2.0 [日本語訳] - （https://waic.jp/translations/UNDERSTANDING-WCAG20/）　

Techniques for WCAG 2.0 [日本語訳] - (https://waic.jp/translations/WCAG-TECHS/)

ウェブアクセシビリティ基盤委員会 JIS X 8341-3:2016 解説

https://waic.jp/docs/jis2016/understanding/201604/

みんなの公共サイト運用ガイドライン（2016年版）（総務省）

http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html

WCAG2.0(JIS X 8341-3:2016,ISO/IEC 40500:2012)十分な達成方法抜粋

Flash・Silverlightは削除しています。

自分用に十分な達成方法のみにしています。どれがGXXとかHXXとかね。。

1知覚可能
1.1テキストによる代替
1.1.1非テキストコンテンツA
1.2時間依存メディア
1.2.1音声のみ及び映像のみ（収録済）A
1.2.2キャプション（収録済）A
1.2.3音声解説、又はメディアに対する代替（収録済）A
1.2.4キャプション（ライブ）AA
1.2.5音声解説（収録済）AA
1.2.6手話（収録済）AAA
1.2.7拡張音声解説（収録済）AAA
1.2.8メディアに対する代替（収録済）AAA
1.2.9音声のみ（ライブ）AAA
1.3適応可能
1.3.1情報及び関係性A
1.3.2意味のある順序A
1.3.3感覚的な特徴A
1.4判別可能
1.4.1色の使用A
1.4.2音声の制御 非干渉A
1.4.3コントラスト（最低限）AA
1.4.4テキストのサイズ変更AA
1.4.5文字画像AA
1.4.6コントラスト（高度）AAA
1.4.7小さな背景音、又は背景音なしAAA
1.4.8視覚的提示AAA
1.4.9文字画像（例外なし）AAA
2操作可能
2.1キーボード操作可能
2.1.1キーボードA
2.1.2キーボードトラップなしA
2.1.3キーボード（例外なし）AAA
2.2十分な時間
2.2.1タイミング調整可能A
2.2.2一時停止、停止、非表示 非干渉A
2.2.3タイミング非依存AAA
2.2.4割り込みAAA
2.2.5再認証AAA
2.3発作の防止
2.3.13回の閃光、又は閾値以下 非干渉A
2.3.23回の閃光AAA
2.4ナビゲーション可能
2.4.1ブロックスキップA
2.4.2ページタイトルA
2.4.3フォーカス順序A
2.4.4リンクの目的（コンテキスト内）A
2.4.5複数の手段AA
2.4.6見出し及びラベルAA
2.4.7フォーカスの可視化AA
2.4.8現在位置AAA
2.4.9リンクの目的（リンクのみ）AAA
2.4.10セクション見出しAAA
3理解可能
3.1読みやすさ
3.1.1ページの言語A
3.1.2一部分の言語AA
3.1.3一般的ではない用語AAA
3.1.4略語AAA
3.1.5読解レベルAAA
3.1.6発音AAA
3.2予測可能
3.2.1フォーカス時A
3.2.2入力時A
3.2.3一貫したナビゲーションAA
3.2.4一貫した識別性AA
3.2.5要求による変化AAA
3.3入力支援
3.3.1エラーの特定A
3.3.2ラベル又は説明A
3.3.3エラー修正の提案AA
3.3.4エラー回避（法的、金融、データ）AA
3.3.5ヘルプAAA
3.3.6エラー回避（すべて）AAA
4堅牢
4.1互換性
4.1.1構文解析A
4.1.2名前（name）・役割（role）及び値（value）A

1 知覚可能

1.1 テキストによる代替

すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。

1.1.1 非テキストコンテンツ

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く: (レベル A)

・コントロール、入力: 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。 (コントロール及び利用者の入力を受け入れるコンテンツに関するその他の要件は、ガイドライン 4.1を参照。)

・時間依存メディア: 非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。 (メディアに関するその他の要件は、ガイドライン 1.2を参照。)

・テスト: 非テキストコンテンツが、テキストで提示されると無効になるテスト又は演習のとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。

・感覚的: 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。

・CAPTCHA: 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、テキストによる代替は、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、様々な障害に対応している。

・装飾、整形、非表示: 非テキストコンテンツが、純粋な装飾である、見た目の整形のためだけに用いられている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。

達成基準 1.1.1 の達成方法及び失敗例 - 非テキストコンテンツ

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解する の「その他の達成方法」を参照のこと。

十分な達成方法

使用法:そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: 短い説明が非テキストコンテンツと同じ目的を果たし、かつ同じ情報を提示できる場合:

次に挙げる 状況 A における短いテキストによる代替の達成方法 のいずれかを用いて、G94: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す、簡潔なテキストによる代替を提供する :

状況 A における短いテキストによる代替の達成方法:

ARIA6: オブジェクトのラベルを提供するために aria-label を使用する(ARIA)

ARIA10: 非テキストコンテンツに対してテキストによる代替を提供するために aria-labelledby を使用する(ARIA)

G196: 画像のグループにある一つの画像に、そのグループのすべての画像を説明するテキストによる代替を提供する

H2: 同じリソースに対して隣接する画像とテキストリンクを結合する(HTML)

H35: applet 要素にテキストによる代替を提供する(HTML)

H37: img 要素の alt 属性を使用する(HTML)

H53: object 要素のボディを使用する(HTML)

H86: ASCII アート、顔文字、及びリート語にテキストによる代替を提供する(HTML)

PDF1: PDF 文書の Alt エントリによって画像にテキストによる代替を適用する(PDF)

状況 B: 短い説明が非テキストコンテンツと同じ目的を果たせず、かつ同じ情報を提示できない 場合 (例: チャート又は図表):

次に挙げる 状況 B における短いテキストによる代替の達成方法 のいずれか及び 、 状況 B における長いテキストによる代替の達成方法 のいずれかを用いて、G95: 非テキストコンテンツの簡単な説明を提供する、簡潔なテキストによる代替を提供する :

状況 B における短いテキストによる代替の達成方法:

ARIA6: オブジェクトのラベルを提供するために aria-label を使用する(ARIA)

ARIA10: 非テキストコンテンツに対してテキストによる代替を提供するために aria-labelledby を使用する(ARIA)

G196: 画像のグループにある一つの画像に、そのグループのすべての画像を説明するテキストによる代替を提供する

H2: 同じリソースに対して隣接する画像とテキストリンクを結合する(HTML)

H35: applet 要素にテキストによる代替を提供する(HTML)

H37: img 要素の alt 属性を使用する(HTML)

H53: object 要素のボディを使用する(HTML)

H86: ASCII アート、顔文字、及びリート語にテキストによる代替を提供する(HTML)

PDF1: PDF 文書の Alt エントリによって画像にテキストによる代替を適用する(PDF)

状況 B における長いテキストによる代替の達成方法:

ARIA15: 画像の説明を提供するために aria-describedby を使用する(ARIA)

G73: 非テキストコンテンツのすぐ隣に別の場所へのリンクを置き、その別の場所で長い説明を提供する

G74: 短い説明の中で長い説明のある場所を示して、非テキストコンテンツの近くにあるテキストで長い説明を提供する

G92: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す長い説明を提供する

H45: longdesc 属性を用いる(HTML)

H53: object 要素のボディを使用する(HTML)

状況 C: 非テキストコンテンツがコントロールである、又は利用者の入力を受け入れる場合:

次に挙げる 状況 C におけるコントロールと入力のための短いテキストによる代替の達成方法 のいずれかを用いて、G82: 非テキストコンテンツの目的を特定するテキストによる代替を提供する :

状況 C におけるコントロールと入力のための短いテキストによる代替の達成方法:

ARIA6: オブジェクトのラベルを提供するために aria-label を使用する(ARIA)

ARIA9: 複数のテキストノードをつなげて一つのラベルにするために、aria-labelledby を使用する(ARIA)

H24: イメージマップの area 要素にテキストによる代替を提供する(HTML)

H30: a 要素のリンクの目的を説明するリンクテキストを提供する(HTML)

H36: 送信ボタンとして用いる画像の alt 属性を使用する(HTML)

H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する(HTML)

H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する(HTML)

状況 D: 非テキストコンテンツが時間依存のメディアである (ライブの映像しか含まないコンテンツ及びライブの音声しか含まないコンテンツを含む)、テキストで提示されると無効になる試験又は演習である、又は、特定の感覚的体験を創り出すことを主に意図しているコンテンツである場合:

次に挙げる状況 D における短いテキストによる代替の達成方法のいずれかを用いて、ラベルを記述する:

次に挙げる状況 D における短いテキストによる代替の達成方法のいずれかを用いて、 G68: ライブの音声のみのコンテンツ及びライブの映像のみのコンテンツの目的を説明するために、簡潔なテキストによる代替を提供する :

次に挙げる 状況 D における短いテキストによる代替の達成方法 のいずれかを用いて、 G100: 非テキストコンテンツの一般に認められた名前 (name) 又は説明的な名前となる簡潔なテキストによる代替を提供する :

状況 D における短いテキストによる代替の達成方法:

ARIA6: オブジェクトのラベルを提供するために aria-label を使用する(ARIA)

ARIA10: 非テキストコンテンツに対してテキストによる代替を提供するために aria-labelledby を使用する(ARIA)

G196: 画像のグループにある一つの画像に、そのグループのすべての画像を説明するテキストによる代替を提供する

H2: 同じリソースに対して隣接する画像とテキストリンクを結合する(HTML)

H35: applet 要素にテキストによる代替を提供する(HTML)

H37: img 要素の alt 属性を使用する(HTML)

H53: object 要素のボディを使用する(HTML)

H86: ASCII アート、顔文字、及びリート語にテキストによる代替を提供する(HTML)

PDF1: PDF 文書の Alt エントリによって画像にテキストによる代替を適用する (PDF)

状況 F: 非テキストコンテンツを支援技術が無視することが望ましい場合:

次に挙げる状況 F における必須ではないテキストによる代替を示す達成方法 のいずれかを用いて、支援技術によって無視することができるように、非テキストコンテンツを実装またはマーク付けする:

状況 F における必須ではないテキストによる代替を示す達成方法:

C9: 装飾目的の画像を付加するために、CSS を使用する(CSS)

H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない(HTML)

PDF4: PDF 文書の Artifact タグによって装飾的な画像を隠す(PDF)

1.1.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

非テキストコンテンツに関する一般的な達成方法 (参考)

参考情報の非テキストコンテンツを識別する (リンク追加予定)

簡潔な説明を短く保つ (リンク追加予定)

テキストを含む画像を説明する (リンク追加予定)

上記の長い説明のためのウェブコンテンツ技術特有の達成方法 (アクセシビリティ サポーテッドなコンテンツ技術) を用いて、説明のラベルが求められるところだけで、非テキストコンテンツのより長い説明を提供する (リンク追加予定)

非テキストコンテンツが等価でアクセシブルな代替が無い場合、大きさの異なる非テキストコンテンツを提供する (リンク追加予定)

文字画像の大きさを変えるサーバーサイドのスクリプトを使う (リンク追加予定)

ライブの非テキストコンテンツに関する一般的な達成方法 (参考)

同等の情報を提供するテキスト情報 (例えば、交通のウェブカメラに対して、自治体が提供するテキストの交通情報へのリンク) にリンクする (リンク追加予定)

CAPTCHA の障壁を最小化する一般的な達成方法

CAPTCHA を二つより多い感覚モダリティで提供する (リンク追加予定)

CAPTCHA を回避できる、カスタマーサービスの担当者へのアクセスを提供する (リンク追加予定)

認証された利用者には CAPTCHA を要求しない (リンク追加予定)

HTML の達成方法（参考）

H46: embed 要素と一緒に noembed 要素を用いる(HTML)

フレームをサポートしないブラウザのために作成する (リンク追加予定)

iframe 要素の代替コンテンツを提供する (リンク追加予定)

iframe 要素の長い説明を使わない (リンク追加予定)

クライアントサイドイメージマップのために冗長なテキストリンクを提供する (リンク追加予定)

CSS の達成方法 (参考)

C18: レイアウトデザインのためのスペーサー画像ではなく、CSS のマージンとパディング規則を使用する(CSS)

装飾に対して img 要素の代わりに、CSS の background プロパティ、:before 又は :after 規則を使う (リンク追加予定)

空の table 要素のセルを表示する (リンク追加予定)

WAI-ARIA の達成方法 (参考)

純粋に表現のためだけの要素を示すために ARIA presentation ロールを使う (リンク追加予定)

メタデータの達成方法 (参考)

テキストによる書き起こしと映像を関連付けるためにメタデータを使う (リンク追加予定)

テキストによる書き起こしと音声しか含まないコンテンツを関連付けるためにメタデータを使う (リンク追加予定)

事例: メタデータの中で、音声解説と映像のテキストによる書き起こしを示す URI を提供する

事例: メタデータの中で、音声ファイルの複数のテキストによる書き起こし (英語、フランス語、ドイツ語) を示す URI を提供する

達成基準 1.1.1 のよくある失敗例

以下に挙げるものは、WCAGワーキンググループが達成基準 1.1.1 の失敗例とみなした、よくある間違いである。

F3: 達成基準 1.1.1 の失敗例 － 重要な情報を伝える画像を付加するために、CSS を使用している

F13: 達成基準 1.4.1 の失敗例 － 画像の色の違いで伝られる情報が含まれないテキストによる代替を持っている

F20: 達成基準 1.1.1 及び 達成基準 4.1.2 の失敗例 － 非テキストコンテンツへの変更が発生するときにテキストによる代替を更新していない

F30: 達成基準 1.1.1 及び 達成基準 1.2.1 の失敗例 － 代替ではないテキストによる代替を使用している (ファイル名、プレースホルダーテキストなど)

F38: 達成基準 1.1.1 の失敗例 － 支援技術が装飾的な画像を無視できる方法で、HTML でその画像をマークアップしていない

F39: 達成基準 1.1.1 の失敗例 － 支援技術によって無視されることが望ましい画像に対して、空ではないテキストによる代替を提供している (例: alt="spacer" 又は alt="image")

F65: 達成基準 1.1.1 の失敗例 － img 要素、area 要素、及び type "image" の input 要素の alt 属性又はテキストによる代替を省略している

F67: 達成基準 1.1.1 及び 達成基準 1.2.1 の失敗例 － 非テキストコンテンツに対して、同じ目的を果たしていない、又は同じ情報を提示していない長い説明を提供している

F71: 達成基準 1.1.1 の失敗例 － テキストを表すために、テキストによる代替を提供せずに、テキストのようなものを使用している

F72: 達成基準 1.1.1 の失敗例 － テキストによる代替を提供せずに、ASCII アートを用いている

1.2 時間依存メディア

時間依存メディアには代替コンテンツを提供すること。

1.2.1 音声のみ及び映像のみ（収録済）

収録済の音声しか含まないメディア及び収録済の映像しか含まないメディアは、次の事項を満たしている。ただし、その音声又は映像がメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く: (レベル A)

・収録済の音声しか含まない場合:時間依存メディアに対する代替コンテンツによって、収録済の音声しか含まないコンテンツと同等の情報を提供している。

・収録済の映像しか含まない場合: 時間依存メディアに対する代替コンテンツ又は音声トラックによって、収録済の映像しか含まないコンテンツと同等の情報を提供している。

達成基準 1.2.1 の達成方法及び失敗例 - 音声のみ及び映像のみ (収録済)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解する の「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: 収録済の音声しか含まないコンテンツの場合:

G158: 音声のみの時間依存メディアに対する代替コンテンツを提供する

1.2.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H96: 音声解説を提供するために、track 要素を使用する(HTML)

事後に、ライブの音声しか含まない提示の書き起こしを提供する (リンク追加予定)

同等の情報を提供するテキスト情報 (例えば、交通のウェブカメラに対して、自治体が提供するテキストの交通情報へのリンク) にリンクする (リンク追加予定)

1.2.2 キャプション（収録済）

同期したメディアに含まれているすべての収録済の音声コンテンツに対して、キャプションが提供されている。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く。 (レベル A)

1.2.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

映像のみのクリップに対して、「このクリップには音は使われていません」という注記を提供する (リンク追加予定)

音声トラックのすべての言語のキャプションを提供するために SMIL 1.0 を使う (リンク追加予定)

音声トラックのすべての言語のキャプションを提供するために SMIL 2.0 を使う (リンク追加予定)

1.2.3 音声解説、又はメディアに対する代替（収録済） 

同期したメディアに含まれている収録済の映像コンテンツに対して、時間依存メディアに対する代替コンテンツ又は音声解説が提供されている。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く。 (レベル A)

達成基準 1.2.3 の達成方法及び失敗例 - 音声解説、又はメディアに対する代替 (収録済)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

次の達成方法のどれか一つを用いて、G69: 時間依存メディアに対する代替コンテンツを提供する

G58: 非テキストコンテンツのすぐ隣に、時間依存メディアの代替へのリンクを配置する

次の達成方法のどれか一つを用いて、時間依存メディアの代替へのリンクを提供する

H53: object 要素のボディを使用する (HTML)

G78: 音声解説を含んだ、利用者が選択可能な副音声トラックを提供する

G78: 音声解説を含んだ、利用者が選択可能な副音声トラックを提供する、かつ、SL1: Accessing Alternate Audio Tracks in Silverlight Media (Silverlight)

次のどれか一つを用いて、G173: 映像の音声解説付きバージョンを提供する

SM6: SMIL 1.0 で音声解説を提供する (SMIL)

SM7: SMIL 2.0 で音声解説を提供する (SMIL)

音声及び映像をサポートしているプレーヤーを用いる

次のどれか一つを用いて、G8: 拡張音声解説が付いたムービーを提供する

SM1: SMIL 1.0 で拡張音声解説を追加する (SMIL)

SM2: SMIL 2.0 で拡張音声解説を追加する (SMIL)

音声及び映像をサポートしているプレーヤーを用いる

G203: 話者が話すのみの映像を説明するために、静的なテキストによる代替を使用する

1.2.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H96: 音声解説を提供するために、track 要素を使用する (HTML)

SMIL 1.0 によって多様な言語の音声解説を提供する (リンク追加予定)

SMIL 2.0 によって多様な言語の音声解説を提供する (リンク追加予定)

達成基準 1.2.3 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.2.3 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.2.4 キャプション（ライブ） 

同期したメディアに含まれているすべてのライブの音声コンテンツに対してキャプションが提供されている。 (レベル AA)

達成基準 1.2.4 の達成方法及び失敗例 - キャプション (ライブ)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G9: ライブの同期したメディアに対してキャプションを作成する、かつ、G93: オープン (常に見える) キャプションを提供する

クローズドキャプションをサポートするビデオプレーヤーのある、すぐに利用可能なメディア形式を用いて、G9: ライブの同期したメディアに対してキャプションを作成する、かつ、G87: クローズドキャプションを提供する

次のどれか一つを用いて、G9: ライブの同期したメディアに対してキャプションを作成する、かつ、G87: クローズドキャプションを提供する:

SM11: SMIL 1.0 で同期したテキストストリームによるキャプションを提供する (SMIL)

SM12: SMIL 2.0 で同期したテキストストリームによるキャプションを提供する (SMIL)

注記: キャプションは、リアルタイムのテキスト変換サービスを用いて生成できるかもしれない。

1.2.4 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

(今のところ、文書化されていない)

達成基準 1.2.4 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.2.4 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.2.5 音声解説（収録済）

同期したメディアに含まれているすべての収録済の映像コンテンツに対して、音声解説が提供されている。 (レベル AA)

達成基準 1.2.5 の達成方法及び失敗例 - 音声解説 (収録済)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G78: 音声解説を含んだ、利用者が選択可能な副音声トラックを提供する

G78: 音声解説を含んだ、利用者が選択可能な副音声トラックを提供する、かつ、SL1: Accessing Alternate Audio Tracks in Silverlight Media (Silverlight)

次のどれか一つを用いて、G173: 映像の音声解説付きバージョンを提供する:

SM6: SMIL 1.0 で音声解説を提供する (SMIL)

SM7: SMIL 2.0 で音声解説を提供する (SMIL)

音声及び映像をサポートしているプレーヤーを用いる

次のどれか一つを用いて、G8: 拡張音声解説が付いたムービーを提供する:

SM1: SMIL 1.0 で拡張音声解説を追加する (SMIL)

SM2: SMIL 2.0 で拡張音声解説を追加する (SMIL)

音声及び映像をサポートしているプレーヤーを用いる

G203: 話者が話すのみの映像を説明するために、静的なテキストによる代替を使用する

1.2.5 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H96: 音声解説を提供するために、track 要素を使用する (HTML)

SMIL 1.0 によって多様な言語の音声解説を提供する (リンク追加予定)

SMIL 2.0 によって多様な言語の音声解説を提供する (リンク追加予定)

ライブの同期したメディアに対して音声解説を提供する (リンク追加予定)

達成基準 1.2.5 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.2.5 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.2.6 手話（収録済）

同期したメディアに含まれているすべての収録済の音声コンテンツに対して、手話通訳が提供されている。 (レベル AAA)

達成基準 1.2.6 の達成方法及び失敗例 - 手話 (収録済)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

1.2.6 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

メタデータの達成方法

メタデータを使って映像の代替である手話を対応付け、手話の選択ができるようにする (リンク追加予定)

事例: ウェブページの様々な英国式の手話通訳 (ASL, SASL, BSL, Auslan, ISL, NZSL) を指し示す URI を、メタデータの中で、提供する

達成基準 1.2.6 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.2.6 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.2.7 拡張音声解説（収録済） 

前景音の合間が、音声解説で映像の意味を伝達するのに不十分な場合、同期したメディアに含まれているすべての収録済の映像コンテンツに対して、拡張音声解説が提供されている。 (レベル AAA)

達成基準 1.2.7 の達成方法及び失敗例 - 拡張音声解説 (収録済)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

次のどれか一つを用いて、G8: 拡張音声解説が付いたムービーを提供する

SM1: SMIL 1.0 で拡張音声解説を追加する (SMIL)

SM2: SMIL 2.0 で拡張音声解説を追加する (SMIL)

音声及び映像をサポートしているプレーヤーを用いる

1.2.7 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H96: 音声解説を提供するために、track 要素を使用する (HTML)

SMIL1.0で多様な言語における拡張した音声解説を追加する（リンク追加予定）

SMIL2.0で多様な言語における拡張した音声解説を追加する（リンク追加予定）

達成基準 1.2.7 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.2.7 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.2.8 メディアに対する代替（収録済） 

すべての収録済の同期したメディア及びすべての収録済の映像しか含まないメディアに対して、時間依存メディアに対する代替コンテンツが提供されている。 (レベル AAA)

達成基準 1.2.8 の達成方法及び失敗例 - メディアに対する代替 (収録済)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: 収録済の同期したメディアの場合:

次の達成方法のどれか一つを用いて、G69: 時間依存メディアに対する代替コンテンツを提供する

G58: 非テキストコンテンツのすぐ隣に、時間依存メディアの代替へのリンクを配置する

次の達成方法のどれか一つを用いて、時間の経過に伴って変化するメディアの代替へリンクする

H53: object 要素のボディを使用する (HTML)

状況 B: 収録済の映像しか含まないコンテンツの場合:

G159: 映像のみの時間依存メディアに対する代替コンテンツを提供する

1.2.8 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H46: embed 要素と一緒に noembed 要素を用いる (HTML)

訂正済みのスクリプトを使う (リンク追加予定)

音声解説の詳細を追加する (リンク追加予定)

達成基準 1.2.8 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.2.8 の失敗例とみなした、よくある間違いである。

F74: 達成基準 1.2.2 及び 達成基準 1.2.8 の失敗例 － テキストに対する同期したメディアによる代替を、代替としてラベル付けしていない

1.2.9 音声のみ（ライブ） 

ライブの音声しか含まないコンテンツに対して、それと同等の情報を提示する、時間依存メディアの代替コンテンツが提供されている。 (レベル AAA)

達成基準 1.2.9 の達成方法及び失敗例 - 音声のみ (ライブ)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

1.2.9 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

テキストトランスクリプションと音声しか含まないコンテンツを関連付けるためにメタデータを使う (リンク追加予定)

事例: 音声ファイルの様々な書き起こしテキスト (英語、フランス語、ドイツ語) を指し示す URI を、メタデータの中で、提供する。

達成基準 1.2.9 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.2.9 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.3 適応可能

情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。

1.3.1 情報及び関係性

何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。 (レベル A)

達成基準 1.3.1 の達成方法及び失敗例 - 情報及び関係性

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムによる解釈が可能になるセマンテックな構造を提供している場合:

ARIA11: ページのリージョンを特定するために ARIA ランドマークを使用する (ARIA)

ARIA12: 見出しを特定するために role=heading を使用する (ARIA)

ARIA13: リージョンとランドマークに名前 (name) を付けるために、aria-labelledby を使用する (ARIA)

ARIA16: ユーザインターフェース コントロールの名前 (name) を提供するために、aria-labelledby を使用する (ARIA)

ARIA17: 関連するフォームコントロールを特定するために、グルーピングロールを使用する (ARIA)

ARIA20: ページのリージョンを特定するために region ロールを使用する (ARIA)

G115: 構造をマークアップするために、セマンティックな要素を使用する、かつ、H49: 強調又は特別なテキストをマークアップするために、セマンティックなマークアップを使用する (HTML)

G117: テキストの提示のバリエーションによって伝えている情報を伝達するために、テキストを使用する

G140: 異なる提示を可能にするために、情報と構造を表現から分離する

次の達成方法を用いて、表現によって伝えられている情報及び関係性をプログラムによる解釈が可能になる:

G138: 色の手がかりを用いるときは必ず、セマンティックなマークアップを使用する

H51: 表形式の情報を提示するために、テーブルのマークアップを使用する (HTML)

PDF6: PDF 文書でテーブルのマークアップにテーブル要素を使用する (PDF)

PDF20: 間違ってタグ付けされているテーブルを修復するために、Adobe Acrobat Pro のテーブルエディタを使用する (PDF)

H39: データテーブルのキャプションとデータテーブルを関連付けるために、caption 要素を使用する (HTML)

H73: データテーブルの概要を提供するために、table 要素の summary 属性を使用する (HTML)

H63: データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する (HTML)

H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用する (HTML)

H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する (HTML)

H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する (HTML)

PDF10: PDF 文書内のインタラクティブなフォームコントロールにラベルを付ける (PDF)

PDF12: PDF 文書内のフォームフィールドの名前 (name)、役割 (role)、値 (value) 情報を提供する (PDF)

H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する (HTML)

H85: select 要素内の option 要素をグループ化するために、optgroup 要素を使用する (HTML)

H48: リスト又はリンクのグループに、ol 要素、ul 要素、dl 要素を用いる (HTML)

H42: 見出しを特定するために、h1 要素～ h6 要素を使用する (HTML)

PDF9: PDF 文書内のコンテンツを見出しタグでマークアップすることによって見出しを作成する (PDF)

SCR21: ページにコンテンツを追加するために、Document Object Model (DOM) の機能を使用する (Scripting)

PDF11: PDF 文書内で Link アノテーションと /Link 構造要素を使用してリンクとリンクテキストを提供する (PDF)

PDF17: PDF 文書に一貫性のあるページ番号を指定する (PDF)

PDF21: PDF 文書内のリストにリストタグを使用する (PDF)

H97: nav 要素を使用して、関連したリンクをグループ化する (HTML)

状況 B: ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムによる解釈が可能になるセマンテックな構造を提供していない場合:

G117: テキストの提示のバリエーションによって伝えている情報を伝達するために、テキストを使用する

表現によって伝えられている情報及び関係性をプログラムによる解釈が可能になる、又は次の達成方法を用いてテキストで入手可能にする:

T1: 段落に、標準的なテキストの書式の表現法を使用する (Text)

T2: リストに、標準的なテキストの書式の表現法を使用する (Text)

T3: 見出しに、標準的なテキストの書式の表現法を使用する (Text)

1.3.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

C22: テキストの視覚的提示を制御するために、CSS を使用する (CSS)

ページレイアウトにはテーブルよりも CSS を用いる (リンク追加予定)

G162: 関係性を最大限に予測できるようにするためにラベルを配置する

ARIA1: ユーザインターフェース コントロールに対する説明ラベルを提供するために、aria-describedby プロパティを使用する (ARIA)

ARIA2: aria-required プロパティによって必須項目を特定する (ARIA)

絶対的なラベルを持たないすべてのフォームコントロールにラベルを提供する (リンク追加予定)

G141: 見出しを用いてウェブページを構造化する

達成基準 1.3.1 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.3.1 の失敗例とみなした、よくある間違いである。

F2: 達成基準 1.3.1 の失敗例 － 情報を伝えるために、適切なマークアップ又はテキストを用いずに、テキストの提示の変化を使用している

F33: 達成基準 1.3.1 及び 達成基準 1.3.2 の失敗例 － プレーンテキストのコンテンツで複数の段組みを作成するために、空白文字を使用している

F34: 達成基準 1.3.1 及び 達成基準 1.3.2 の失敗例 － プレーンテキストのコンテンツでテーブルの書式を整えるために、空白文字を使用している

F42: 達成基準 1.3.1、達成基準 2.1.1、達成基準 2.1.3、又は達成基準 4.1.2 の失敗例 － リンクをエミュレートしている

F43: 達成基準 1.3.1 の失敗例 － コンテンツにおける関係を表さない方法で、構造的なマークアップを使用している

F46: 達成基準 1.3.1 の失敗例 － レイアウトテーブルで、th 要素、caption 要素、又は空ではない summary 属性を使用している

F48: 達成基準 1.3.1 の失敗例 － 表形式の情報をマークアップするために、pre 要素を使用している

F68: 達成基準 4.1.2 の失敗例 － プログラムによる解釈が可能な名前 (name) を持っていないユーザインタフェース コントロール

F87: 達成基準 1.3.1 の失敗例 － CSS の :before 及び :after 疑似要素並びに 'content' プロパティを用いて、非装飾のコンテンツを挿入している

F90: 達成基準 1.3.1 の失敗例 － headers 属性及び id 属性によってテーブルの見出しとコンテンツが不正確に関連付けられている

F91: 達成基準 1.3.1 の失敗例 － テーブルの見出しを正しくマークアップしていない

F92: 達成基準 1.3.1 の失敗例 － セマンティックな情報を伝えるコンテンツに presentation ロールを使用している

1.3.2 意味のある順序 

コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈が可能である。 (レベル A)

達成基準 1.3.2 の達成方法及び失敗例 - 意味のある順序

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

ウェブページにあるすべてのコンテンツについて、G57: コンテンツを意味のある順序で並べる

次の達成方法のどれか一つを用いて、コンテンツの並び順を意味のあるものにする、かつ、その並び順については、G57: コンテンツを意味のある順序で並べる

H34: インラインでテキストの方向を混在させるために、Unicode の right-to-left mark (RLM) 又は left-to-right mark (LRM) を使用する (HTML)

H56: 入れ子になったテキストの表記方向に伴う問題を解決するために、インライン要素の dir 属性を使用する (HTML)

C6: 構造を示すマークアップに基づいてコンテンツを配置する (CSS)

C8: 単語内の文字間隔を制御するために、CSS の letter-spacing を使用する (CSS)

C27: DOM の順序を表示順序と一致させる (CSS)

PDF3: PDF 文書で正しいタブ順序と読み上げ順序を確保する (PDF)

1.3.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

左から右へ書き綴る言語は左寄せを使い、右から左へ書き綴る言語は右寄せを用いる (リンク追加予定)

線形化された描画のリンクを提供する (リンク追加予定)

表現順序に影響するスタイルシートの切り替えを提供する (リンク追加予定)

達成基準 1.3.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.3.2 の失敗例とみなした、よくある間違いである。

F34: 達成基準 1.3.1 及び 達成基準 1.3.2 の失敗例 － プレーンテキストのコンテンツでテーブルの書式を整えるために、空白文字を使用している

F33: 達成基準 1.3.1 及び 達成基準 1.3.2 の失敗例 － プレーンテキストのコンテンツで複数の段組みを作成するために、空白文字を使用している

F32: 達成基準 1.3.2 の失敗例 － 単語内の間隔を制御するために、空白文字を使用している

F49: 達成基準 1.3.2 の失敗例 － 線形化したときに、意味を成さない HTML のレイアウトテーブルを使用している

F1: 達成基準 1.3.2 の失敗例 － CSS で情報を配置することにより、コンテンツの意味を変えている

1.3.3 感覚的な特徴

コンテンツを理解し操作するための説明は、形、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存していない。 (レベル A)

達成基準 1.3.3 の達成方法及び失敗例 - 感覚的な特徴

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

1.3.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

求められるグラフィカルな表現だが異なる意味を持つ Unicode フォントの代わりにグラフィカルなシンボルに対するテキストによる代替を持つ画像を用いる (リンク追加予定)

達成基準 1.3.3 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.3.3 の失敗例とみなした、よくある間違いである。

F14: 達成基準 1.3.3 の失敗例 － 形状又は位置のみでコンテンツを特定している

F26: 達成基準 1.3.3 の失敗例 － 情報を伝えるために、グラフィカルなシンボルのみを使用している

1.4 判別可能

コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。

1.4.1 色の使用 

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 (レベル A)

達成基準 1.4.1 の達成方法及び失敗例 - 色の使用

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

1.4.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

色を冗長的に使って情報を伝える (リンク追加予定)

C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの提示を変更するために、CSS を使用する (CSS)

1.4.2 音声の制御  非干渉

ウェブページ上にある音声が自動的に再生され、その音声が 3 秒より長く続く場合、その音声を一時停止もしくは停止するメカニズム、又はシステム全体の音量レベルに影響を与えずに音量レベルを調整できるメカニズムのいずれかを提供する。 (レベル A)

達成基準 1.4.2 の達成方法及び失敗例 - 音声の制御

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

1.4.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

自動的に再生される音を停止できる、ウェブページの先頭付近に提供されるコントロールに加えて、音声を停止できるサイト全体の設定を提供する (リンク追加予定)

達成基準 1.4.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.4.2 の失敗例とみなした、よくある間違いである。

F23: 達成基準 1.4.2 の失敗例 － 3 秒よりも長く音声を再生していて、音声を止めるメカニズムがない

F93: 達成基準 1.4.2 の失敗例 － 自動再生する HTML5 のメディア要素を一時停止又は停止する方法がない

1.4.3 コントラスト（最低限） 

テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)

・大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

・付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。

・ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。

達成基準 1.4.3 の達成方法及び失敗例 - コントラスト (最低限)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

1.4.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

G156: テキストのブロックの前景及び背景を変更できる、一般に入手可能なユーザエージェントが備えるウェブコンテンツ技術を使用する

模様のついた背景色にテキストを重ねるためにより高いコントラストの値を用いる (リンク追加予定)

文字画像の代わりに Unicode テキストとスタイルシートを用いる (リンク追加予定)

図表の線に、より高いコントラストの値を用いる (リンク追加予定)

赤と黒の組み合わせによる文字と背景色には、さらに大きなコントラストレベルを用いる (リンク追加予定)

主に中間のスペクトル要素からなる明るい要素とスペクトルの両端 (青と赤の波長) からなる暗い要素で構成された色を用いる

両端のコントラストではなく黒文字に白の背景よりも明るいパステルの背景色を用いる (リンク追加予定)

テキストのコントラストを満たしているシンプルな線で描かれたアイコンを使う (リンク追加予定)

グラフやチャートに十分なコントラストを提供する (リンク追加予定)

デフォルトの提示に 3:1 のコントラスト比又はそれ以上を用いる (リンク追加予定)

空のテキストフィールドに十分な色のコントラストを提供する (リンク追加予定)

1.4.4 テキストのサイズ変更

キャプション及び文字画像を除き、テキストは、コンテンツ又は機能を損なうことなく、支援技術なしで 200％ までサイズ変更できる。 (レベル AA)

達成基準 1.4.4 の達成方法及び失敗例 - テキストのサイズ変更

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G142: ズーム機能をサポートする一般に入手可能なユーザエージェントのあるウェブコンテンツ技術を使用する

テキストのサイズを変更した際に、テキストコンテナもサイズ変更するようにする、かつ、次の達成方法の一つ以上を用いて、コンテンツにあるその他の大きさと相対的な大きさにする

C28: em 単位を用いて、テキストコンテナのサイズを指定する (CSS)

相対的な大きさの達成方法:

C12: フォントサイズにパーセントを使用する (CSS)

C13: 名前付きフォントサイズを使用する (CSS)

C14: フォントサイズに em 単位を使用する (CSS)

テキストコンテナのサイズを可変にする達成方法:

SCR34: テキストサイズに応じて拡大縮小するように、サイズ及びポジションを定める (Scripting)

G146: リキッドレイアウトを使用する

G178: 利用者がウェブページ上のすべてのテキストを 200％まで徐々に変更できるコントロールをウェブページ上で提供する

G179: 文字サイズを変更し、かつテキストコンテナの幅を変更しないときに、コンテンツ又は機能が損なわれないようにする

1.4.4 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

デフォルトで大きなフォントを提供する (リンク追加予定)

ページ比率のコンテナーサイズを用いる (リンク追加予定)

ユーザエージェントのデフォルトよりも小さなサイズのフォント尺度を使わない (リンク追加予定)

注記: コンテンツ制作者は本当のフォントサイズを知ることはできないが、100%よりも小さな値の尺度を避けるべきである

両端揃えは避ける (リンク追加予定)

十分なスペースを持った行間を提供する (リンク追加予定)

アクセシブルな選択肢が提供できない場合、非テキストコンテンツは異なるサイズを提供する (リンク追加予定)

ビットマップ (ラスター画像) の文字の利用を避ける (リンク追加予定)

文字画像のサイズ変更にサーバーサイドスクリプトを用いる (リンク追加予定)

C17: テキストを含むフォーム要素を拡大縮小する (CSS)

少なくとも 18 ポイント以上のビットマップ (ラスター画像) の文字を保証する (リンク追加予定)

文字サイズを 50％ に縮小する (リンク追加予定)

C20: ブラウザがサイズ変更されるときに、行が平均で 80 字以下になるようなカラムの幅を設定するために、相対長さを使用する (CSS)

C22: テキストの視覚的提示を制御するために、CSS を使用する (CSS)

拡大するメカニズムをもつキャプションを提供する (リンク追加予定)

1.4.5 文字画像

使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが情報伝達に用いられている。ただし、次に挙げる場合を除く: (レベル AA)

・カスタマイズ可能: 文字画像は、利用者の要求に応じた視覚的なカスタマイズができる。

・必要不可欠: テキストの特定の提示が、伝えようとする情報にとって必要不可欠である。

達成基準 1.4.5 の達成方法及び失敗例 - 文字画像

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

1.4.5 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

非テキストコンテンツ向けの一般的な達成方法

情報を提供する非テキストコンテンツを識別する（リンク追加予定）

達成基準 1.4.5 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.4.5 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.4.6 コントラスト（高度） 

テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AAA)

・大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比がある。

・付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。

・ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。

達成基準 1.4.6 の達成方法及び失敗例 - コントラスト (高度)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

1.4.6 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

G156: テキストのブロックの前景及び背景を変更できる、一般に入手可能なユーザエージェントが備えるウェブコンテンツ技術を使用する

模様のある背景にはよりハイコントラストな値の文字を用いる (リンク追加予定)

文字画像の代わりに Unicode テキストとスタイルシートを用いる (リンク追加予定)

ダイヤグラムの線にハイコントラストな値を用いる (リンク追加予定)

赤と黒の組み合わせによる文字と背景色には、さらに大きなコントラストレベルを用いる

主に中間のスペクトル要素からなる明るい要素とスペクトルの両端 (青と赤の波長) からなる暗い要素で構成された色を用いる

両端のコントラストではなく、黒文字に白の背景よりも明るいパステルの背景色を用いる (リンク追加予定)

テキストのコントラスト規定を満たしているシンプルな線で描かれたアイコンを使う (リンク追加予定)

グラフやチャートに十分な色コントラストを提供する (リンク追加予定)

デフォルトの提示から 3:1 のコントラスト比又はそれよりも高い比率を用いる (リンク追加予定)

空のテキストフィールドに十分な色のコントラストを提供する (リンク追加予定)

1.4.7 小さな背景音、又は背景音なし 

収録済の音声しか含まないコンテンツで、(1) 前景に主として発話を含み、(2) 音声CAPTCHA 又は音声ロゴではなく、かつ、(3) 例えば、歌やラップなどのように、主として音楽表現を意図した発声ではないものについては、次に挙げる事項のうち、少なくとも一つを満たしている: (レベル AAA)

・背景音なし: 音声は背景音を含まない。

・消音: 背景音を消すことができる。

・20デシベル: 背景音は、前景にある発話のコンテンツより少なくとも20デシベルは低い。ただし、継続時間が2秒以内で発生頻度が低い背景音は除く。

達成基準 1.4.7 の達成方法及び失敗例 - 小さな背景音、又は背景音なし

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

1.4.7 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

前景音と背景音のレベルを独立して調節できる方法を提供する（リンク追加予定）

発話より少なくとも20デシベル低い背景音を含む同期したメディアに対して、音声トラックを提供する（リンク追加予定）

達成基準 1.4.7 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.4.7 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

1.4.8 視覚的提示

テキストブロックの視覚的提示において、次を実現するメカニズムが利用できる: (レベル AAA)

1.利用者が、前景色と背景色を選択できる。

2.幅が 80 字を越えない (全角文字の場合は、40 字)。

3.テキストが、均等割り付けされていない (両端揃えではない)。

4.段落中の行送りは、少なくとも 1.5 文字分ある。そして、段落の間隔は、その行送りの少なくとも 1.5 倍以上ある。

5.テキストは、支援技術なしで 200％までサイズ変更でき、利用者が全画面表示にしたウィンドウで 1 行のテキストを読むときに横スクロールする必要がない。

達成基準 1.4.8 の達成方法及び失敗例 - 視覚的提示

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: これは複数の要件から成る達成基準なので、次の要件それぞれについて、番号付きの項目の中から一つを満たさなければならない。

要件 1: 前景色及び背景色を利用者が選択可能にする達成方法:

C23: メインコンテンツのテキスト及び背景の色を指定せず、バナー、機能及びナビゲーションなどのような補助的なコンテンツのテキスト及び背景の色を CSS で指定する (CSS) 、又は、

C25: テキスト及び背景の色は指定せずに、ウェブページの各領域の範囲を明確にするためのボーダーやレイアウトを CSS で指定する (CSS) 、又は、

G156: テキストのブロックの前景及び背景を変更できる、一般に入手可能なユーザエージェントが備えるウェブコンテンツ技術を使用する、又は、

G148: 背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない、又は、

G175: 背景色及び前景色のための複数色選択ツールをページ上で提供する

要件 4: 段落内の行送り幅 (行間隔) が少なくとも 1.5 文字分、及び段落の間隔がその行送り幅の少なくとも 1.5 倍になるようにする達成方法:

G188: 行間及び段落の間隔を広げるボタンをウェブページ上に提供する、又は、

C21: 行送り幅を CSS で指定する (CSS)

要件 5: 利用者が全画面表示にしたウィンドウで 1 行のテキストを読む際に横スクロールする必要がない状態で、支援技術を用いなくてもテキストを 200％までサイズ変更できるようにする達成方法:

G204: 閲覧画面の幅を狭めたときに、ユーザエージェントによるテキストのリフローを妨げない、又は、

G146: リキッドレイアウトを使用する、かつ、次の達成方法の一つ以上を用いて、コンテンツにあるその他の大きさと相対的な大きさにする:

C12: フォントサイズにパーセントを使用する (CSS) 、又は、

C13: 名前付きフォントサイズを使用する (CSS) 、又は、

C14: フォントサイズに em 単位を使用する (CSS) 、又は、

C24: コンテナのサイズに CSS のパーセント値を使用する (CSS) 、又は、

SCR34: テキストサイズに応じて拡大縮小するように、サイズ及びポジションを定める (Scripting)

G206: 利用者が横スクロールをしなくてもテキストの行を読めるようにするような、レイアウトを切り替えるオプションをコンテンツの中で提供する

1.4.8 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

パラグラフ、リスト又はテーブルセルをハイライトするのに Hover 効果を用いる (HTML, CSS) (リンク追加予定)

sans serif フォント又はそれを達成できるメカニズムを提供する(CSS) (リンク追加予定)

インラインリストよりもリスト (ビュレット又は番号順) を用いる (リンク追加予定)

テキスト言語の綴りの慣習に従って上付又は下付を用いる (リンク追加予定)

デフォルトを大きな文字で提供する (リンク追加予定)

ビットマップ (ラスター画像) の文字利用を避ける (リンク追加予定)

ユーザエージェントの初期値よりも小さなサイズのフォント尺度を使わない (リンク追加予定)

十分なスペースを持った行間を提供する (リンク追加予定)

中心揃えの文字を使わない (リンク追加予定)

イタリックテキストをたくさんを使わない (リンク追加予定)

個々のページやサイト内で異なるスタイルを乱用しない (リンク追加予定)

視覚的に異なるリンクを用いる (リンク追加予定)

拡張的なビュレットを提供する (リンク追加予定)

ビュレットポイントを見せる又は隠す (リンク追加予定)

文の後は em スペース又は 2 スペースをあてる (リンク追加予定)

1.4.9 文字画像（例外なし） 

文字画像は、純粋な装飾に用いられているか、テキストの特定の提示が伝えようとする情報にとって必要不可欠である場合に用いられている。 (レベル AAA)

達成基準 1.4.9 の達成方法及び失敗例 - 文字画像 (例外なし)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

1.4.9 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

非装飾コンテンツに関する一般的な達成方法

文字画像のサイズを変更するサーバーサイドスクリプトを用いる (リンク追加予定)

達成基準 1.4.9 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 1.4.9 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2 操作可能

2.1 キーボード操作可能

すべての機能をキーボードから利用できるようにすること。

2.1.1 キーボード 

コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。ただし、その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除く。 (レベル A)

達成基準 2.1.1 の達成方法及び失敗例 - キーボード

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G202: すべての機能に対してキーボード制御を確保する

次の達成方法の一つを用いて、キーボードで操作できることを保証する。

H91: HTML のフォームコントロール及びリンクを使用する (HTML)

PDF3: PDF 文書で正しいタブ順序と読み上げ順序を確保する (PDF)

PDF11: PDF 文書内で Link アノテーションと /Link 構造要素を使用してリンクとリンクテキストを提供する (PDF)

PDF23: PDF 文書内でインタラクティブなフォームコントロールを提供する (PDF)

次の達成方法の一つを用いて、 G90: キーボードがトリガーとなるイベントハンドラを提供する :

SCR20: キーボードとその他のデバイス固有の機能を両方とも使用する (Scripting)

SCR35: アンカー及びボタンの onclick イベントを用いて、アクションをキーボード操作可能にする (Scripting)

SCR2: キーボード及びマウスのイベントハンドラを両方とも使用する (Scripting)

2.1.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

インタラクティブなユーザインタフェースコンポーネントとして静的な要素に再度目的を持たせる場合、XHTML の役割、状態、及び値の属性を使用する (リンク追加予定) 及び SCR29: 静的な HTML 要素にキーボードアクセシブルなアクションを追加する (Scripting)

重要なリンク及びフォームのコントロールへのキーボードショートカットを提供する (リンク追加予定)

一覧表の各項目を始めるために固有の文字の組み合わせを使用する (リンク追加予定)

もっとも抽象的なイベントハンドラを選択する (リンク追加予定) (Scripting)

OnActivate イベントを使用する (リンク追加予定) (Scripting)

他の目的で、一般的なユーザエージェントのキーボードコマンドの使用を避ける (リンク追加予定)

2.1.2 キーボードトラップなし

キーボードインタフェースを用いてキーボードフォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能である。さらに、修飾キーを伴わない矢印キー、 Tab キー、又はフォーカスを外すその他の標準的な方法でフォーカスを外せない場合は、フォーカスを外す方法が利用者に通知される。 (レベル A)

達成基準 2.1.2 の達成方法及び失敗例 - キーボードトラップなし

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.1.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

(今のところ、文書化されていない)

達成基準 2.1.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.1.2 の失敗例とみなした、よくある間違いである。

F10: 達成基準 2.1.2 及び 適合要件 5 の失敗例 － 利用者を一つのフォーマット型の中に閉じ込める方法で、複数のコンテンツフォーマットを組み合わせている

2.1.3 キーボード（例外なし）

コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。 (レベル AAA)

達成基準 2.1.3 の達成方法及び失敗例 - キーボード (例外なし)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

この達成基準には、特に追加された達成方法があるわけではない。達成基準 2.1.1 の達成方法を参照のこと。アナログで時間の経過に依存した入力があるためにその達成方法が不可能な場合は、このレベル AAA の達成基準に適合することはできない。

2.2 十分な時間

利用者がコンテンツを読み、使用するために十分な時間を提供すること。

2.2.1 タイミング調整可能 

コンテンツに制限時間を設定する場合は、次に挙げる事項のうち、少なくとも一つを満たしている: (レベル A)

・解除: 制限時間があるコンテンツを利用する前に、利用者がその制限時間を解除することができる。又は、

・調整: 制限時間があるコンテンツを利用する前に、利用者が少なくともデフォルト設定の 10 倍を超える、大幅な制限時間の調整をすることができる。又は、

・延長: 時間切れになる前に利用者に警告し、かつ少なくとも 20 秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、利用者が制限時間を少なくとも 10 倍以上延長することができる。又は、

・リアルタイムの例外: リアルタイムのイベント (例えば、オークション) において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

・必要不可欠な例外: 制限時間が必要不可欠なもので、制限時間を延長することがコンテンツの動作を無効にすることになる。又は、

・20 時間の例外: 制限時間が 20 時間よりも長い。

達成基準 2.2.1 の達成方法及び失敗例 - タイミング調整可能

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

2.2.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

制限時間がある場合、サーバーに問いかけるためにスクリプトを使用し、利用者に通知する。(リンク追加予定) (Scripting)

利用者の注意を集中させるために音を使用する。(リンク追加予定)

2.2.2 一時停止、停止、非表示  非干渉

動きのある、点滅している、スクロールする、又は自動更新する情報は、次のすべての事項を満たしている: (レベル A)

・動き、点滅、スクロール: 動きのある、点滅している、又はスクロールしている情報が、(1) 自動的に開始し、(2) 5秒よりも長く継続し、かつ、(3) その他のコンテンツと並行して提示される場合、利用者がそれらを一時停止、停止、又は非表示にすることのできるメカニズムがある。ただし、その動き、点滅、又はスクロールが必要不可欠な動作の一部である場合は除く。

・自動更新: 自動更新する情報が、(1) 自動的に開始し、 (2) その他のコンテンツと並行して提示される場合、利用者がそれを一時停止、停止、もしくは非表示にする、又はその更新頻度を調整することのできるメカニズムがある。ただし、その自動更新が必要不可欠な動作の一部である場合は除く。

達成基準 2.2.2 の達成方法及び失敗例 - 一時停止、停止、非表示

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G4: コンテンツを一時停止させて、一時停止させたところから再開できるようにする

SCR33: コンテンツをスクロールし、かつそれを一時停止するメカニズムを提供するためにスクリプトを使用する (Scripting)

G11: 5 秒未満で点滅するコンテンツを制作する

G187: ユーザエージェントによって点滅するコンテンツを停止できるウェブコンテンツ技術を使用する

G152: (5 秒以内の) 数回のループ後に点滅を停止するように、アニメーション GIF を設定する

SCR22: 点滅を制御し、5 秒以内に停止させるために、スクリプトを使用する (Scripting)

G186: 動きのあるコンテンツ、点滅するコンテンツ、又は自動更新するコンテンツを停止させるコントロールを使用する

G191: 点滅するコンテンツのないページを再読み込みするリンク、ボタン、又はその他のメカニズムを提供する

2.2.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

ウェブページ内で点滅するすべてのコンテンツを止めるメカニズムを提供する (リンク追加予定)

5秒以内に自動的に止まるとしても、利用者が動きのあるコンテンツを止めるための手段を提供する。(リンク追加予定)

達成基準 2.2.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.2.2 の失敗例とみなした、よくある間違いである。

F16: 達成基準 2.2.2 の失敗例 － コンテンツを一時停止及び再開するメカニズムなしで、動きが操作に不可欠ではないところにスクロールするコンテンツを含んでいる

F47: 達成基準 2.2.2 の失敗例 － blink 要素を使用している

F4: 達成基準 2.2.2 の失敗例 － 5 秒未満で停止させるメカニズムを提供せずに、text-decoration:blink を使用している

F50: 達成基準 2.2.2 の失敗例 － 5 秒以内に点滅を停止するメカニズムなしに、点滅効果を引き起こすスクリプト

F7: 達成基準 2.2.2 の失敗例 － 5 秒よりも長く点滅するコンテンツを一時停止するメカニズムなしでコンテンツを点滅している、Java 又は Flash などのオブジェクト又はアプレット

2.2.3 タイミング非依存

タイミングは、コンテンツによって提示されるイベント又は動作の必要不可欠な部分ではない。ただし、インタラクティブではない同期したメディア及び リアルタイムのイベントは除く。 (レベル AAA)

達成基準 2.2.3 の達成方法及び失敗例 - タイミング非依存

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.2.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

(今のところ、文書化されていない)

達成基準 2.2.3 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.2.3 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2.2.4 割り込み

割り込みは、利用者が延期、又は抑制することができる。ただし、緊急を要する割り込みは除く。 (レベル AAA)

達成基準 2.2.4 の達成方法及び失敗例 - 割り込み

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.2.4 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

(今のところ、文書化されていない)

2.2.5 再認証 

認証済のセッションが切れた場合は、再認証後でもデータを失うことなく利用者が操作を継続できる。 (レベル AAA)

達成基準 2.2.5 の達成方法及び失敗例 - 再認証

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

次の実装技術の一つを使用することでデータを損うことなく継続することができる選択肢を提供する:

G105: 利用者が再認証した後に利用できるようにデータを保存する

G181: 利用者のデータを、再認証したページで非表示データ又は暗号化されたデータとしてエンコーディングする

達成基準 2.2.1 の取組みのための達成方法を参照のこと。

2.2.5 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

(今のところ、文書化されていない)

達成基準 2.2.5 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.2.5 の失敗例とみなした、よくある間違いである。

F12: 達成基準 2.2.5 の失敗例 － 利用者の入力を保存し、再認証時にその情報を再確立するためのメカニズムなしに、セッションの制限時間がある

2.3 発作の防止

発作を引き起こすようなコンテンツを設計しないこと。

2.3.1 3回の閃光、又は閾値以下

ウェブページには、どの 1 秒間においても3回を超える閃光を放つものがない、又は閃光が一般閃光閾値及び赤色閃光閾値を下回っている。 (レベル A)

達成基準 2.3.1 の達成方法及び失敗例 - 3 回の閃光、又は閾値以下

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.3.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

閃光を放つあらゆるコンテンツに対してコントラストを下げる (リンク追加予定)

閃光を放つあらゆるコンテンツに対して赤色閃光閾値を完全に避ける (リンク追加予定)

閾値を超えていなかったとしても、閃光の数を減少させる (リンク追加予定)

閃光を放ち始める前に、閃光を放つあらゆるコンテンツを抑制するメカニズムを提供する (リンク追加予定)

(フラッシュバルブのような) 素早い閃光を避けるためにライブの素材は速度を落とす (リンク追加予定)

1 秒間に 3 回の閃光が検出される場合、一時的に画像を静止させる (リンク追加予定)

1 秒間に 3 回の閃光が検出される場合、コントラスト比を落とす (リンク追加予定)

利用者が閃光の速度制限を任意に設定できるようにする (リンク追加予定)

達成基準 2.3.1 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.3.1 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2.3.2 3回の閃光

ウェブページには、どの 1 秒間においても 3 回を超える閃光を放つものがない。 (レベル AAA)

達成基準 2.3.2 の達成方法及び失敗例 - 3 回の閃光

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.3.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

閃光を放つあらゆるコンテンツに対してコントラストを下げる (リンク追加予定)

閃光を放つあらゆるコンテンツに対して赤色閃光閾値を完全に避ける (リンク追加予定)

閾値を超えていなかったとしても、閃光の数を減少させる (リンク追加予定)

(フラッシュバルブのような) 素早い閃光を避けるためにライブの素材は速度を落とす (リンク追加予定)

1 秒間に 3 回の閃光が検出される場合、一時的に画像を静止させる (リンク追加予定)

1 秒間に 3 回の閃光が検出される場合、コントラスト比を落とす (リンク追加予定)

達成基準 2.3.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.3.2 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2.4 ナビゲーション可能

利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。

2.4.1 ブロックスキップ 

複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。 (レベル A)

達成基準 2.4.1 の達成方法及び失敗例 - ブロックスキップ

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

次の達成方法の中から一つを用いて、繰り返されるブロックをスキップするリンクを作成する:

G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する

G123: 繰り返しているコンテンツのブロックの先頭に、そのブロックの末尾へのリンクを追加する

G124: ページの先頭に、コンテンツの各エリアへのリンクを追加する

次の達成方法の中から一つを用いて、スキップ可能な方法で繰り返されるブロックをグループ化する:

ARIA11: ページのリージョンを特定するために ARIA ランドマークを使用する (ARIA)

H69: コンテンツの各セクションの開始位置に見出し要素を提供する (HTML)

PDF9: PDF 文書内のコンテンツを見出しタグでマークアップすることによって見出しを作成する (PDF)

H70: 繰り返されているコンテンツのブロックをグループ化するために、frame 要素を使用する (HTML) 、かつ、H64: frame 要素及び iframe 要素の title 属性を使用する (HTML)

SCR28: コンテンツのブロックをバイパスするために、展開可能及び折り畳み可能なメニューを使用する (Scripting)

2.4.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

重要なリンク及びフォーム制御へのキーボードアクセスを提供する（リンク追加予定）

ページナビゲーションに拡張したスキップリンクを提供する（リンク追加予定）

アクセスキーを提供する（リンク追加予定）

ユーザエージェント及び支援技術による構造化されたナビゲーションを与えるアクセシビリティ サポート技術を使う（リンク追加予定）

C6: 構造を示すマークアップに基づいてコンテンツを配置する (CSS)

達成基準 2.4.1 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.4.1 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2.4.2 ページタイトル

ウェブページには、主題又は目的を説明したタイトルがある。 (レベル A)

達成基準 2.4.2 の達成方法及び失敗例 - ページタイトル

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.4.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

G127: あるウェブページと、より大きな一連のウェブページとの関係性を特定する

ウェブページの主題を特定する（リンク追加予定）

フレームを特定するため意味のある名前を提供する（リンク追加予定）

ウェブページに一意なタイトルを使う（リンク追加予定）

説明的な内容を説明したトップレベルページの見出しを提供する（リンク追加予定）

達成基準 2.4.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.4.2 の失敗例とみなした、よくある間違いである。

F25: 達成基準 2.4.2 の失敗例 － コンテンツを特定しないウェブページのタイトル

2.4.3 フォーカス順序 

ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは、意味及び操作性を損なわない順序でフォーカスを受け取る。 (レベル A)

達成基準 2.4.3 の達成方法及び失敗例 - フォーカス順序

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G59: コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する

次の達成方法の一つを用いて、コンテンツ内の順序及び関係性に従った順序でフォーカスを要素に与える:

H4: リンク、フォームコントロール、及びオブジェクトを通して、論理的なタブ順序を作成する (HTML)

C27: DOM の順序を表示順序と一致させる (CSS)

PDF3: PDF 文書で正しいタブ順序と読み上げ順序を確保する (PDF)

次の達成方法の一つを用いて、ウェブページを動的に変化させる:

SCR26: 動的なコンテンツを、Document Object Model の、そのトリガーとなる要素の直後に挿入する (Scripting)

SCR37: デバイス非依存な方法でカスタムダイアログを作成する (Scripting)

SCR27: Document Object Model を用いて、ページ上にある複数のセクションを並び替える (Scripting)

2.4.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

キーボードフォーカスを受け取ったリンクもしくはコントロールが、強調され非常に目立つメカニズムを提供する (リンク追加予定)

代替となる提示順序を作り出す (リンク追加予定)

2.4.4 リンクの目的（コンテキスト内）

それぞれのリンクの目的が、リンクのテキスト単独で、又はリンクのテキストとプログラムによる解釈が可能なリンクのコンテキストから判断できる。ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。 (レベル A)

達成基準 2.4.4 の達成方法及び失敗例 - リンクの目的 (コンテキスト内)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G91: リンクの目的を説明したリンクテキストを提供する

H30: a 要素のリンクの目的を説明するリンクテキストを提供する (HTML)

H24: イメージマップの area 要素にテキストによる代替を提供する (HTML)

次に挙げる達成方法の一つを用いて、利用者が簡潔なリンクテキスト又は長いリンクテキストを選べるようにする:

G189: ウェブページの先頭近くに、リンクテキストを変更するコントロールを提供する

SCR30: リンクテキストを変更するために、スクリプトを使用する (Scripting)

G53: リンクテキストとそれが含まれている文中のテキストとを組み合わせて、リンクの目的を特定する

次に挙げる達成方法の一つを用いて、リンクの目的の説明を補足する:

H33: title 属性を用いて、リンクテキストを補足する (HTML)

C7: リンクテキストの一部を非表示にするために、CSS を使用する (CSS)

次に挙げる達成方法の一つを用いて、プログラムによる解釈されるリンクのコンテキストと一緒にリンクの目的を特定する:

ARIA7: リンクの目的を示すために aria-labelledby を使用する (ARIA)

ARIA8: リンクの目的を示すために aria-label を使用する (ARIA)

H77: リンクテキストとそれが含まれているリスト項目とを組み合わせて、リンクの目的を特定する (HTML)

H78: リンクテキストとそれが含まれている段落とを組み合わせて、リンクの目的を特定する (HTML)

H79: リンクテキストとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせて、リンクの目的を特定する (HTML)

H81: リストが入れ子になっている状況で、親のリスト項目と結合したリンクテキストを用いて、入れ子になったリストの中でリンクの目的を特定する (HTML)

G91: リンクの目的を説明したリンクテキストを提供するかつ次の達成方法の一つを用いてセマンティックにリンクを示す:

PDF11: PDF 文書内で Link アノテーションと /Link 構造要素を使用してリンクとリンクテキストを提供する (PDF)

PDF13: PDF 文書内のリンクに対して /Alt エントリを使用して置換テキストを提供する (PDF)

2.4.4 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H2: 同じリソースに対して隣接する画像とテキストリンクを結合する (HTML)

H80: リンクテキストと先行する見出し要素とを組み合わせて、リンクの目的を特定する (HTML)

2.4.5 複数の手段 

ウェブページ一式の中で、あるウェブページを見つける複数の手段が利用できる。ただし、ウェブページが一連のプロセスの中の1ステップ又は結果である場合は除く。 (レベル AA)

達成基準 2.4.5 の達成方法及び失敗例 - 複数の手段

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.4.5 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H59: link 要素及びナビゲーションツールを使用する (HTML)

コンテンツ及びコンセプトマップの表に提示モードについての情報を含める（リンク追加予定）

達成基準 2.4.5 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.4.5 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2.4.6 見出し及びラベル

見出し及びラベルは、主題又は目的を説明している。 (レベル AA)

達成基準 2.4.6 の達成方法及び失敗例 - 見出し及びラベル

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G130: 説明的な見出しをつける

G131: 説明的なラベルを提供する

達成基準 1.3.1 により、見出し及びラベルは、プログラムによる解釈がされなければならない。

w3c/wcag#315 で改善が提案されているので、あわせて参照されたい。

2.4.6 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

ウェブページに一意なセクション見出しを用いる（リンク追加予定）

一意な情報からセクション見出しをはじめる（リンク追加予定）

達成基準 2.4.6 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.4.6 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2.4.7 フォーカスの可視化

キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある。 (レベル AA)

達成基準 2.4.7 の達成方法及び失敗例 - フォーカスの可視化

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G149: フォーカスを受け取るときに、ユーザエージェントによって強調されるユーザインタフェース コンポーネントを使用する

C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの提示を変更するために、CSS を使用する (CSS)

G165: 視認性の高いデフォルトのフォーカスインジケータが引き継がれるように、プラットフォームデフォルトのフォーカスインジケータを使用する

G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用する

SCR31: フォーカスのある要素の背景色又はボーダーを変更するために、スクリプトを使用する (Scripting)

2.4.7 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

リンクもしくはコントロールのそばにマウスが来たとき強調する（リンク追加予定）

キーボードフォーカスを受け取ったときリンクもしくはコントロールが強調され非常に目立つメカニズムを提供する（リンク追加予定）

2.4.8 現在位置

ウェブページ一式の中での利用者の位置に関する情報が利用できる。 (レベル AAA)

達成基準 2.4.8 の達成方法及び失敗例 - 現在位置

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.4.8 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

PDF14: PDF 文書内に連続するヘッダーとフッターを提供する (PDF)

PDF17: PDF 文書に一貫性のあるページ番号を指定する (PDF)

ホームページもしくは主要なページへのリンクを提供する (リンク追加予定)

ウェブページの集合の編成について読みやすいバージョンの情報を提供する (リンク追加予定)

ウェブページの集合の編成について手話バージョンの情報を提供する (リンク追加予定)

コンテンツの各セクションの最初に読みやすい概要を提供する (リンク追加予定)

達成基準 2.4.8 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.4.8 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

2.4.9 リンクの目的（リンクのみ）

それぞれのリンクの目的を、リンクのテキスト単独で特定できるメカニズムが利用できる。ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。 (レベル AAA)

達成基準 2.4.9 の達成方法及び失敗例 - リンクの目的 (リンクのみ)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

ARIA8: リンクの目的を示すために aria-label を使用する (ARIA)

G91: リンクの目的を説明したリンクテキストを提供する

H30: a 要素のリンクの目的を説明するリンクテキストを提供する (HTML)

H24: イメージマップの area 要素にテキストによる代替を提供する (HTML)

次の達成方法の一つを用いて、利用者が短めのリンクテキスト又は長めのリンクテキストを選べるようにする:

G189: ウェブページの先頭近くに、リンクテキストを変更するコントロールを提供する

SCR30: リンクテキストを変更するために、スクリプトを使用する (Scripting)

次の達成方法の一つを用いて、リンクの目的を補足説明する:

C7: リンクテキストの一部を非表示にするために、CSS を使用する (CSS)

次の達成方法の一つを用いて、セマンティックにリンクを示す:

PDF11: PDF 文書内で Link アノテーションと /Link 構造要素を使用してリンクとリンクテキストを提供する (PDF)

PDF13: PDF 文書内のリンクに対して /Alt エントリを使用して置換テキストを提供する (PDF)

2.4.9 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H2: 同じリソースに対して隣接する画像とテキストリンクを結合する (HTML)

H33: title 属性を用いて、リンクテキストを補足する (HTML)

2.4.10 セクション見出し

セクション見出しを用いて、コンテンツが整理されている。 (レベル AAA)

達成基準 2.4.10 の達成方法及び失敗例 - セクション見出し

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

2.4.10 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

ライブリージョンを特定する 'live' プロパティを使う (リンク追加予定) (ARIA)

ウェブページのコンテンツの異なるセクションにナビゲートするメカニズムを提供する (リンク追加予定)

達成基準 2.4.10 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 2.4.10 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3 理解可能

3.1 読みやすさ

テキストのコンテンツを読みやすく理解可能にすること。

3.1.1 ページの言語

それぞれのウェブページのデフォルトの自然言語がどの言語であるか、プログラムによる解釈が可能である。 (レベル A)

達成基準 3.1.1 の達成方法及び失敗例 - ページの言語

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

3.1.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

SVR5: HTTP ヘッダーにデフォルト言語を指定する (SERVER)

http 又は Content-Language メタタグを用いてメタデータを指定する (リンク追加予定)

達成基準 3.1.1 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.1.1 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.1.2 一部分の言語 

コンテンツの一節、又は語句それぞれの自然言語がどの言語であるか、プログラムによる解釈が可能である。ただし、固有名詞、技術用語、言語が不明な語句、及びすぐ前後にあるテキストの言語の一部になっている単語又は語句は除く。 (レベル AA)

達成基準 3.1.2 の達成方法及び失敗例 - 一部分の言語

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

3.1.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

そのウェブページのデフォルトの自然言語とは異なる言語で記述されているテキストを視覚的に区別できるようにする (リンク追加予定)

外国語で記述された節や語句で用いられているすべての原語の名前を表示する (リンク追加予定)

固有名詞の原語をマークアップして、スクリーンリーダが正しく発音できるようにする (リンク追加予定)

達成基準 3.1.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.1.2 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.1.3 一般的ではない用語 

慣用句及び専門用語を含めて、一般的ではない、又は限定された用法で使われている単語、又は語句の、明確な定義を特定するメカニズムが利用できる。 (レベル AAA)

達成基準 3.1.3 の達成方法及び失敗例 - 一般的ではない用語

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: 単語又は語句にそのウェブページ特有の意味がある場合:

ウェブページ上で単語や語句の初出時に、以下のいずれかの方法で G101: 一般的ではない、又は限定された用法で用いられている単語又は語句の定義を提供する:

G55: 定義にリンクする

H40: 記述リストを使用する (HTML)

H60: 用語集にリンクするために、link 要素を使用する (HTML)

G112: インラインの定義を使用する

H54: 単語の定義箇所を特定するために、dfn 要素を使用する (HTML)

以下のいずれかの方法を用いて、その単語又は語句がウェブページ上に出現する度に G101: 一般的ではない、又は限定された用法で用いられている単語又は語句の定義を提供する:

G55: 定義にリンクする

H40: 記述リストを使用する (HTML)

H60: 用語集にリンクするために、link 要素を使用する (HTML)

G62: 用語集を提供する

G70: オンライン辞書を検索する機能を提供する

3.1.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

特殊な意味を持つ言葉を利用者が認識できるようなマークアップや視覚的フォーマットを行う (リンク追加予定)

音声で検索できる辞書を提供し、キーボードの操作や単語を綴ることが難しい利用者が発声することで言葉の意味を検索できるようにする (リンク追加予定)

手話による辞書を提供し、ろう者が言葉の意味を検索するのを支援する (リンク追加予定)

テキストコンテンツ中のすべての言葉の定義を検索できるようなメカニズムを提供する (リンク追加予定)

テキストコンテンツ中のすべての単語や語句について、その意味を判断するためのメカニズムを提供する (リンク追加予定)

一般的でない外来語の使用を避ける (リンク追加予定)

一連の辞書をカスケード式に表示して意味を提供する (リンク追加予定)

達成基準 3.1.3 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.1.3 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.1.4 略語

略語の元の語、又は意味を特定するメカニズムが利用できる。 (レベル AAA)

達成基準 3.1.4 の達成方法及び失敗例 - 略語

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: 略語がそのウェブページ内で一つの意味しか持たない場合:

ウェブページ上で略語の初出時に、以下のいずれかの方法で G102: 略語の元の語又は説明を提供する:

G97: 略語の初出時、その直前又は直後に元の語を提供する

G55: 定義にリンクする

H28: abbr 要素を用いて、略語の定義を提供する (HTML)

PDF8: 構造要素の E エントリによって略語の定義を提供する (PDF)

以下のいずれかの方法を用いて、その略語がウェブページ上に出現する度に G102: 略語の元の語又は説明を提供する:

G55: 定義にリンクする

G62: 用語集を提供する

H60: 用語集にリンクするために、link 要素を使用する (HTML)

G70: オンライン辞書を検索する機能を提供する

H28: abbr 要素を用いて、略語の定義を提供する (HTML)

PDF8: 構造要素の E エントリによって略語の定義を提供する (PDF)

状況 B: 略語が同じウェブページで異なるものを意味している場合:

以下のいずれかの方法を用いて、その略語がウェブページ上に出現する度に G102: 略語の元の語又は説明を提供する:

G55: 定義にリンクする

H28: abbr 要素を用いて、略語の定義を提供する (HTML)

PDF8: 構造要素の E エントリによって略語の定義を提供する (PDF)

3.1.4 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

そのウェブページ上で一意な略語を用いる（リンク追加予定）

利用者が略語を認識しやすいような視覚的フォーマットを用いる（リンク追加予定）

音声読み上げ機能がある辞書の利用を可能にし、表示された文字情報を復号化することが困難な利用者を支援する（リンク追加予定）

音声で検索できる辞書を提供し、キーボードの操作や単語を綴ることが難しい利用者が発声することで言葉の意味を検索できるようにする（リンク追加予定）

達成基準 3.1.4 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.1.4 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.1.5 読解レベル

固有名詞や題名を取り除いた状態で、テキストが前期中等教育レベルを超えた読解力を必要とする場合は、補足コンテンツ又は前期中等教育レベルを超えた読解力を必要としない版が利用できる。 (レベル AAA)

達成基準 3.1.5 の達成方法及び失敗例 - 読解レベル

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G86: 前期中等教育レベルの読解力をもつ人が理解できるテキストの要約を提供する

G103: アイデア、イベント及びプロセスを説明するのに役立つ、視覚的なイラスト、写真及びシンボルを提供する

G79: テキストの音声バージョンを提供する

G153: テキストを読みやすくする

G160: コンテンツを利用するために理解が不可欠な情報、アイデア及びプロセスの手話バージョンを提供する

注記: サイトによっては、さまざまな方法でこの達成基準で対処してもよい。コンテンツの音声バージョンは、一部の利用者に有用かもしれない。聴覚障害のある利用者にとっては、手話が彼らの第一言語であることもあるので、書き言葉のバージョンよりもページの手話バージョンのほうが理解しやすいかもしれない。一部のサイトは、両方又はその他の組み合わせを行うことを決定するかもしれない。問題を抱えるすべての利用者に役立つ技術はない。そのため、サイトをよりアクセシブルにしようとしているコンテンツ制作者のために、達成基準として、様々な達成方法が提供される。上にある全ての番号の付いた達成方法又は組み合わせは、特定のサイトで用いることができ、ワーキンググループでは十分とみなされている。

3.1.5 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

前期中等教育レベルよりも進んでいない読解力を求めるナビゲーション及びランディングページのテキストを提供する (リンク追加予定)

前期中等教育レベルの読解力を求めるサイト内のページを提供する (リンク追加予定)

メタデータにコンテンツの概要を含める (リンク追加予定)

コンテンツに適した最も明解で平易な表現を使用する (リンク追加予定)

主要コンテンツに補足的なコンテンツを関連づけるためにRDFを用いる (リンク追加予定)

サイトのホームページに明確な表現の画像を提供する (リンク追加予定)

テキストやアイコンを用いて、読みやすいように最適化されたコンテンツを、明示的にマーキングする (リンク追加予定)

冗長な単語を含まない文、すなわち文の意味を変えない単語を用いる (リンク追加予定)

二つ以下の接続詞を含む文を用いる (リンク追加予定)

中等教育で一般的に容認されている長さを超えない文を用いる (注記: 英語では 25 ワードである) (リンク追加予定)

文の意味を変えずに、より一般的に使用される単語で置き換えることができる複雑な単語や語句を含まない文を用いる (リンク追加予定)

異なるテキストの章や節の概要を提供する (リンク追加予定)

異なる読解レベルに代替コンテンツを関連づけるためにメタデータを用いる (リンク追加予定)

テキストコンテンツとテキスト、グラフィック、音声版の補足的コンテンツを関連づけるためにダブリンコアのアクセシビリティ要素を用いる (リンク追加予定)

テキストコンテンツとテキスト、グラフィック、音声版の補足的コンテンツを関連づけるために ISO AfA のアクセシビリティ要素を用いる (リンク追加予定)

テキストコンテンツとテキスト、グラフィック、音声版の補足的コンテンツを関連づけるために IMS のアクセシビリティ要素を用いる (リンク追加予定)

メタデータを利用者に見えるようにする (リンク追加予定)

事例: 新しい科学的発見に関する高等レベルの記事の初等レベル以下及び初等レベルの版への URI をメタデータとして提供する

サイトとページのコンテンツに漸進的な複雑性を提供する (リンク追加予定)

達成基準 3.1.5 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.1.5 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.1.6 発音

文脈において、発音が分からないと単語の意味が不明瞭になる場合、その単語の明確な発音を特定するメカニズムが利用できる。 (レベル AAA)

達成基準 3.1.6 の達成方法及び失敗例 - 発音

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G120: 単語の直後に発音 (読み) を提供する

G121: 発音 (読み) にリンクする

そのコンテンツ特有の発音があったり、発音で意味が変わるような単語の発音に関する情報を含む G62: 用語集を提供する

G163: オフにすることが可能な標準的な発音区別符号を使用する

H62: ruby 要素を使用する (HTML) (XHTML 1.1)

3.1.6 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

利用者が単語の発音を聴くことができるように、音声ファイルで発音を提供する (リンク追加予定)

テキストコンテンツにあるすべての外国語の発音を検索するためのメカニズムを提供する (リンク追加予定)

テキストコンテンツにあるそれぞれの単語又は語句の発音を決定づけるメカニズムを提供する (リンク追加予定)

達成基準 3.1.6 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.1.6 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.2 予測可能

ウェブページの表示や挙動を予測可能にするこ

3.2.1 フォーカス時 

いずれのコンポーネントも、フォーカスを受け取ったときに コンテキストの変化を引き起こさない。 (レベル A)

達成基準 3.2.1 の達成方法及び失敗例 - フォーカス時

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G107: コンテキストの変化に対するトリガーとして、"focus" ではなく、"activate" を使用する

コンテキストの変化であるとは限らない。コンテンツの変化がコンテキストの変化ではない場合、この達成基準は自動的に満たされていることになる。

3.2.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

コンポーネントがフォーカスを受け取ったときに持続的な状態又は値の変更を発生させない、又はあらゆる変更をリセットするための代替手段を提供する (リンク追加予定)

G200: 必要なときにのみリンク先を新しいウィンドウ及びタブで開く

G201: 新しいウィンドウを開くときに、利用者へ事前に知らせる

3.2.2 入力時 

ユーザインタフェース コンポーネント の設定を変更することが、コンテキストの変化を自動的に引き起こさない。ただし、利用者が使用する前にその挙動を知らせてある場合を除く。 (レベル A)

達成基準 3.2.2 の達成方法及び失敗例 - 入力時

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

以下に挙げる技術特有の手法を用いて G80: コンテキストの変化を開始する送信ボタンを提供する

H32: 送信ボタンを提供する (HTML)

H84: アクションを実行するために、select 要素とともにボタンを使用する (HTML)

PDF15: PDF フォームで送信フォームアクションのある送信ボタンを提供する (PDF)

G13: コンテキストの変化を引き起こすフォームコントロールへの変更が行われる前に、何が起こるのかを説明する

SCR19: select 要素の onchange イベントは、コンテキストの変化を引き起こすことのないように使用する (Scripting)

コンテキストの変化であるとは限らない。コンテンツの変化がコンテキストの変化ではない場合、この達成基準は自動的に満たされていることになる。

3.2.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

G201: 新しいウィンドウを開くときに、利用者へ事前に知らせる

3.2.3 一貫したナビゲーション 

ウェブページ一式の中にある複数のウェブページ上で繰り返されているナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序で出現する。ただし、利用者が変更した場合は除く。 (レベル AA)

達成基準 3.2.3 の達成方法及び失敗例 - 一貫したナビゲーション

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

3.2.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

PDF14: PDF 文書内に連続するヘッダーとフッターを提供する (PDF)

PDF17: PDF 文書に一貫性のあるページ番号を指定する (PDF)

複数のウェブページの間で一貫性を保つためにテンプレートを利用する (リンク追加予定)

レイアウト、位置、階層、配置を作る (リンク追加予定)

達成基準 3.2.3 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.2.3 の失敗例とみなした、よくある間違いである。

F66: 達成基準 3.2.3 の失敗例 － 異なるページでさまざまな相対的な順序でナビゲーションリンクを提示している

3.2.4 一貫した識別性 

ウェブページ一式の中で同じ機能を有するコンポーネントは、一貫して識別できる。 (レベル AA)

達成基準 3.2.4 の達成方法及び失敗例 - 一貫した識別性

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G197: 同じ機能を有するコンテンツに対して、一貫したラベル、名前 (name) 及びテキストによる代替を使用する、かつ、達成基準 4.1.2 を満たすことのできる達成方法に従ってラベル、名前 (name)、テキストによる代替を提供する。

注記 1: 「一貫した」テキストによる代替は、常に「同一」であるとは限らない。例えば、次のウェブページへリンクするウェブページの下部にあるグラフィカルな矢印があるとする。テキストによる代替は、「4 ページに移動」と言うかもしれない。当然ながら、次のウェブページでそのままこのテキストによる代替を繰り返すのは適切ではない。「5 ページに移動」と言う方がより適切であろう。これらのテキストによる代替は同一ではないが、一貫しており、この達成基準に適合しているといえる。

注記 2: 単一の非テキストコンテンツのアイテムが、異なる機能のために使われることがある。そのような場合、異なるテキストによる代替が必要であり、用いられるべきである。チェックマーク、クロスマーク、そして交通標識などのアイコンを使用する際によく見られる例である。それらの機能は、ウェブページの文脈によって異なる可能性がある。チェックマークのアイコンは、その状況に応じて、「承認済」、「完了」、又は「あり」という意味で使われることがある。すべてのウェブページを通じてテキストによる代替を「チェックマーク」として用いても、利用者がそのアイコンの機能を理解することができない。同一の非テキストコンテンツが複数の機能を果たしている場合は、異なるテキストによる代替を用いることができる。

3.2.4 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

コンポーネントの機能及びそのコンポーネントを利用者が実行したときに何が起こるかが確実に分かるようなテキストによる代替を用いる (リンク追加予定)

可能な限り、特定の機能を表す非テキストコンテンツは同じものにする (リンク追加予定)

達成基準 3.2.4 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.2.4 の失敗例とみなした、よくある間違いである。

F31: 達成基準 3.2.4 の失敗例 － ウェブページ一式の中で異なるウェブページ上の同じ機能に対して、二つの異なるラベルを使用している

3.2.5 要求による変化 

コンテキストの変化は利用者の要求によってだけ生じるか、又は、そのような変化を止めるメカニズムが利用できる。 (レベル AAA)

達成基準 3.2.5 の達成方法及び失敗例 - 要求による変化

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

3.2.5 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

新しいウィンドウを開く際、target 属性を用いず一般的なハイパーリンクを提供する。(リンク追加予定) これは、多くのユーザエージェントではリンクを別のウィンドウ又は別のタブで開く機能を提供しているためである。

G200: 必要なときにのみリンク先を新しいウィンドウ及びタブで開く

達成基準 3.2.5 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.2.5 の失敗例とみなした、よくある間違いである。

F60: 達成基準 3.2.5 の失敗例 － 利用者が入力フィールドにテキストを入力したときに新しいウィンドウを開く

F61: 達成基準 3.2.5 の失敗例 － 利用者がコンテンツの中から無効にできない自動的な更新によってメインコンテンツの変更を完了する

F9: 達成基準 3.2.5 の失敗例 － 利用者がフォーカスをフォーム要素から移動するときにコンテキストを変化させる

F22: 達成基準 3.2.5 の失敗例 － 利用者が要求していないウィンドウを開く

F52: 達成基準 3.2.1 の失敗例 － 新しいページを読み込むのと同時に、新しいウィンドウを開いている

F41: 達成基準 2.2.1、達成基準 2.2.4、及び 達成基準 3.2.5 の失敗例 － ページを再読み込みするために、meta 要素リフレッシュを使用している

3.3 入力支援

利用者の間違いを防ぎ、修正を支援すること。

3.3.1 エラーの特定

入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエラーが利用者にテキストで説明される。 (レベル A)

達成基準 3.3.1 の達成方法及び失敗例 - エラーの特定

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 B: 利用者によって提供される情報が、特別なデータフォーマットか特定の値であることが求められる場合

ARIA18: エラーを特定するために aria-alertdialog を使用する (ARIA)

ARIA19: エラーを特定するために、ARIA role=alert 又はライブリージョン (Live Regions) を使用する (ARIA)

ARIA21: エラーフィールドを示すために aria-invalid を使用する (ARIA)

G84: 利用者が許可された値のリストにない情報を与えた場合に、テキストの説明を提供する

G85: 利用者の入力が要求されたフォーマット又は値の範囲外の場合に、テキストの説明を提供する

SCR18: クライアントサイドのバリデーション及びアラートを提供する (Scripting)

SCR32: クライアントサイドのバリデーションを提供し、DOM を介してエラーテキストを追加する (Scripting)

PDF22: PDF フォームにおいて、利用者の入力が必須形式又は値の範囲外となった場合に、そのことを明示する (PDF)

3.3.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

G139: 利用者がエラー箇所に移動できるメカニズムを作成する

送信されたフォームが正しいかをサーバーで確認する (リンク追加予定)

エラーの要約とともにフォームを再度表示する (リンク追加予定)

利用者が情報を入力したときにエラーを通知する (リンク追加予定)

ページタイトルにエラーを通知する情報を含める (リンク追加予定)

エラーが起きた場所をハイライトするか視覚的に強調する (リンク追加予定)

エラーを報告する際に、非テキストコンテンツにテキストを補足する (リンク追加予定)

G199: データが正常に送信されたときに、フィードバックを提供する

利用者の注意を集中させるために音を使う (リンク追加予定)

達成基準 3.3.1 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.1 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.3.2 ラベル又は説明 

コンテンツが利用者の入力を要求する場合は、ラベル又は説明文が提供されている。 (レベル A)

達成基準 3.3.2 の達成方法及び失敗例 - ラベル又は説明

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

G131: 説明的なラベルを提供する、かつ、次のどれか一つを用いる

ARIA1: ユーザインターフェース コントロールに対する説明ラベルを提供するために、aria-describedby プロパティを使用する (ARIA)

ARIA9: 複数のテキストノードをつなげて一つのラベルにするために、aria-labelledby を使用する (ARIA)

ARIA17: 関連するフォームコントロールを特定するために、グルーピングロールを使用する (ARIA)

G89: 期待されるデータ書式及び入力例を提供する

G184: フォーム又はテキストフィールド一式の先頭に、必須の入力を記述するテキストの説明を提供する

G162: 関係性を最大限に予測できるようにするためにラベルを配置する

G83: 入力が完了していない必須項目を特定するために、テキストの説明を提供する

H90: label 要素又は legend 要素を使用して、必須のフォームコントロールを明示する (HTML)

PDF5: PDF フォームで必須項目のフォームコントロールを示す (PDF)

H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する (HTML)

PDF10: PDF 文書内のインタラクティブなフォームコントロールにラベルを付ける (PDF)

H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する (HTML)

H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する (HTML)

G167: テキストフィールドの目的をラベル付けするために隣接するボタンを用いる

注記: 上記のリストの一番最後にある達成方法は、「最後の手段」として考え、その他の達成方法をページに適用することができないときだけに用いるべきである。より広範囲の利用者層にとってのアクセシビリティを向上させるという意味でも、一番最後の達成方法以外の達成方法を推奨する。

3.3.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

G13: コンテキストの変化を引き起こすフォームコントロールへの変更が行われる前に、何が起こるのかを説明する

線形なフォームのデザインを提供し、同様の項目をグループ化する (リンク追加予定)

達成基準 3.3.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.2 の失敗例とみなした、よくある間違いである。

F82: 達成基準 3.3.2 の失敗例 － 電話番号のフィールド一式を視覚的にフォーマットしているが、テキストラベルを含んでいない

3.3.3 エラー修正の提案 

入力エラーが自動的に検出され、修正方法を提案できる場合、その提案が利用者に提示される。ただし、セキュリティ又はコンテンツの目的を損なう場合は除く。 (レベル AA)

達成基準 3.3.3 の達成方法及び失敗例 - エラー修正の提案

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

注記: 二つ以上の状況が適用される場合もある。例えば、必須フィールドが特別なデータフォーマットを要求する場合である。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

3.3.3 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

G139: 利用者がエラー箇所に移動できるメカニズムを作成する

エラーメッセージを、ウェブページのその他のテキストと区別しやすくし、容易に理解できるようにする (リンク追加予定)

送信されたフォームが正しいかをサーバーで確認する (リンク追加予定)

必須の情報が入力されない場合に、必須フィールドを識別するだけでなく、正しい情報の説明と事例を提供する (リンク追加予定)

フォームフィールドと関連して、各入力エラーを訂正するための提案を繰り返し強調する (リンク追加予定)

提案するリストの各項目から、対応するフォームフィールドへスキップする方法を利用者に提供する (リンク追加予定)

変更の必要のあるフォームフィールドに対して、文脈に沿った追加のヘルプを提供する (リンク追加予定)

様々なフォーマットの入力データを受け付ける (リンク追加予定)

G199: データが正常に送信されたときに、フィードバックを提供する

利用者に提案を行う達成方法 (参考)

入力エラーの数についての情報を含むテキストの説明、各項目を訂正するための提案、そして、どのように進めるべきかの指示を提供する (リンク追加予定)

コンテンツの最初の項目 (あるいは最初の項目の一つ) を訂正するための提案を含むテキストの説明を提供する、又は、コンテンツの中でこの情報を強調する (リンク追加予定)

エラーを表示し、元のフォームの文脈に沿った提案をする (例えば、フォームのどこに入力エラーがあるかを再表示し、訂正のための提案がハイライトされ、元のフォームとの関連を表示する) (リンク追加予定)

HTML の達成方法 (参考)

必須のフォームフィールドで最初のテキストとして、データとデータフォーマットについて「正しい事例」を提供する (リンク追加予定)

正しいテキストを示唆するリンクをフォームフィールドの「近くで」提供するか、正しいテキストを示唆するテキスト自体をウェブページ上のフォームフィールドの「隣に」直接配置する (リンク追加予定)

クライアントサイドのスクリプトの達成方法 (参考)

SCR18: クライアントサイドのバリデーション及びアラートを提供する (Scripting)

クライアントサイドのバリデーションを提供し、DOM を介してエラーテキストを追加する (リンク追加予定)

フォームの送信動作をきっかけにクライアントサイドのバリデーションの機能を呼び出す (リンク追加予定)

達成基準 3.3.3 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.3 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.3.4 エラー回避（法的、金融、データ）

利用者にとって法律行為もしくは金融取引が生じる、利用者が制御可能なデータストレージシステム上のデータを変更もしくは削除する、又は利用者が試験の解答を送信するウェブページでは、次に挙げる事項のうち、少なくとも一つを満たしている: (レベル AA)

1.取消: 送信を取り消すことができる。

2.チェック: 利用者が入力したデータの入力エラーがチェックされ、利用者には修正する機会が提供される。

3.確認: 送信を完了する前に、利用者が情報の見直し、確認及び修正をするメカニズムが利用できる。

達成基準 3.3.4 の達成方法及び失敗例 - エラー回避 (法的、金融、データ)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

3.3.4 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

どのような不可逆のアクションが起きそうになっているかを利用者に知らせる (リンク追加予定)

SCR18: クライアントサイドのバリデーション及びアラートを提供する (Scripting)

エラーを含むフィールドにフォーカスを置く (リンク追加予定)

プルダウンメニューの各項目の最初では、同じ用語や同じ文字の組み合わせの使用を避ける (リンク追加予定)

G199: データが正常に送信されたときに、フィードバックを提供する

達成基準 3.3.4 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.4 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.3.5 ヘルプ 

コンテキストに応じたヘルプが利用できる。 (レベル AAA)

達成基準 3.3.5 の達成方法及び失敗例 - ヘルプ

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

3.3.5 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

H89: コンテキストに応じたヘルプを提供するために、title 属性を使用する (HTML)

文字のバイト数をチェックし、適切なバイト数へと自動変換する (リンク追加予定)

達成基準 3.3.5 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.5 の失敗例とみなした、よくある間違いである。

(今のところ、文書化された失敗例はない)

3.3.6 エラー回避（すべて） 

利用者に情報の送信を要求するウェブページでは、次に挙げる事項のうち、少なくとも一つを満たしている: (レベル AAA)

1.取消: 送信を取り消すことができる。

2.チェック: 利用者が入力したデータの入力エラーがチェックされ、利用者には修正する機会が提供される。

3.確認: 送信を完了する前に、利用者が情報の見直し、確認及び修正をするメカニズムが利用できる。

達成基準 3.3.6 の達成方法及び失敗例 - エラー回避 (すべて)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

利用者に情報の送信を要求するすべてのフォームにおいて、達成基準 3.3.4 を満たすことのできる達成方法に従うこと。

4 堅牢

4.1 互換性

現在及び将来の、支援技術を含むユーザエージェントとの互換性を最大化すること。

4.1.1 構文解析 

マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。 (レベル A)

達成基準 4.1.1 の達成方法及び失敗例 - 構文解析

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

4.1.1 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

(今のところ、文書化されていない)

達成基準 4.1.1 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 4.1.1 の失敗例とみなした、よくある間違いである。

F70: 達成基準 4.1.1 の失敗例 － 開始タグ及び終了タグ、又は属性のマークアップを誤って使用している

F77: 達成基準 4.1.1 の失敗例 － ID 型の値が重複している

4.1.2 名前（name）・役割（role）及び値（value） 

すべてのユーザインタフェース コンポーネント (フォームを構成する要素、リンク、スクリプトが生成するコンポーネントを含むがこれに限定されない) では、名前 (name) 及び役割 (role) は、プログラムによる解釈が可能である。又、状態、プロパティ、利用者が設定可能な値はプログラムによる設定が可能である。そして、支援技術を含むユーザエージェントが、これらの項目に対する変更通知を利用できる。 (レベル A)

達成基準 4.1.2 の達成方法及び失敗例 - 名前 (name) ・役割 (role) 及び値 (value)

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: マークアップ言語 (例えば HTML) で標準的なユーザインタフェース コンポーネントを使用している場合:

ARIA14: 可視ラベルが使用できない場所で不可視ラベルを提供するために、aria-label を使用する (ARIA)

ARIA16: ユーザインターフェース コントロールの名前 (name) を提供するために、aria-labelledby を使用する (ARIA)

下記の技術固有の達成方法を用いて、G108: 名前 (name) 及び役割 (role) を公開し、利用者が設定可能なプロパティを直接設定可能にして、変化の通知を提供するために、マークアップを用いる:

H91: HTML のフォームコントロール及びリンクを使用する (HTML)

H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する (HTML)

H64: frame 要素及び iframe 要素の title 属性を使用する (HTML)

H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する (HTML)

H88: 仕様に準じて HTML を使用する (HTML)

状況 B: スクリプト又はコードを用いて、マークアップ言語の標準的なユーザインタフェース コンポーネント再定義する場合:

名前 (name) 及び役割 (role) をユーザエージェントに提供し、利用者が設定可能なプロパティを直接設定可能にし、変化を通知する

ARIA16: ユーザインターフェース コントロールの名前 (name) を提供するために、aria-labelledby を使用する (ARIA)

状況 D: プログラミング言語で独自のインタフェースコンポーネントを作成する場合:

下記の技術固有の達成方法を用いて、G10: 名前 (name) 及び役割 (role) を取得し、利用者が設定可能なプロパティを直接設定可能にし、変化を通知するためにユーザエージェントが動作する、プラットフォームのアクセシビリティ API 機能をサポートするウェブコンテンツ技術を用いて、コンポーネントを作成する:

ARIA4: ユーザインターフェース コンポーネントの役割 (role) を明示するために、WAI-ARIA ロールを使用する (ARIA)

ARIA5: ユーザインターフェース コンポーネントの状態 (state) を明示するために、WAI-ARIA ステート及びプロパティ属性を使用する (ARIA)

ARIA16: ユーザインターフェース コントロールの名前 (name) を提供するために、aria-labelledby を使用する (ARIA)

4.1.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

暗黙のラベルを持たないすべてのフォーム コントロールにラベルを付加する (リンク追加予定)

達成基準 4.1.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 4.1.2 の失敗例とみなした、よくある間違いである。

F59: 達成基準 4.1.2 の失敗例 － コントロールに役割 (role) を提供せずに、HTML の div 要素又は span 要素をユーザインタフェースコントロールにするために、スクリプトを用いている

注記: この失敗例は、将来的に DHTML ロードマップの達成方法を用いて問題が解決されるかもしれない。

F15: 達成基準 4.1.2 の失敗例 － ウェブコンテンツ技術のアクセシビリティ API を用いていない、又は不完全なカスタムコントロールを実装している

F20: 達成基準 1.1.1 及び 達成基準 4.1.2 の失敗例 － 非テキストコンテンツへの変更が発生するときにテキストによる代替を更新していない

F68: 達成基準 4.1.2 の失敗例 － プログラムによる解釈が可能な名前 (name) を持っていないユーザインタフェース コントロール

F79: 達成基準 4.1.2 の失敗例 － プログラムによる解釈が可能ではない、又は変更の通知が利用可能ではないようなユーザインタフェース コンポーネントのフォーカス状態

F86: 達成基準 4.1.2 の失敗例 － アメリカの電話番号など、複数に分けられたテキストフィールドのそれぞれに対して、名前 (name) が提供されていない

F89: 達成基準 2.4.4、達成基準 2.4.9、及び 達成基準 4.1.2 の失敗例 － リンクで唯一のコンテンツである画像にアクセシブルな名前 (accessible name) が提供されていない

チェッカー

ある程度、A11ycとNu Html Checkerでチェックすることであとは目視、視聴のものかと・・あとLighthouseである程度のコントラストのチェックしてくれます。

miChecker

https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

A11yc アクセシビリティ チェック サービス

githubで自サーバーにいれることも可能です。報告書が生成できるので便利です。

https://a11yc.com/validator/

https://github.com/jidaikobo-shibata/a11yc

HTMLバリデーションツール

https://validator.w3.org/nu/

昔はW3CのW3C Markup Validation Serviceでしたが、WHATWGに代わってNu Html Checker

4.1.1 構文解析はこちらで、チェックすれば問題ありません。

Chrome、Edgeの拡張機能Lighthouse

アクセシビリティの項目をクリアすることである程度チェックできます。

A11ycと併用したほうがよいです。

NVDA

NonVisual Desktop Access (NVDA) は無料（オープンソース GPLv2）のWindows 用スクリーンリーダー（音声読み上げソフト）です。

最初から付属している音声エンジン「HARUKA Desktop」 には、読めない単語があり、スクリーンリーダーとして使うには不十分らしく。

改善するために、追加辞書があります。下記

バリアフリーパソコンサポート「まほろば」さん

https://petile.sakura.ne.jp/mahoroba/e1808.html

NVDAがどのようなものが読み上げまちがえがあるなどわかります。

PowerCMS 8341 Movable Type JIS X 8341-3チェッカー

https://www.powercms.jp/news/powercms-8341.html

バリデーション・アクセシビリティ チェックができるようです。。お値段が高いので・・一般企業に導入は厳しそうです・・

JIS X 8341-3:2016 試験実施ガイドライン（達成基準チェックリストの例）

https://waic.jp/docs/jis2016/test-guidelines/202012/gcl_example.html

音声及び映像がない場合、備考に音声及び映像コンテンツ無しにして適合で問題ありません。

エラー回避（法的，金融及びデータ）は対応していなければ　条件に該当するコンテンツ無しで適合で問題ありません。

入力フォームも同様でホームページ上になければ同様です。

国は、公的機関等のホームページのウェブアクセシビリティ（高齢者や障害者を含めて、誰もがホームページ等で提供される情報や機能を支障なく利用できること。）対応について、 平成29年度末までに「JIS x8341-3:2016」の適合レベルAAに準拠し、かつ、その結果を公表することを求めています。

WAI-ARIAのサンプルHTML


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      An example that was implemented with this template can be found in: content/patterns/checkbox/examples/checkbox.html
      This template is for examples where only one implementation of the design pattern is demonstrated.
      If you use this template file, rename it to reflect the name of the example, e.g., SimpleCheckbox.html.
      Similarly, rename the javascript and CSS stub files in the js and css subdirectories and update the head element of this file.
    -->
    <!--
      Give this example implementation a name and put it in the title element,
      e.g., "Checkbox" if implementing the checkbox pattern.
      The name should be unique if the pattern will have multiple implementations,
      e.g., "Simple Two-State Checkbox" or "Three-State Checkbox".
    -->
    <title>EXAMPLE_NAME Example</title>
    <!-- When using this template do not modify the shared JS and CSS -->
    <!-- Core JS and CSS shared by all examples -->
    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
    <link rel="stylesheet" href="../../../shared/css/core.css">
    <script src="../../../shared/js/examples.js"></script>
    <script src="../../../shared/js/highlight.pack.js"></script>
    <script src="../../../shared/js/app.js"></script>
    <script src="../../../shared/js/skipto.js"></script>
    <!-- JS and CSS for this example -->
    <!--
      When developing an example implementation of a design pattern,
      these files will contain the CSS and JS for the example implementation.
      Rename these files to match the name of the example, e.g., checkbox.js if implementing the checkbox design pattern.
    -->
    <link href="css/example_name.css" rel="stylesheet">
    <script src="js/example_name.js"></script>
  </head>
  <body>
    <nav aria-label="Related Links" class="feedback">
      <ul>
        <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
        <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
        <li><a href="project_url">Related Issues</a></li>
        <li><a href="../../#pattern_id">Design Pattern</a></li>
      </ul>
    </nav>
    <main>
      <!--  Repeat the name of the example in this H1  -->
      <h1>EXAMPLE_NAME Example</h1>
      <section>
        <h2>About This Example</h2>
        <p>
          <!-- Provide an overview of the example where the first sentence provides a link to the section of aria-practices.html that describes the pattern this example implements. -->
          Replace this paragraph with an overview of the example that is something like the following. The below example section demonstrates a simple checkbox that implements the
          <a href="../../#checkbox">design pattern for checkbox.</a>
          This example uses ... summarize salient techniques )
        </p>
        <p>Similar examples include:</p>
        <ul>
          <li><a href="#">example name</a>: summarize what this related example demonstrates.</li>
          <!--  list other examples that implement the same design pattern. -->
        </ul>
      </section>
      <section>
        <div class="example-header">
          <h2 id="ex_label">Example</h2>
        </div>
        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
        <!--
          Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
          The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
          If you change the ID of this div, be sure to update the parameters of the sourceCode.add() function call, which is made following the div with id="sc1" where the HTML is render.
          The div for the rendered HTML source is in the last section of the page.
        -->
        <div id="ex1">
          <!-- Replace content of this div with the example.  -->
          <p>This is the place where the reader will experience the functioning example.</p>
          <ul>
            <li>The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.</li>
            <li>When developing an example implementation for this guide, please follow the <a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>.</li>
            <!--  Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo.  -->
            <script type="text/javascript">
              /* eslint-disable */
              //  Javascript relevant to example
              var i;
              var str = 'text';
              for (i = 0; i < str.length; i++) {
                console.log(str[i]);
                var code = '<p>Hello World!</p>';
              }
            </script>
          </ul>
        </div>
        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
      </section>
      <section>
        <h2>Accessibility Features</h2>
        <p class="annotate">Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features demonstrated in this implementation, such as:</p>
        <ol>
          <li>What distinguishes this example from related examples.</li>
          <li>Keyboard shortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.</li>
          <li>Do not include information that would be repeated in the following keyboard and attribute sections.</li>
          <li>Delete this section if not needed.</li>
        </ol>
      </section>
      <section>
        <h2 id="kbd_label">Keyboard Support</h2>
        <!--
          List the keys supported in this example.
          Remember to:
          Use kbd tags,e.g. <kbd>KeyName</kbd>.
          Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
          Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
          Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
          One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
          Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
        -->
        <table aria-labelledby="kbd_label" class="def">
          <thead>
            <tr>
              <th>Key</th>
              <th>Function</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th><kbd>KeyName</kbd></th>
              <td>
                Description of key function.
                <!--  Do not use a list if there is only one function for the key.  -->
              </td>
            </tr>
            <tr>
              <th><kbd>KeyName</kbd></th>
              <td>
                <ul>
                  <li>If condition 1, performs function 1.</li>
                  <li>If condition 2, performs function 2.</li>
                  <li>Only use a list if multiple statements are needed.</li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
        <!--
          Update this table to describe how roles, properties, states, and tabindex are used in this example.
        -->
        <table aria-labelledby="rps_label" class="data attributes">
          <thead>
            <tr>
              <th scope="col">Role</th>
              <th scope="col">Attribute</th>
              <th scope="col">Element</th>
              <th scope="col">Usage</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row"><code>RoleName</code></th>
              <td><!--  Leave this cell blank in rows where a role is being described. --></td>
              <td><code>HTML_ELEMENT</code></td>
              <td>Describe usage/purpose, e.g., indicates the focusable element that serves as the ...</td>
            </tr>
            <tr>
              <td>
                <!--
                  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
                  Make a row like this for each attribute/value pair.
                -->
              </td>
              <th scope="row">
                <code>AttributeName=<q>AttributeValue</q></code>
              </th>
              <td><code>HTML_ELEMENT</code></td>
              <td>
                <ul>
                  <li>explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.</li>
                  <li>If making multiple statements, use list for brevity and clarity</li>
                  <li>Do not make a single item list.</li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h2>Javascript and CSS Source Code</h2>
        <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
        <ul id="css_js_files">
          <li>
            CSS:
            <a href="css/example_name.css" type="text/css">example_name.css</a>
          </li>
          <li>
            Javascript:
            <a href="js/example_name.js" type="text/javascript">example_name.js</a>
          </li>
        </ul>
      </section>
      <section>
        <h2 id="sc1_label">HTML Source Code</h2>
        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
        <pre><code id="sc1"></code></pre>
        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
        <script>
          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
          sourceCode.make();
        </script>
      </section>
    </main>
  </body>
</html>

さいごに

ページ長すぎ・・・・・

A11yc、バリデーションでsectionでH*でワーニングでる。。。

関連

アクセシビリティに配慮した軽量・高機能スライダー　Splide

記事
https://www.omakase.net/blog/2023/04/splide.html

アクセシビリティに配慮したクロスブラウザHTML5メディアプレーヤー Able Player

記事
https://www.omakase.net/blog/2023/04/html5-able-player.html

関連記事