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

These guidelines are for images.

Provide Image Descriptions

Provide a text description for images that conveys equivalent information.

Target Platforms

Web, Mobile

Intent

Ensure that users with visual impairments can perceive the presence of images and understand their content.

Corresponding Success Criteria of WCAG 2.1

Success Criterion 1.1.1 (Level A): Non-text Content

Supplementary Information

Describing Images Through Text

Related FAQs

Should the Words “Icon” or “Button” Be Included in the Alternative Text of Icon Images?

Checklist Items

Check ID: 0421

Concise and sufficient descriptions related to images are explicitly specified in the design documentation. And,
If a short text is not enough for explanation, detailed descriptive text is explicitly specified in the design documentation.

Applicable Stages: Design
Target Platforms: Web, Mobile
Severity: [MAJOR]

Check ID: 0431

A concise and sufficient description is added to the image. And
If a detailed description is necessary, it is displayed immediately before or after the image, or it is associated with the image.

Applicable Stages: Code
Target Platforms: Web, Mobile
Severity: [MAJOR]

Implementation Example: Adding a Concise Description

Web

Specify with the alt attribute or the aria-label attribute.
To use the displayed text as a concise description, associate that text with the image using the aria-labelledby attribute.

iOS

Specify with accessibilityLabel.

Android

Specify with contentDescription.

Implementation Example: Adding a Detailed Description

Web

If the detailed description and the image are not close to each other in the DOM tree, associate them using the aria-describedby attribute.

Check ID: 0441

Image descriptions are properly announced by the screen reader.

Applicable Stages: Product
Target Platforms: Web, Mobile
Severity: [MAJOR]

Check Procedure: Web

Confirm 0441-axe-01 and 0441-content-01 pass, and (0441-nvda-01 or 0441-macvo-01 passes) below.

0441-axe-01: An Example of Performin the Check with axe DevTools

Confirm that the issue Images must have alternate text （画像には代替テキストがなければなりません）is not reported by axe DevTools.

Note that this issue is not reported if any alternative text is specified for the image, and it is not possible to detect if the alternative text is inappropriate.

0441-content-01: An Example of Performin the Check with Miscellaneous Methods

Confirm that brief and detailed descriptions announced by the screen reader properly convey the content of the image.

0441-nvda-01: An Example of Performin the Check with NVDA

Using NVDA, confirm that a brief description of the image is announced when performing the following:
- When reading the part with the image using arrow keys in browse mode
- When the image receives focus with Tab / Shift + Tab key operation, for focusable images, such as links.
Confirm that one of the following is true for images that require detailed description
- Detailed description is placed immediately before or after the image, and it is announced when using arrow keys in browse mode.
- Detailed description is announced when reading the image using arrow keys in browse mode.

Reference Videos: 画像の説明【NVDAでアクセシビリティーチェック】

0441-macvo-01: An Example of Performin the Check with macOS VoiceOver

Using macOS VoiceOver, confirm that a brief description of the image is announced when performing the following:
- When reading the part with the image using the VO key and the left/right arrow keys to operate the VoiceOver cursor.
- When the image receives focus with Tab / Shift + Tab key operation, for focusable images, such as links.
Confirm that one of the following is true for images that require detailed description
- Detailed description is placed immediately before or after the image, and it is announced when using the VO key and the left/right arrow keys to operate the VoiceOver cursor.
- Detailed description is announced when reading the image using the VO key and the left/right arrow keys to operate the VoiceOver cursor.

Ignore Decorative Images

Ensure that images used purely for decorative purposes are ignored by assistive technologies like screen readers.

Target Platforms

Web, Mobile

Intent

Ensure that unnecessary information is not presented, to facilitate smooth information acquisition for visually impaired individuals.

Corresponding Success Criteria of WCAG 2.1

Success Criterion 1.1.1 (Level A): Non-text Content

Supplementary Information

Describing Images Through Text

Related FAQs

What Information Should Not Be Read Aloud by Screen Readers?

Checklist Items

Check ID: 0451

It is explicitly stated in the design documentation that images which do not carry any information or functionality must not have descriptive text added to them.

Applicable Stages: Design
Target Platforms: Web, Mobile
Severity: [NORMAL]

Check ID: 0461

Images that have no information or functionality are ignored by screen readers.

Applicable Stages: Code
Target Platforms: Web, Mobile
Severity: [NORMAL]

Implementation Example: Make It Ignored by Screen Readers

Web

Specify an empty alt attribute ( alt="" ). Or
Specify role="presentation".

iOS

Set isAccessibilityElement to false.

Android

Set importantForAccessibility to no.

Check ID: 0471

Images that do not contain any information or functionality are ignored by the screen reader.

Applicable Stages: Product
Target Platforms: Web, Mobile
Severity: [NORMAL]

Check Procedure: Web

Confirm 0471-nvda-01 or 0471-macvo-01 passes below.

0471-nvda-01: An Example of Performin the Check with NVDA

Confirm that the presence of the image is not announced when passing over the image using arrow keys in NVDA’s browse mode.

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

0471-macvo-01: An Example of Performin the Check with macOS VoiceOver

Confirm that the presence of the image is not announced when passing over the image using the VO key and the left/right arrow keys to operate the VoiceOver cursor with macOS VoiceOver enabled.

Expression Using Multiple Visual Elements

When associating specific meanings with certain colors, also use other visual elements such as shapes or patterns to ensure that the meaning is understandable even if the color cannot be discerned.

Target Platforms

Web, Mobile

Intent

Enable individuals with visual impairments or color vision deficiencies to use content.

Corresponding Success Criteria of WCAG 2.1

Success Criterion 1.4.1 (Level A): Use of Color

Supplementary Information

Related FAQs

The Bookmarklet to Display in Grayscale Breaks the Layout

Checklist Items

Check ID: 0031

The color scheme is designed to not hinder usability even in grayscale display:

Links can be distinguished
The intent of images and text is conveyed
Required items and errors in input forms can be recognized

Applicable Stages: Design
Target Platforms: Web, Mobile
Severity: [MAJOR]

Check ID: 0051

The content is usable when displayed in grayscale, meeting the following:

Links can be identified
The intent of images and text is clear
Required fields and errors in ininput forms can be recognized

Applicable Stages: Product
Target Platforms: Web, Mobile
Severity: [MAJOR]

Ensure Sufficient Contrast Ratio With Adjacent Regions

Ensure that the contrast ratio between the image and the adjacent color areas is at least 3:1.

Target Platforms

Web, Mobile

Intent

Enable individuals with low vision to use content.

Corresponding Success Criteria of WCAG 2.1

Success Criterion 1.4.11 (Level AA): Non-text Contrast

Supplementary Information

Checklist Items

Check ID: 0001

For icons and images, a contrast ratio of at least 3:1 is ensured.

Between the icon and its background color
Between important information within the image and its background color
Between the image and images of text and their adjacent areas

Applicable Stages: Design
Target Platforms: Web, Mobile
Severity: [NORMAL]

Contrast Ratio of Text in Images

Ensure sufficient contrast between the colors of text within images and key visual elements conveying important information, 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

Success Criterion 1.4.3 (Level AA): Contrast (Minimum)
Success Criterion 1.4.6 (Level AAA): Contrast (Enhanced)

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 sufficient contrast between the colors of text within images and key visual elements conveying important information, 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

Success Criterion 1.4.3 (Level AA): Contrast (Minimum)
Success Criterion 1.4.6 (Level AAA): Contrast (Enhanced)

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]