画像化されたテキスト

これらのガイドラインは、テキストを画像化して利用する場合を対象としています。

たとえば写真に写っている人物の名札にある名前、図中のテキスト・ラベルなど、文字情報以外の視覚的情報が、コンテンツのより重要な要素となっているようなものは、このガイドラインの対象外です。

注:WCAG 2.1では"images of text"という用語が用いられ、WCAG 2.1日本語訳では「文字画像」という訳語が当てられています。

[SHOULD]画像化されたテキストを使用しない

画像化されたテキストを用いないと実現できない表現が不可欠な場合(例:ロゴ)を除いて、文字情報は画像化せず、テキスト・データで提供する。

意図

スクリーン・リーダーのユーザーがアクセスしやすい形で情報を提示する。

テキスト情報の扱いやすさを損ねない。

対応するWCAG 2.1の達成基準

SC 1.4.5:
SC 1.4.9:

参考情報

チェック内容

チェックID:0481

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

画像化されたテキストを用いて実装する対象として、自社および他者のロゴ、バナー、図や写真の中の文字列以外のものが設計資料中に存在しない。

チェックID:0501

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストがない。

[MUST]テキスト情報の提供

画像化されたテキストに含まれる文字情報をテキストでも提供する。

意図

スクリーン・リーダーのユーザーが画像化されたテキストにアクセスできるようにする。

対応するWCAG 2.1の達成基準

SC 1.1.1:

参考情報

チェック内容

チェックID:0511

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

画像化されたテキストと同じ内容のテキストが、その画像代替テキストとして設計資料で明示されている。

チェックID:0521

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

画像化されたテキストと同じ内容が、スクリーン・リーダーで確認できる形のテキスト・データとしても提供されている。

実装方法の例:テキスト・データの提供
Web
  • alt属性、またはaria-label属性を用いる

iOS
  • accessibilityLabelを用いる

Android
  • contentDescriptionを用いる

チェックID:0531

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

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

ブラウズ・モードでのカーソルキー操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

iOS VoiceOverによるチェック実施方法の例
  • 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

  • (フリックではなく)画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

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

Android TalkBackによるチェック実施方法の例
  • 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

  • (フリックではなく)画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

[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以上)