画像化されたテキスト

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

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

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

テキスト情報の提供

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

対象プラットフォーム

Web、モバイル

意図

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

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

チェック内容

チェックID：0511

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0521

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

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：テキスト・データの提供
Web

  • alt属性、またはaria-label属性を用いる

iOS

  • accessibilityLabelを用いる

Android

  • contentDescriptionを用いる

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0531-content-00を満たしている、または(0531-content-01を満たしている、かつ(0531-nvda-01または0531-macvo-01を満たしている))ことを確認する。

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

チェック対象の画面には、画像化されたテキストはまったく存在しない。

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

チェック対象の画面には、自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストが存在しない。

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

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

参考動画：画像化されたテキスト【NVDAでアクセシビリティー チェック】

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

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

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

画像化されたテキストの色と背景の色に十分なコントラスト比を確保する。

  • テキストの文字サイズが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]