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.
ID 0021-axe-01
Confirm that the issue Elements must meet minimum color contrast ratio thresholds (要素は色のコントラスト比(最低限)の閾値を満たしていなければなりません)is not reported by axe DevTools.
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.
ID 0411-axe-01
Confirm that the issue Buttons must have discernible text (ボタンには認識可能なテキストが存在しなければなりません)is not reported by axe DevTools.
Check ID: 0441
Image descriptions are properly announced by the screen reader.
ID 0441-axe-01
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.
Check ID: 0561
Headings are recognized by the screen reader as headings of the heading levels indicated in the design documents.
ID 0561-axe-01
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.
ID 0621-axe-01
Confirm that the issue <html> element must have a lang attribute (<html>要素にはlang属性がなければなりません)is not reported by axe DevTools.
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: 0681
The start of the main text can be found by using the heading jump function of the screen reader or the jump function between areas indicated by ARIA landmarks.
ID 0681-axe-01
Confirm that none of the following issues are reported by axe DevTools.
Check ID: 0682
All content on the page is placed in the appropriate area indicated by ARIA landmarks.
ID 0682-axe-01
Confirm that none of the following issues is reported by axe DevTools against visible content. (THere usually is no problem if these issues are reported against hidden content.)
Banner landmark should not be contained in another landmark (bannerランドマークは他のランドマークに含まれるべきではありません)
Aside should not be contained in another landmark (asideは他の要素に含まれるべきではありません)
Main landmark should not be contained in another landmark (mainランドマークは他のランドマークに含まれるべきではありません)
Document should not have more than one banner landmark (ドキュメントに複数のbannerランドマークが存在してはなりません)
Document should not have more than one contentinfo landmark (ドキュメントに複数のcontentinfoランドマークが存在してはなりません)
Document should not have more than one main landmark (ドキュメントに複数のmainランドマークが存在してはなりません)
Document should have one main landmark (ドキュメントにはmainランドマークが1つ含まれていなければなりません)
All page content should be contained by landmarks (ページのすべてのコンテンツはlandmarkに含まれていなければなりません)
Check ID: 0951
Form controls, such as edit boxes, check boxes, and radio buttons, are properly labeled.
ID 0951-axe-01
Confirm that none of the following issues are reported by axe DevTools.