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.

Text

These guidelines are about text information. Text information is, roughly speaking, information in the form of characters. These guidelines do not cover text information that has been rendered as images. For that, see the guidelines for “Images of Text”.

Specify the Primary Language of the Page

Specify the lang attribute for the html element appropriately.

Target Platforms

Web

Intent

Ensure that speech and braille output is performed appropriately.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0611

Japanese pages have the <html lang="ja"> specified.

Applicable Stages

Code

Target Platforms

Web

Severity

[CRITICAL]

Check ID: 0621

The screen reader uses text-to-speech engine of appropriate language when it reads the content.

Applicable Stages

Product

Target Platforms

Web

Severity

[CRITICAL]

Check Procedure: Web

Confirm the following checks by axe DevTools and NVDA pass.

An Example of Performin the Check with axe DevTools

Confirm that the issue <html> element must have a lang attribute （<html>要素にはlang属性がなければなりません）is not reported.

If this issue is reported, the <html> element of the page needs to be modified such as <html lang="ja"> (in the case where the primary language of the page being Japanese)

An Example of Performin the Check with NVDA

Confirm that displayed text is announced without any issue when reading with up and down arrow keys in browse mode.

To perform this check properly, the settings need to be done for processing multiple languages.

Reference Videos: 適切な言語の音声【NVDAでアクセシビリティー チェック】

Explicitly Specify the Language for Text-Displaying UI Components

For UI components that display text, specify the appropriate language or locale if possible.

Target Platforms

Web, Mobile

Intent

Ensure that speech and braille output is performed appropriately.

Corresponding Success Criteria of WCAG 2.1

Checklist Items

Check ID: 0912

For UI components that can have their locale specified, the appropriate locale is set.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[MINOR]

Check ID: 0922

The screen reader announces dates, times, numeric values, etc. in a way that is natural in the natural language used in the page or in the application.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[MINOR]

Check Procedure: Web

Confirm the following check by NVDA passes.

An Example of Performin the Check with NVDA

Confirm that all of the following are met when reading date, time, number, etc. using up/down arrow keys in browse mode.

  • The voice used to read the part is the same as the voice used to read other parts.

  • The speech output of the part is natural and in line with the language used on the page or in the application. (eg. “Jan 1” would not be read as “1月1日” if the primary language of the page is English.)

Change Text Size Settings

Ensure that the content is appropriately magnified and remains comprehensible and functional, without any disruption in display, even when the browser’s text size setting is increased to 200 percent.

Target Platforms

Web

Intent

Some individuals with low vision use the text size changing function, rather than the browser’s zoom feature, to enlarge content. Ensure that this does not hinder the usage for such users.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0311

In CSS size specifications, absolute value specifications (e.g., px) and relative value specifications (e.g., rem) are not mixed.

Applicable Stages

Code

Target Platforms

Web

Severity

[NORMAL]

Check ID: 0323

Setting font size to 200 percent in browser’s font size settings does not cause layout collapses that interfere with understanding of the text.

Applicable Stages

Product

Target Platforms

Web

Severity

[NORMAL]

Check ID: 0324

Setting font size to 200 percent in browser’s font size settings does not cause layout collapses that interfere with understanding of the text, and actually magnifies the text to 200 percent.

Applicable Stages

Product

Target Platforms

Web

Severity

[MINOR]

Change Text Size Settings of Mobile OS

Ensure that the content is appropriately magnified and remains comprehensible and functional, without any disruption in display, even when the text size setting of the mobile OS is increased to the maximum.

Target Platforms

Mobile

Intent

Ensure that for individuals with low vision, when the text size enlargement setting is enabled in the OS, the content is appropriately magnified and there are no disruptions in usage, such as display distortion.

Corresponding Success Criteria of WCAG 2.1

Checklist Items

Check ID: 0325

When supporting text magnification, displaying at the maximum text size does not result in display issues that make it difficult to use.

Applicable Stages

Product

Target Platforms

Mobile

Severity

[MINOR]

Check ID: 0326

When the maximum text size is specified in the OS settings, layout issues that interfere with understanding and use of content do not occur.

Applicable Stages

Product

Target Platforms

Mobile

Severity

[NORMAL]

400 Percent Magnification Using Zoom Function

Ensure that even when using the browser’s zoom function to magnify to 400 percent, horizontal scrolling is not required for content designed for vertical scrolling like horizontally written content, and vertical scrolling is not required for content designed for horizontal scrolling like vertically written content.

Target Platforms

Web

Intent

Ensure that individuals with low vision can use the content without issues, even when magnifying it with the zoom function.

Corresponding Success Criteria of WCAG 2.1

  • Success Criterion 1.4.10 (Level AA): Reflow

Supplementary Information

Checklist Items

Check ID: 0322

Magnifying content to 400 percent using the zoom function of the browser on a 1280x1024 window reflows the content properly and

  • no horizontal scrolling is necessary on left-to-right content, and no vertical scrolling is necessary on top-to-bottom content, and

  • there is no unreadable content or unusable functionality

Applicable Stages

Product

Target Platforms

Web

Severity

[MINOR]

Customization of Text Display

Ensure that there is no loss of content or functionality when the user changes the line-height to 1.5em or more, the space following a paragraph to 2em or more, and the letter-spacing to 0.12em or more, and does not change any other properties.

Target Platforms

Web

Intent

Ensure that users with low vision can use content without problems.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0891

Applying user CSS that changes line-height to 1.5em or more, spacing following paragraphs to 2em or more, and letter-spacing to 0.12em or more does not cause loss of content or functionality, such as changing the display order or making the content unreadable.

Applicable Stages

Product

Target Platforms

Web

Severity

[NORMAL]