axe DevToolsのルールと当ガイドラインの対応

ここでは、チェックの際に利用するaxe DevToolsが出力する情報と、当ガイドラインの対応について記します。

なお、axe DevToolsについては、以下も合わせて参照してください：

ここで掲載している情報は、axe-coreのGitHubリポジトリーの以下に示す時点におけるdevelopブランチの内容に基づいて自動的に生成したものです。axe DevToolsの内容とは一致していない場合もあることにご注意ください。

バージョン

4.4.1

更新日時

2022-03-15 18:43:28++0900

アクティブな<area>要素には代替テキストが存在しなければなりません

イメージマップの<area>要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

要素には許可されているARIA属性のみを使用しなければなりません

要素のロールにARIA属性が許可されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIAコマンドにはアクセシブルな名前がなければなりません

すべてのARIA button、link、menuitemにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ドキュメント本体にaria-hidden='true'が存在してはなりません

ドキュメント本体にaria-hidden='true'が存在していないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIA hidden要素にフォーカス可能な要素を含んではなりません

aria-hidden要素にフォーカス可能な要素が含まれていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIA入力欄にアクセシブルな名前があります

すべてのARIA入力欄にアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIA meterノードにはアクセシブルな名前がなければなりません

すべてのARIA meterノードにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIA progressbarノードにはアクセシブルな名前がなければなりません

すべてのARIA progressbarノードにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

必須のARIA属性が提供されていなければなりません

ARIAロールのある要素にすべての必須ARIA属性が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

特定のARIAロールには特定の子が含まれていなければなりません

子ロールを必須とするARIAロールが指定された要素に、それらが含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

特定のARIAロールは特定の親に含まれていなければなりません

親ロールを必須とするARIAロールが指定された要素に、それらが含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

aria-roledescriptionはセマンティックなロールを持った要素に使用します

aria-roledescriptionが暗黙的もしくは明示的なロールを持った要素に使用されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

使用されているARIAロールは有効な値に一致しなければなりません

すべてのロール属性が指定された要素で、有効な値が使用されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIAトグル欄にアクセシブルな名前があります

すべてのARIAトグル欄にアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIA tooltipノードにはアクセシブルな名前がなければなりません

すべてのARIA tooltipノードにはアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIA属性は有効な名前に一致しなければなりません

aria-で始まる属性が有効なARIA属性であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIA属性は有効な値に一致しなければなりません

すべてのARIA属性に有効な値が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<audio>要素にはキャプショントラックが存在しなければなりません

<audio>要素にキャプションが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

インラインのテキスト間隔設定はカスタムスタイルシートによって調整可能でなければなりません

style属性で指定されたテキストの間隔は、カスタムスタイルシートにより調整可能であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ボタンには認識可能なテキストが存在しなければなりません

ボタンに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ページには繰り返されるブロックをスキップする手段が存在しなければなりません

各ページに少なくとも1つ、ユーザーがナビゲーション部分をスキップして直接本文へ移動できるメカニズムが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

要素には十分な色のコントラストがなければなりません

前景色と背景色のコントラストがWCAG 2のAAコントラスト比のしきい値を満たすことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

要素には十分な色のコントラストがなければなりません

前景色と背景色のコントラストがWCAG 2のAAAコントラスト比のしきい値を満たすことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ディスプレイの向きを固定するためにCSSメディアクエリーは使用されていません

コンテンツが特定のディスプレイの向きに固定されていないこと、およびコンテンツがすべてのディスプレイの向きで操作可能なことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<dl>要素は、適切な順序で並べられた<dt>および<dd>グループ、<script>要素または<template>要素のみを直接含んでいなければなりません

<dl>要素の構造が正しいことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<dt>および<dd>要素は<dl>に含まれていなければなりません

<dt>および<dd>要素が<dl>に含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ドキュメントにはナビゲーションを補助するために<title>要素がなければなりません

各HTMLドキュメントに空ではない<title>要素が含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

id属性値は一意でなければなりません

すべてのid属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

活性要素のIDは一意でなければなりません

活性要素のid属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

ARIAおよびラベルに使用されているIDは一意でなければなりません

ARIAおよびラベルに使用されているすべてのid属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

テーブルのヘッダーは空にしてはなりません

テーブルのヘッダーに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

複数のlabel要素をフォームフィールドに付与するべきではありません

フォームフィールドに複数のlabel要素が存在しないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

