画像

これらのガイドラインは、画像に関するものです。

画像の説明の提供

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.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]

チェック手順:Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

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

NVDAによるチェック方法の例
  • 以下の操作をしたとき、画像に関する簡潔な読み上げがされることを確認する。

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

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

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

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

    • ブラウズ・モードで矢印キーを操作して当該画像を読み上げさせたとき、詳細な説明が読み上げられる

  • いずれの場合も、説明が画像の内容を適切に表していることを確認する。

参考動画:画像の説明【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例
  • 以下の操作をしたとき、画像に関する簡潔な読み上げがされることを確認する。

    • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該箇所を読み上げさせたとき

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

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

    • 当該画像の直前または直後に詳細な説明があり、VOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせることができる

    • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該画像を読み上げさせたとき、詳細な説明が読み上げられる

  • いずれの場合も、説明が画像の内容を適切に表していることを確認する。

チェック手順:モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

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

  • 読み上げられる説明が画像の内容を適切に表していることを確認する。

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

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

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

  • 読み上げられる説明が画像の内容を適切に表していることを確認する。

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

装飾目的の画像の無視

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID:0451

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID:0461

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

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

実装方法の例:スクリーン・リーダーに無視させる
Web
  • 空のalt属性(alt="")を指定、または

  • role="presentation"を指定。

iOS
  • isAccessibilityElementfalseにする。

Android
  • importantForAccessibilitynoにする。

チェックID:0471

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順:Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

参考動画:情報や機能性を持たない画像【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例

VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされないことを確認する。

チェック手順:モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

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

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

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

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

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID:0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID:0051

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順:Web、モバイル

グレイスケール表示にして、以下を確認する:

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

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

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID:0001

アイコンや画像に関して、3:1以上のコントラスト比が確保されている。

  • アイコンと背景色

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

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

  • テキストの文字サイズが29px(22pt)以上の場合:3:1以上

  • テキストの文字サイズが24px(18pt)以上で太字の場合:3:1以上

  • その他の場合:4.5:1以上

注:freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [1]の日本語訳[2]中の訳注で示されている基準を用いています。

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID:0002

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

  • 文字サイズが29px(22pt)以上の場合:3:1以上

  • 文字サイズが24px(18pt)以上で太字の場合:3:1以上

  • その他の場合:4.5:1以上

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

モバイルOSでの画像内のテキストのコントラスト比

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

  • テキストの文字サイズが24px(18pt)以上の場合:3:1以上

  • テキストの文字サイズが19px(14pt)以上で太字の場合:3:1以上

  • その他の場合:4.5:1以上

注:モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン[3] [4]においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。

対象プラットフォーム

モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID:0003

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

  • 文字サイズが24px(18pt)以上の場合:3:1以上

  • 文字サイズが19px(14pt)以上で太字の場合:3:1以上

  • その他の場合:4.5:1以上

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]