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

axeのインストールや基本的な使用方法については、axeを使用したアクセシビリティー・チェックを参照してください。

チェックID: 0021 ¶

充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。

アイコンと背景色

画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色

画像および画像化されたテキストとその隣接領域

テキストと背景色

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

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

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

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

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

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

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

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

フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

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

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