tabindex=-1が指定されているフレームには、フォーカス可能なコンテンツが含まれていてはなりません

tabindex=-1が指定されている<frame>と<iframe>要素が、フォーカス可能なコンテンツを含まないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

フレームにはtitle属性がなければなりません

<iframe>および<frame>要素に空ではないtitle属性が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<html>要素にはlang属性がなければなりません

すべてのHTMLドキュメントにlang属性が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<html>要素のlang属性には有効な値がなければなりません

<html>要素のlang属性に有効な値があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

HTML要素に指定されたlangおよびxml:lang属性は同じ基本言語を持たなければなりません

HTML要素に指定された有効なlangおよびxml:lang属性の両方がページの基本言語と一致することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

画像には代替テキストがなければなりません

<img>要素に代替テキストが存在する、またはnoneまたはpresentationのロールが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

入力ボタンには認識可能なテキストが存在しなければなりません

入力ボタンに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

画像ボタンには代替テキストがなければなりません

<input type="image">要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

フォーム要素にはラベルがなければなりません

すべてのフォーム要素にラベルが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

要素の視認できるテキストはそれらのアクセシブルな名前の一部でなければなりません

コンテンツによってラベル付けされた要素は、それらの視認できるテキストがアクセシブルな名前の一部になっていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

リンクは色に依存しない方法で周囲のテキストと区別できなければなりません

色に依存することなくリンクを区別できます

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<ul>および<ol>の直下には<li>、<script>または<template>要素のみを含まなければなりません

リストが正しく構造化されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<li>要素は<ul>または<ol>内に含まれていなければなりません

<li>要素がセマンティックに使用されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<marquee>要素は非推奨のため、使用してはなりません

<marquee>要素が使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

制限時間のある更新が存在してはなりません

<meta http-equiv="refresh">が使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

対話的なコントロールがネストされていないことを確認します

ネストされた対話的なコントロールはスクリーン・リーダーで読み上げられません

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<video>または<audio>要素は音声を自動再生しません

<video>または<audio>要素が音声を停止またはミュートするコントロールなしに音声を3秒より長く自動再生しないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<object>要素には代替テキストがなければなりません

<object>要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

p要素を見出しとしてスタイル付けするために太字、イタリック体、およびフォントサイズを使用しません

見出しのスタイル調整のためにp要素が使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

[role='img']要素に代替テキストが必要です

[role='img']要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

スクロール可能な領域にキーボードでアクセスできるようにします

スクロール可能なコンテンツを持つ要素はキーボードでアクセスできるようにするべきです

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

select要素にはアクセシブルな名前がなければなりません

select要素にはアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

サーバーサイドのイメージマップを使用してはなりません

サーバーサイドのイメージマップが使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

imgロールを持つsvg要素に代替テキストが存在します

img、graphics-documentまたはgraphics-symbolロールを持つsvg要素にアクセシブルなテキストがあることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

データテーブルにキャプションをつけるためにデータまたはヘッダーセルを用いるべきではありません

キャプション付きのテーブルが<caption>要素を用いていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

3×3より大きいテーブルの空ではないtd要素はテーブルヘッダーと関連づいていなければなりません

大きなテーブルの空ではないデータセルに1つかそれ以上のテーブルヘッダーが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

table要素内のheaders属性を使用するすべてのセルは同じ表内の他のセルのみを参照しなければなりません

ヘッダーを使用しているテーブル内の各セルが、そのテーブル内の他のセルを参照していることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

すべてのth要素およびrole=columnheader/rowheaderを持つ要素にはそれらが説明するデータセルがなければなりません

データテーブルのテーブルヘッダーがデータセルを参照していることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

lang属性には有効な値がなければなりません

lang属性に有効な値が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

<video>要素にはキャプションがなければなりません

<video>要素にキャプションが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

関連ガイドライン

autocomplete属性は正しく使用しなければなりません

autocomplete属性が正しく、かつフォームフィールドに対して適切であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

accesskey属性値は一意でなければなりません

すべてのaccesskey属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

ARIAロールは要素に対して適切でなければなりません

role属性の値が要素に対して適切であることを確認します

参考：Deque Universityの解説（英語）

ARIA dialogとalertdialogノードにはアクセシブルな名前がなければなりません

すべてのARIA dialog、alertdialogノードにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

"role=text"が指定されている要素には、フォーカス可能な子孫が含まれていてはなりません

