画像

これらのガイドラインは、画像に関するものです。なお、すべてのガイドラインが[MUST]です。

[MUST]画像の説明の提供

画像に関する過不足のない説明をテキストで提供する。

意図

視覚障害者が画像の存在を認知し、内容を理解できるようにする。

対応するWCAG 2.1の達成基準

SC 1.1.1：

参考情報

チェック内容

チェックID：0421

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

  • 画像に関する簡潔で過不足ない説明が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

チェックID：0431

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

  • 画像に関する簡潔で過不足ない説明が付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または関連付けられている。

実装方法の例：簡潔な説明の付加
Web

  • alt属性またはaria-label属性で指定する

  • 表示されているテキストを簡潔な説明として利用する場合は、aria-labelledby属性でそのテキストと画像を関連付ける

iOS

  • accessibilityLabelで指定する

Android

  • contentDescriptionで指定する

実装方法の例：詳細な説明を付加する
Web

  • 詳細な説明と画像がDOMツリー上で離れている場合などには、aria-describedby属性で関連付ける

チェックID：0441

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

NVDAによるチェック実施方法の例

  • 以下の操作をしたとき、画像に関する完結な読み上げがされることを確認する。

    • ブラウズ・モードでカーソルキー操作をして当該箇所を読み上げさせたとき

    • その画像がリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき

  • 詳細な説明が必要な画像の場合、以下のいずれかを満たしている

    • 当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでのカーソルキー操作で読み上げさせることができる

    • ブラウズ・モードで次/前の画像への移動（G/Shift+Gキー）を実行して当該の画像を読み上げさせたときに、詳細な説明が読み上げられる

axe DevToolsによるチェック実施方法の例

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

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

iOS VoiceOverによるチェック実施方法の例

  • 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認するる。

参考：1本指による右および左方向へのフリック

Android TalkBackによるチェック実施方法の例

  • 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認する。

[MUST]装飾目的の画像の無視

純粋な装飾目的の画像は、スクリーン・リーダーなどの支援技術が無視するようにする。

意図

不要な情報が提示されないようにすることで、視覚障害者などの情報取得をスムースにする。

対応するWCAG 2.1の達成基準

SC 1.1.1：

参考情報

チェック内容

チェックID：0451

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

チェックID：0461

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

情報や機能性を一切持たない画像は、スクリーン・リーダーで無視されるようになっている。

実装方法の例：スクリーン・リーダーに無視させる
Web

  • 空のalt属性（alt=""）を指定、または

  • role="presentation"を指定。

iOS

  • isAccessibilityElement`をfalseにする。

Android

  • importantForAccessibilityをnoにする。

チェックID：0471

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

NVDAによるチェック実施方法の例

ブラウズ・モードでのカーソルキー操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない

iOS VoiceOverによるチェック実施方法の例

1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

参考：1本指による右および左方向へのフリック

Android TalkBackによるチェック実施方法の例

1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

[MUST]複数の視覚的要素を用いた表現

特定の色に何らかの意味を持たせている場合、形状、模様など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。

意図

視覚障害者や色弱者が、コンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

SC 1.4.1：

参考情報

チェック内容

チェックID：0031

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

チェックID：0051

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

[MUST]隣接領域とのコントラスト比の確保

画像の隣接領域の色とのコントラスト比を3:1以上にする。

意図

ロービジョン者が、コンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

SC 1.4.11：

参考情報

チェック内容

チェックID：0001

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。

  • アイコンと背景色

  • 画像内の重要な情報とその背景色

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

[MUST]画像内のテキストのコントラスト比

画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストを確保する。

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

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

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

意図

ロービジョン者が、コンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

SC 1.4.3：
SC 1.4.6：

参考情報

チェック内容

チェックID：0002

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

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

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

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