axe DevToolsを用いたチェック実施方法の例
ここでは、各チェック内容で示したチェック方法の例について、axe DevToolsを用いて実施するものをまとめて記しています。
axe DevToolsのインストールや基本的な使用方法については、axe DevToolsを使用したアクセシビリティー・チェックを参照してください。また、axe DevToolsのルールと当ガイドラインの対応も合わせて参照してください。
チェックID：0021
テキストの表示色と背景色には、充分なコントラスト比が確保されている。
ID 0021-axe-01
axe DevToolsで「要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (Elements must meet minimum color contrast ratio thresholds)」という問題が出ないことを確認する。
ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。
マウスオーバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
大きいテキストのコントラスト比が3:1以上4.5:1未満の場合
freeeの場合日本語テキストを想定しているため、「大きいテキスト」を29px（22pt）以上または24px（18pt）以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、18pt以上22pt未満（太字の場合は14pt以上18pt未満）の日本語のテキストについて、Axe DevToolsはコントラスト不足を検知できない
テキスト以外のコントラスト比が不足している場合
アイコン、画像、画像化されたテキスト、ボタンや入力フィールドの枠線など
半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合
要素が重なっていて背景色と前景色の特定が難しい場合
チェックID：0411
アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。
ID 0411-axe-01
axe DevToolsで「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ないことを確認する。
チェックID：0441
画像の説明がスクリーン・リーダーで適切に読み上げられる。
ID 0441-axe-01
axe DevToolsで「画像には代替テキストがなければなりません (Images must have alternate text)」という問題が出ないことを確認する。
ただし、画像に何かしらの代替テキストが入っていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。
チェックID：0561
見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。
ID 0561-axe-01
axe DevToolsで以下のいずれの問題も出ないことを確認する。
チェックID：0621
スクリーン・リーダーで読み上げたとき、適切な言語の音声エンジンで読み上げられる。
ID 0621-axe-01
axe DevToolsで「<html>要素にはlang属性がなければなりません (<html> element must have a lang attribute)」という問題が出ないことを確認する。
この問題が出た場合は、そのページの<html>要素の記述を<html lang="ja">（主に利用されている言語が日本語の場合）のように修正する必要があります。
チェックID：0681
スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。
ID 0681-axe-01
axe DevToolsで以下のいずれの問題も出ないことを確認する。
チェックID：0682
ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。
ID 0682-axe-01
画面上に表示されているコンテンツに対して、axe DevToolsで以下のいずれの問題も発生しないことを確認する。（非表示箇所に対して以下の問題が発生しても、通常は問題ない。）
bannerランドマークは他のランドマークに含まれるべきではありません (Banner landmark should not be contained in another landmark)
asideは他の要素に含まれるべきではありません (Aside should not be contained in another landmark)
mainランドマークは他のランドマークに含まれるべきではありません (Main landmark should not be contained in another landmark)
ドキュメントに複数のbannerランドマークが存在してはなりません (Document should not have more than one banner landmark)
ドキュメントに複数のcontentinfoランドマークが存在してはなりません (Document should not have more than one contentinfo landmark)
ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)
ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)
ページのすべてのコンテンツはlandmarkに含まれていなければなりません (All page content should be contained by landmarks)
チェックID：0951
エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。
ID 0951-axe-01
axe DevToolsで以下のいずれの問題も発生しないことを確認する。