An English translation of this page is available.

axe DevToolsを用いたチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、axe DevToolsを用いて実施するものをまとめて記しています。

axe DevToolsのインストールや基本的な使用方法については、axe DevToolsを使用したアクセシビリティー・チェックを参照してください。また、axe DevToolsのルールと当ガイドラインの対応も合わせて参照してください。

チェックID：0021

テキストの表示色と背景色には、充分なコントラスト比が確保されている。

「要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (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

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ないことを確認する。

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

「画像には代替テキストがなければなりません (Images must have alternate text)」という問題が出ないことを確認する。

ただし、画像に何かしらの代替テキストが入っていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

以下のいずれの問題も出ないことを確認する。

チェックID：0621

スクリーン・リーダーで読み上げたとき、適切な言語の音声エンジンで読み上げられる。

「<html>要素にはlang属性がなければなりません (<html> element must have a lang attribute)」という問題が出ないことを確認する。

この問題が出た場合は、そのページの<html>要素の記述を<html lang="ja">（主に利用されている言語が日本語の場合）のように修正する必要があります。

チェックID：0682

ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。

画面上に表示されているコンテンツに対して、以下のいずれの問題も発生しないことを確認する。（非表示箇所に対して以下の問題が発生しても、通常は問題ない。）

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

以下のいずれの問題も発生しないことを確認する。