画像化されたテキスト
これらのガイドラインは、テキストを画像化して利用する場合を対象としています。
たとえば写真に写っている人物の名札にある名前、図中のテキスト・ラベルなど、文字情報以外の視覚的情報が、コンテンツのより重要な要素となっているようなものは、このガイドラインの対象外です。
注：WCAG 2.1では"images of text"という用語が用いられ、WCAG 2.1日本語訳では「文字画像」という訳語が当てられています。
画像化されたテキストを使用しない
画像化されたテキストを用いないと実現できない表現が不可欠な場合（例：ロゴ）を除いて、文字情報は画像化せず、テキスト・データで提供する。
- 対象プラットフォーム
Web、モバイル
- 意図
スクリーン・リーダーのユーザーがアクセスしやすい形で情報を提示する。
テキスト情報の扱いやすさを損ねない。
- 対応するWCAG 2.1の達成基準
達成基準1.4.5(レベルAA)：
達成基準1.4.9(レベルAAA)：
- 参考情報
チェック内容
チェックID：0481
画像化されたテキストを用いて実装する対象として、自社および他者のロゴ、バナー、図や写真の中の文字列以外のものが設計資料中に存在しない。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID：0501
自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストがない。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
テキスト情報の提供
画像化されたテキストに含まれる文字情報をテキストでも提供する。
- 対象プラットフォーム
Web、モバイル
- 意図
スクリーン・リーダーのユーザーが画像化されたテキストにアクセスできるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.1.1(レベルA)：
- 参考情報
チェック内容
チェックID：0511
画像化されたテキストと同じ内容のテキストが、その画像代替テキストとして設計資料で明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェックID：0521
画像化されたテキストと同じ内容が、スクリーン・リーダーで確認できる形のテキスト・データとしても提供されている。
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
実装方法の例：テキスト・データの提供
- Web
alt属性、またはaria-label属性を用いる
- iOS
accessibilityLabelを用いる
- Android
contentDescriptionを用いる
チェックID：0531
画像化されているテキストの内容を、スクリーン・リーダーで確認できる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェック手順：Web
以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。
NVDAによるチェック方法の例
ブラウズ・モードでの矢印キーの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
macOS VoiceOverによるチェック方法の例
VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
チェック手順：モバイル
以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。
iOS VoiceOverによるチェック方法の例
1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
（フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
Android TalkBackによるチェック方法の例
1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
（フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
画像内のテキストのコントラスト比
画像化されたテキストの色と背景の色に十分なコントラスト比を確保する。
テキストの文字サイズが29px（22pt）以上の場合：3:1以上
テキストの文字サイズが24px（18pt）以上で太字の場合：3:1以上
その他の場合：4.5:1以上
注：freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [1]の日本語訳[2]中の訳注で示されている基準を用いています。
- 対象プラットフォーム
Web
- 意図
ロービジョン者が、コンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.3(レベルAA)：
達成基準1.4.6(レベルAAA)：
- 参考情報
チェック内容
チェック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の達成基準
達成基準1.4.3(レベルAA)：
達成基準1.4.6(レベルAAA)：
- 参考情報
チェック内容
チェックID：0003
テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
文字サイズが24px（18pt）以上の場合：3:1以上
文字サイズが19px（14pt）以上で太字の場合：3:1以上
その他の場合：4.5:1以上
- 対象
デザイン
- 対象プラットフォーム
モバイル
- 重篤度
[NORMAL]