Caution

This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.

Images of Text

These guidelines are for images of text. Images of text are text that is presented as a graphical image.

Textual information that is part of content where other visual information is more significant, such as names on nametags of people in photos or text labels in diagrams, is not covered by these guidelines.

Avoid the Use of Images of Text

Unless the use of images of text is essential for the expression (e.g. logos), provide character information as text data instead of images of text.

Target Platforms

Web, Mobile

Intent

  • Present information in a form that can be accessed by screen reader users.

  • Do not compromise the ease of handling text information.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0481

The design documentation does not contain any instances of text that is to be implemented using images of text, except for the company’s and others’ logos, banners, and text within diagrams or photos.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[NORMAL]

Check ID: 0501

There are no images of text, except for text within logos of companies, banners, figures, or photographs.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[NORMAL]

Provide Text Information

Provide character information included in images of text as text.

Target Platforms

Web, Mobile

Intent

Ensure that screen reader users can access images of text.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0511

The text that has the same content as images of text is explicitly stated as the alternative text for those images in the design documentation.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[MAJOR]

Check ID: 0521

The same content as images of text is also provided as text data in a form that can be recognized by screen readers.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[MAJOR]

Implementation Example: Providing Text Data
Web

  • Use the alt attribute or the aria-label attribute

iOS

  • Use the accessibilityLabel

Android

  • Use the contentDescription

Check ID: 0531

The screen reader announces the same content as the images of text.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[MAJOR]

Check Procedure: Web

Confirm that either the check by NVDA or the check by macOS VoiceOver below passes.

An Example of Performin the Check with NVDA

Confirm that the same text as contained in the image is announced when using arrow keys in browse mode.

Reference Videos: 画像化されたテキスト【NVDAでアクセシビリティー チェック】

An Example of Performin the Check with macOS VoiceOver

Confirm that the same text as contained in the image is announced when using the VO key and the left/right arrow keys to operate the VoiceOver cursor.

Check Procedure: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

An Example of Performin the Check with iOS VoiceOver

  • Cofirm that the same text as contained in the image is announced when reaching the image by one-finger left/right flicks.

  • Cofirm that the same text as contained in the image is announced when the image is touched, instead of reaching it by flicking.

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

An Example of Performin the Check with Android TalkBack

  • Cofirm that the same text as contained in the image is announced when reaching the image by one-finger left/right flicks.

  • Cofirm that the same text as contained in the image is announced when the image is touched, instead of reaching it by flicking.

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

Contrast Ratio of Text in Images

Ensure a sufficient contrast ratio between the colors of images of text and their background colors.

  • For text size 29px (22pt) or larger: a contrast ratio of at least 3:1.

  • For bold text 24px (18pt) or larger: a contrast ratio of at least 3:1.

  • In other cases: a contrast ratio of at least 4.5:1.

Note: In freee products and websites, Japanese is mainly used, so the criteria indicated in the translation notes in Understanding WCAG 2.1 [1] [2] are used.

Target Platforms

Web

Intent

Ensure that users with low vision can use the content.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0002

Sufficient contrast ratios are ensured for the display colors and background colors of text and images of text.

  • For text size 29px (22pt) or larger: at least 3:1

  • For bold text size 24px (18pt) or larger: at least 3:1

  • In other cases: at least 4.5:1

Applicable Stages

Design

Target Platforms

Web

Severity

[NORMAL]

Contrast Ratio of Text in Images on Mobile OS

Ensure a sufficient contrast ratio between the colors of images of text and their background colors.

  • For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.

  • For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.

  • In other cases: a contrast ratio of at least 4.5:1.

Note: In mobile applications, it is assumed that methods for changing text size are more widely known compared to desktop web, and the guidelines of each platform [3] [4] also use standards in line with WCAG 2.1, hence the above criteria are set.

Target Platforms

Mobile

Intent

Ensure that users with low vision can use the content.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0003

Sufficient contrast ratios are ensured for the display colors and background colors of text and images of text.

  • For text size 24px (18pt) or larger: at least 3:1

  • For bold text size 19px (14pt) or larger: at least 3:1

  • In other cases: at least 4.5:1

Applicable Stages

Design

Target Platforms

Mobile

Severity

[NORMAL]