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.

Icons

These guidelines are for icons.

Here, an icon refers to an image used for the following purposes:

  • Representing the state of an object

  • Providing clickable buttons or links

Provide Text Information

Display text labels together with icons, and if that is not possible, provide alternative text that indicates the purpose of the icon (the state it represents or the expected result of the operation).

Target Platforms

Web, Mobile

Intent

Enable individuals with visual impairments to perceive the presence of images and understand their content.

Corresponding Success Criteria of WCAG 2.1

Checklist Items

Check ID: 0391

  • Icons are accompanied by text labels that represent their role or the state they indicate. Or,

  • If text labels cannot be displayed, the difference in the meaning of icons is not represented solely by color differences but also by differences in shape (motif) or size. And,

  • The value of the alt attribute, which makes the role or meaning understandable, is explicitly specified in the design documentation.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[MAJOR]

Check ID: 0401

  • Text that represents the role of the icon or the state it indicates is displayed and is explicitly associated with the icon. Or

  • Such text is added to the icon.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[MAJOR]

Implementation Example: Associate the Displayed Text With the Icon
Web

  • Use the aria-labelledby attribute.

Implementation Example: Add a Label to the Icon
Web

  • Use the alt attribute or the aria-label attribute.

iOS

  • Specify with accessibilityLabel.

Android

  • Specify with the contentDescription attribute.

Implementation Example: Confirm the Appropriate State
Web

  • When you check with developer tools, the Accessible Name is set to the appropriate text.

Check ID: 0402

If an icon is displayed together with a text label, ensure that the same content is not read out by the screen reader twice.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[NORMAL]

Implementation Example: Ensure That the Content Is Not Read Out by the Screen Reader
Web

  • For the img element, specify an empty alt attribute ( alt="" ).

  • For elements other than the img element, do not specify the aria-label attribute or the aria-labelledby attribute.

iOS

Set isAccessibilityElement to false.

Android

Set importantForAccessibility to no.

Check ID: 0411

Text that describes the purpose and the status of icons is announced by screen reader.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[MAJOR]

Check Procedure: Web

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

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

Confirm that the issue Buttons must have discernible text （ボタンには認識可能なテキストが存在しなければなりません）is not reported by axe DevTools.

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

Confirm that what is announced by the screen reader properly convey the role and the state of the icon.

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

Confirm that the functionality of the icon, or the state the icon is indicating is announced when the following operations are performed using NVDA:

  • When the part with the icon is read aloud using arrow keys in browse mode

  • When the icon is something that can receive focus, like a button or a link, and is focused on by pressing the Tab/Shift+Tab keys

Reference Videos: アイコンの役割や示している状態【NVDAでアクセシビリティー チェック】

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

Confirm that the functionality of the icon, or the state the icon is indicating is announced when the following operations are performed using macOS VoiceOver:

  • When the part with the icon is read aloud using the VO key and the left/right arrow keys to operate the VoiceOver cursor

  • When the icon is something that can receive focus, like a button or a link, and is focused on by pressing the Tab/Shift+Tab keys

Check ID: 0413

When icons are displayed along with text labels, the same content is not announced by the screen reader more than once.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[NORMAL]

Check Procedure: Web

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

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

Confirm that the same content is not announced twice as the result of both the icon and the accompanying text being announced, when passing over a location with an icon accompanied by a text label using arrow keys in NVDA’s browse mode.

Reference Videos: アイコンの説明が重複しない【NVDAでアクセシビリティー チェック】

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

Confirm that the same content is not announced twice as the result of both the icon and the accompanying text being announced, when passing over a location with an icon accompanied by a text label using the VO key and the left/right arrow keys to operate the VoiceOver cursor with macOS VoiceOver enabled.