role="text"が指定されている要素にフォーカス可能な子孫がないことを確認します

参考：Deque Universityの解説（英語）

ARIA treeitemノードにはアクセシブルな名前がなければなりません

すべてのARIA treeitemノードにはアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

見出しは空にしてはなりません

見出しに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

フォーカス順序に含まれる要素には、インタラクティブコンテンツに適したロールが必要です

フォーカス順序に含まれる要素に適切なロールがあることを確認します

参考：Deque Universityの解説（英語）

フレームはaxe-coreでテストする必要があります

<iframe>および<frame>要素にaxe-coreスクリプトが含まれていることを確認します

参考：Deque Universityの解説（英語）

フレームには一意のtitle属性がなければなりません

<iframe>および<frame>要素に一意のtitle属性が含まれていることを確認します

参考：Deque Universityの解説（英語）

見出しのレベルは1つずつ増加させなければなりません

見出しの順序が意味的に正しいことを確認します

参考：Deque Universityの解説（英語）

ページ上の隠れているコンテンツは分析できません

隠れているコンテンツについてユーザーに通知します

参考：Deque Universityの解説（英語）

画像の代替テキストはテキストとして繰り返されるべきではありません

画像の代替がテキストとして繰り返されていないことを確認します

参考：Deque Universityの解説（英語）

フォーム要素には視認できるラベルがなければなりません

すべてのフォーム要素がtitleまたはaria-describedby属性を使用して単独でラベル付けされていないことを確認します

参考：Deque Universityの解説（英語）

他の要素にasideを含んではなりません

complementaryランドマークあるいはasideがトップレベルにあることを確認します

参考：Deque Universityの解説（英語）

contentinfoランドマークは他のランドマークに含まれるべきではありません

contentinfoランドマークがトップレベルにあることを確認します

参考：Deque Universityの解説（英語）

mainランドマークは他のランドマークに含まれるべきではありません

mainランドマークがトップレベルにあることを確認します

参考：Deque Universityの解説（英語）

ドキュメントに複数のbannerランドマークが存在してはなりません

ドキュメント内のbannerランドマークが最大で1つのみであることを確認します

参考：Deque Universityの解説（英語）

ドキュメントに複数のcontentinfoランドマークが存在してはなりません

ドキュメント内のcontentinfoランドマークが最大で1つのみであることを確認します

参考：Deque Universityの解説（英語）

ドキュメントに複数のmainランドマークが存在してはなりません

ドキュメント内のmainランドマークが最大で1つのみであることを確認します

参考：Deque Universityの解説（英語）

ドキュメントにはmainランドマークが1つ含まれていなければなりません

ドキュメントのランドマークが1つのみであること、およびページ内の各iframeのランドマークが最大で1つであることを確認します

参考：Deque Universityの解説（英語）

ランドマークが一意であることを確認します

ランドマークは一意のロール又はロール／ラベル／タイトル (例: アクセシブルな名前) の組み合わせがなければなりません

参考：Deque Universityの解説（英語）

ズーミングや拡大縮小は無効にしてはなりません

<meta name="viewport">がテキストの拡大縮小およびズーミングを無効化しないことを確認します

参考：Deque Universityの解説（英語）

ユーザーがズームをしてテキストを最大500％まで拡大できるようにするべきです

<meta name="viewport">で大幅に拡大縮小できることを確認します

参考：Deque Universityの解説（英語）

ページにはレベル1の見出しが含まれていなければなりません

ページ、またはそのフレームの少なくとも1つにはレベル1の見出しが含まれていることを確認します

参考：Deque Universityの解説（英語）

roleがnoneまたはpresentationの要素をマークしなければなりません

roleがnoneまたはpresentationで、roleの競合の解決が必要な要素をマークします

参考：Deque Universityの解説（英語）

ページのすべてのコンテンツはlandmarkに含まれていなければなりません

ページのすべてのコンテンツがlandmarkに含まれていることを確認します

参考：Deque Universityの解説（英語）

scope属性は正しく使用されなければなりません

scope属性がテーブルで正しく使用されていることを確認します

参考：Deque Universityの解説（英語）

要素に0より大きいtabindex属性を指定するべきではありません

tabindex属性値が0より大きくないことを確認します

参考：Deque Universityの解説（英語）

<caption>要素にsummary属性と同じテキストを含んではなりません

テーブルのサマリーとキャプションが同一ではないことを確認します

参考：Deque Universityの解説（英語）