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

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

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

チェックID：0021

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

文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

その他の場合：4.5:1以上（[SHOULD] 7:1以上）

「要素には十分な色のコントラストがなければなりません」という問題が出ないことを確認する。

ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。

マウスホバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
大きいテキストのコントラスト比が3:1以上4.5:1未満の場合
- freeeの場合日本語テキストを想定しているため、「大きいテキスト」を30px（22pt）以上または22px（18pt）以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、その間のサイズではコントラスト不足を検知できない
テキスト以外のコントラスト比が不足している場合
- アイコン、画像、画像化されたテキスト、ボタンやフィールドの枠線など
半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合
要素が重なっていて背景色と前景色の特定が難しい場合

チェックID：0441

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

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

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

チェックID：0561

設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

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

チェックID：0951

スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

注：デスクトップWebの場合、ラベルをクリックするとそのラベルが関連付けられているフォーム・コントロールにフォーカスが移動する。

「フォーム要素にはラベルがなければなりません」という問題が出ないことを確認する。