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.

Examples of How to Conduct Checks Using axe DevTools

Here, we compile examples of how to conduct the check methods indicated for each checklist item using axe DevTools.

For installation and basic usage of axe DevTools, please refer to Checking Accessibility With axe DevTools. Please also refer to Correspondence Between axe DevTools Rules and These Guidelines.

Check ID: 0021

Sufficient contrast ratio is maintained between the display color of the text and the background color.

Confirm that the issue Elements must meet minimum color contrast ratio thresholds （要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません）is not reported.

Note that no issue is reported in the following cases, even when the guidelines are not met.

When the contrast ratio is insufficient after the text and/or background color change, e.g. after mouse hover
When the contrast ratio of large-scale text is 3:1 or more and less than 4.5:1
- While large-scale text is defined as 29px(22pt) or larger font, or 24px(18pt) or larger bold font within freee’s product as the primary text is assumed to be in Japanese, WCAG defines it as 18pt or larger font, or 14pt or larger bold font assuming euro-languages. As Axe DevTools is based on the requirements set by the WCAG, it cannot detect insufficient color contrast of Japanese text whose font size is between 18pt and 22pt (14pt and 18pt if bold).
When the contrast ratio of non-text content is insufficient.
- icons, images, images of text, outlines of buttons and input fields, etc.
Insufficient contrast ratio of the actual colors being seen, when different colors appear to blend into a new color due to overlapping translucent elements.
When it is difficult to identify the background and foreground colors in overlapping elements.

Check ID: 0411

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

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

Check ID: 0441

Image descriptions are properly announced by the screen reader.

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

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.

Check ID: 0561

Headings are recognized by the screen reader as headings of the heading levels indicated in the design documents.

Confirm that none of the following issues is reported.

Check ID: 0621

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

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)

Check ID: 0682

All content on the page is placed in the appropriate area indicated by ARIA landmarks.

Confirm that none of the following issues is reported against visible content. (THere usually is no problem if these issues are reported against hidden content.)

Check ID: 0951

Form controls, such as edit boxes, check boxes, and radio buttons, are properly labeled.

Confirm that none of the following issues are reported.