画像

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

画像の説明の提供

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

参考情報

• テキストによる画像の説明

関連FAQ

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

チェック内容

チェック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

以下の0441-axe-01と0441-content-01がOK、かつ(0441-nvda-01または0441-macvo-01がOK)であることを確認する。

0441-axe-01：axe DevToolsによるチェック方法の例

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

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

0441-content-01：その他の手段によるチェック方法の例

スクリーン・リーダーによって読み上げられる簡潔な説明および詳細な説明が画像の内容を適切に表していることを確認する。

0441-nvda-01：NVDAによるチェック方法の例

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

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

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

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

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

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

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

0441-macvo-01：macOS VoiceOverによるチェック方法の例

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

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

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

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

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

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

装飾目的の画像の無視

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

参考情報

• テキストによる画像の説明

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

チェック内容

チェックID：0451

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：0461

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

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

Web

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

• role="presentation"を指定。

iOS

• isAccessibilityElementをfalseにする。

Android

• importantForAccessibilityをnoにする。

チェックID：0471

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0471-nvda-01または0471-macvo-01がOKであることを確認する。

0471-nvda-01：NVDAによるチェック方法の例

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

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

0471-macvo-01：macOS VoiceOverによるチェック方法の例

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

参考情報

• 画像の表示とアクセシビリティー

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

グレイスケール表示でも以下のような事象は発生せず、利用に支障が出ない。

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.11(レベルAA)：

  • Non-text Contrast

  • 非テキストのコントラスト

参考情報

• 画像の表示とアクセシビリティー

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェック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]中の訳注で示されている基準を用いています。

[1]

Understanding Success Criterion 1.4.3: Contrast (Minimum)

[2]

達成基準 1.4.3: コントラスト (最低限)を理解する

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• 画像の表示とアクセシビリティー

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェック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に準じた基準を用いていることから、上記の基準としています。

[3]

アクセシビリティ | Apple Developer Documentation

[4]

Accessibility – Material Design 3

対象プラットフォーム

モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• 画像の表示とアクセシビリティー

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0003

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

• 文字サイズが24px（18pt）以上の場合：3:1以上

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

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]