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 with Other Methods
Here, we compile examples of how to conduct the check methods indicated for each checklist item with other methods.
Check ID: 0001
For icons and images, a contrast ratio of at least 3:1 is ensured.
ID 0001-content-00
There are no icons or images on the screen to be checked.
ID 0001-content-01
The contrast ratio between important information or icons within the image and its background color is 3:1 or more.
ID 0001-content-02
The contrast ratio between the image or image text and its adjacent area is 3:1 or more.
Check ID: 0021
Sufficient contrast ratio is maintained between the display color of the text and the background color.
ID 0021-webaim-01
Verified that the content meets the following color contrast requirement using the WebAIM Color Contrast Checker:
Font Size: 29px（22pt）or larger; 3:1 or higher
Font Size: 24px（18pt）or larger and bold; 3:1 or higher
In other cases：4.5:1 or higher
Check ID: 0081
In objects that accept mouse clicks, such as links and buttons, it is possible to cancel the operation even after pressing the mouse button.
Note：Objects for drag and drop are not subject to this check.
ID 0081-mouse-01
No functionality is executed upon performing the following with the mouse:
Move the mouse pointer onto the object
Press the mouse button
Move the mouse pointer outside the object while holding down the mouse button
Release the mouse button
Check ID: 0091
All content displayed on mouseover is designed so that it doesn’t disappear against the user’s intention even when using the magnification function.
ID 0091-content-00
There is no content displayed on mouseover in the screen to be checked.
ID 0091-content-01
A function is defined to hide the content displayed on mouseover without moving the mouse pointer. (e.g. press the ESC key or click the mouse on the displayed content)
ID 0091-content-02
It is clearly stated in the design document that the content displayed on mouseover is hidden only when the mouseover state is removed, the user performs an operation to hide it, or the content becomes invalid.
Check ID: 0092
Content displayed on mouseover is designed so that it can be enlarged.
ID 0092-content-00
There are no content displayed on mouseover on the screen to be checked.
ID 0092-content-01
The content displayed on mouseover is designed so that it does not disappear when the mouse pointer is moved over it.
Check ID: 0111
All content displayed on mouseover does not disappear against the user’s intention even when using the magnification function.
ID 0111-content-00
There are no content displayed on mouseover on the screen to be checked.
ID 0111-mouse-01
The content displayed on mouseover can be hidden without moving the mouse pointer. (Press the ESC key or click the mouse on the displayed content)
ID 0111-mouse-02
The content displayed on mouseover is hidden only when when the mouseover state is removed, the user performs an operation to hide it, or the content becomes invalid.
Check ID: 0112
Content displayed on mouseover can be enlarged.
ID 0112-content-00
There are no content displayed on mouseover on the screen to be checked.
ID 0112-mouse-01
The content displayed on mouseover does not disappear when the mouse pointer is moved over it.
Check ID: 0141
Shortcut keys do not interfere with the operation of assistive technologies.
ID 0141-content-00
There are no shortcut keys provided on the screen to be checked.
ID 0141-content-01
Shortcut keys can only be used when a specific part of the screen has focus.
ID 0141-content-02
Users can disable shortcut keys.
ID 0141-content-03
Users can change shortcut assignments.
Check ID: 0151
The location of the focus is visible.
ID 0151-content-01
The focus indicator has not been changed from the default of the browser.
ID 0151-content-02
The focus indicator is clearly stated in the design document.
Check ID: 0211
All operations are designed to be possible with only the keyboard.
ID 0211-content-00
The screen to be checked contains only static text, and does not contain any elements that accept mouse actions such as clicks or mouseovers (links, buttons, form controls, etc.).
ID 0211-content-01
Anything that accepts mouse operation, such as clicks and hover, is designed to be operable with only the keyboard.
Check ID: 0231
All operations can be performed using only the keyboard.
ID 0231-content-00
The screen to be checked contains only static text, and does not contain any elements that accept mouse actions such as clicks or mouseovers (links, buttons, form controls, etc.).
ID 0231-content-01
Anything that accepts mouse operation, such as clicks and hover, can also be operated using only the keyboard.
Check ID: 0241
Links are provided with text that makes it easy to guess the destination.
ID 0241-content-00
There are no links on the screen to be checked.
ID 0241-content-01
There are no links that are like “click here for *” where only the “here” part is a link. (In this case, make the entire “click here for *” a link.)
ID 0241-content-02
The intent of the link text is clearly defined in the markup. (For example, it can be easily inferred from the heading immediately before the link.)
Check ID: 0242
Consistent text and icons are used for links and buttons with the same destination or purpose in the same context.
ID 0242-content-00
There are no links or buttons on the screen to be checked.
ID 0242-content-01
There are no multiple links with the same destination on the screen to be checked.
ID 0242-content-02
There are no multiple buttons with the same purpose on the screen to be checked.
ID 0242-content-03
Consistent text and icons are used for multiple links that transition to the same screen or multiple buttons that execute the same function on the same screen.
Check ID: 0261
Links are provided with text that makes it easy to guess the destination.
ID 0261-content-00
There are no links on the screen to be checked.
ID 0261-content-01
There are no links that are like “click here for *” where only the “here” part is a link. (In this case, make the entire “click here for *” a link.)
ID 0261-content-02
The intent of the link text is clearly defined in the markup. (For example, it can be easily inferred from the heading immediately before the link.)
Check ID: 0262
In the same context, consistent text and icons are used for links that have the same transition destination and buttons that have the same purpose.
ID 0262-content-00
There are no multiple links that transition to the same screen or multiple buttons that execute the same function on the screen to be checked.
ID 0262-content-01
Consistent text and icons are used for multiple links that transition to the same screen or multiple buttons that execute the same function on the same screen.
Check ID: 0331
Images used as buttons or links have a large enough area that responds to clicks and touches, and that area is clearly defined in the design documentation.
ID 0331-content-00
There are no images used as buttons or links on the screen to be checked.
ID 0331-content-01
The area that responds to clicks and touches for images used as links or buttons is clearly defined in the design documentation.
ID 0331-content-02
The size of the area that responds to clicks and touches of images used as buttons or links is at least 24 x 24 CSS px for desktop Web, preferably larger than 44 x 44 CSS px, and larger than 44 x 44 CSS px for mobile Web.
Check ID: 0332
Form controls such as checkboxes, radio buttons, and buttons have a large enough area that responds to clicks and touches, and that area is clearly defined in the design documentation.
ID 0332-content-00
There are no form controls on the screen to be checked.
ID 0332-content-01
There are no instructions in the design documentation to change the appearance of form controls from the browser default.
ID 0332-content-02
The area that responds to clicks and touches of form controls is clearly defined in the design documentation.
ID 0332-content-03
The area that responds to clicks and touches of form controls meets the following conditions:
for desktop Web: at least 24 x 24 CSS px, preferably larger than 44 x 44 CSS px
for mobile Web: larger than 44 x 44 CSS px
Check ID: 0351
Images used as buttons or links have large enough area that responds to clicks and touches
ID 0351-content-00
There are no images used as buttons or links on the screen to be checked.
ID 0351-content-01
The size of the area that responds to clicks and touches of images used as buttons or links is at least 24 x 24 CSS px for desktop Web, preferably larger than 44 x 44 CSS px, and larger than 44 x 44 CSS px for mobile Web.
Check ID: 0352
Form controls such as checkboxes, radio buttons, and buttons have large enough area that responds to clicks and touches.
ID 0352-content-00
There are no form controls on the screen to be checked.
ID 0352-content-01
The appearance of form controls has not been changed from the browser default.
ID 0352-content-02
The area that responds to clicks and touches of form controls meets the following conditions:
for desktop Web: at least 24 x 24 CSS px, preferably larger than 44 x 44 CSS px
for mobile Web: larger than 44 x 44 CSS px
Check ID: 0361
Information displayed or functions that can be executed on mouseover are designed so that they are displayed or can be executed also when operating with a keyboard or touch UI.
ID 0361-content-00
There are no information displayed or functions executable only on mouseover on the screen to be checked.
ID 0361-content-01
The method of operating with only the keyboard or touch UI for information displayed or functions executable on mouseover is clearly defined in the design documentation.
Check ID: 0391
Icons are designed to convey their role and the state they indicate.
ID 0391-content-00
There are no icons on the screen to be checked.
ID 0391-content-01
Icons are accompanied by text labels that represent their role or the state they indicate.
ID 0391-content-02
Different roles or states indicated by icons are not represented solely by color differences, but also by differences in shape (motif) or size.
ID 0391-content-03
Alternative text (value of alt attribute or aria-label attribute) that indicates the role or meaning is clearly defined in the design documentation.
Check ID: 0411
Text that describes the purpose and the status of icons is announced by screen reader.
ID 0411-content-00
There are no icons on the screen to be checked.
Check ID: 0412
There are no icons without accompanying text labels displayed, that are the same shape and size, and differ only in color. (e.g., multiple icons representing different states must be distiguishable not only by difference in color.)
ID 0412-content-00
There are no icons without accompanying text labels displayed on the screen to be checked.
ID 0412-content-01
Icons without accompanying text labels that represent different states or functions have visual differences other than color.
Check ID: 0413
When an icon is displayed together with a text label, the same content is not announced twice by the screen reader.
ID 0413-content-00
There are no icons on the screen to be checked.
Check ID: 0421
The design documentation clearly specifies the text description that conveys the content of the image without any omissions or excesses.
ID 0421-content-00
There are no images on the screen to be checked.
ID 0421-content-01
The design documentation clearly specifies the alternative text that concisely indicates the content of the image.
ID 0421-content-02
The description provided by the alternative text conveys the content of the image without any omissions or excesses, and includes sufficient information for understanding that information and using the page.
ID 0421-content-03
If a concise description using alternative text is insufficient, the design documentation clearly specifies the text for a detailed description and how to implement it (e.g., using the aria-describedby attribute or figcaption element, or placing it immediately before or after the image).
Check ID: 0441
Image descriptions are properly announced by the screen reader.
ID 0441-content-00
The images on the target screen are only for decorative purposes.
Check ID: 0451
Images that do not contain any information or functionality are designed so that they are ignored by screen readers.
ID 0451-content-00
There are no images that do not contain any information or functionality on the screen to be checked.
ID 0451-content-01
The design documentation clearly states that images that do not contain any information or functionality should have an empty alternative text (value of alt attribute or aria-label attribute) or specify role="presentation".
Check ID: 0471
Images that do not contain any information or functionality are ignored by the screen reader.
ID 0471-content-00
There are no images that do not contain any information or functionality on the screen to be checked.
Check ID: 0511
Images of text are not used.
ID 0511-content-00
There are no images containing text information at all on the screen to be checked.
ID 0511-content-01
There are no images containing text information on the screen to be checked, except for logos, banners, and text in diagrams and photographs of our company and others.
ID 0511-content-02
The design documentation clearly states the alternative text which conveys the content of the image containing text information appropriately.
Check ID: 0531
The screen reader announces the same content as the images of text.
ID 0531-content-00
There are no images of text at all on the screen to be checked.
ID 0531-content-01
There are no images of text, except for text within logos of companies, banners, figures, or photographs, on the screen to be checked.
Check ID: 0561
Headings are recognized by the screen reader as headings of the heading levels indicated in the design documents.
ID 0561-content-00
The target of the check is a modal dialog that does not contain any headings.
Check ID: 0562
The screen reader properly recognizes tables and their cells.
ID 0562-content-00
There are no tables on the screen to be checked.
Check ID: 0581
The information necessary to ensure the accessibility of UI components that require custom implementation is clearly stated in the design documentation.
ID 0581-content-00
There are no UI components that require custom implementation on the screen to be checked.
ID 0581-content-01
For UI components that require custom implementation, the behavior when using screen readers and the behavior when operating with a keyboard are explicitly stated in the design documentation.
Check ID: 0591
Non-static text (e.g., open/close menus, tab panels, date selection UI) can be manipulated by the screen reader without difficulty.
ID 0591-content-00
There are only static texts on the screen to be checked.
Check ID: 0682
All content on the page is placed in the appropriate area indicated by ARIA landmarks.
ID 0682-misc-01
Every part of the page content is contained in an appropriate ARIA landmark region when viewed using a browser with the Landmark Navigation via Keyboard or Pop-up extention installed.
Check ID: 0781
Components commonly used across multiple pages/screens, such as global navigation, headers, footers, breadcrumb lists, and support UI, are used consistently on all pages.
ID 0781-content-00
There are no elements that are used in common across multiple pages/screens on the screen to be checked.
ID 0781-content-01
For elements that are used in common across multiple pages/screens, the order of appearance is consistent on all pages.
ID 0781-content-02
The order of appearance of links and buttons within these elements is the same on all pages.
Check ID: 0841
The position of the page/screen within the site or application is indicated in the global navigation or breadcrumb list.
ID 0841-content-00
There are no global navigation or breadcrumb lists on the screen to be checked.
ID 0841-content-01
The position of the page/screen within the site or application is visually indicated in the global navigation or breadcrumb list.
ID 0841-content-02
The appropriate value of the aria-current attribute is specified for the element that indicates the position of the page/screen within the site or application in the global navigation or breadcrumb list.
Check ID: 0921
When text containing multiple languages is read out loud using a reading environment that supports multiple languages, the text is read out loud by the appropriate language’s speech engine.
ID 0921-content-00
There is only text in a single language on the screen to be checked.
Check ID: 0931
The design documentation clearly indicates the labels to be assigned to form controls, such as edit boxes, checkboxes, and radio buttons, so that their purpose is easily understood.
ID 0931-content-00
There are no form controls on the screen to be checked.
ID 0931-content-01
If there are text or images with alternative text which are appropriate as labels for form controls on the screen, the design documentation clearly specifies the correspondence.
ID 0931-content-02
If there is no appropriate text displayed on the screen as a label, the design documentation clearly specifies the text to be designated as the label for the form control and how to implement it (e.g., using the aria-label attribute).
Check ID: 0951
Form controls, such as edit boxes, check boxes, and radio buttons, are properly labeled.
ID 0951-content-00
There are no form controls, such as edit boxes, check boxes, and radio buttons, on the screen to be checked.
Check ID: 0956
Radio buttons can be operated using the keyboard.
ID 0956-content-00
There are no radio buttons on the screen to be checked.
Check ID: 0957
Check boxes can be operated using the keyboard.
ID 0957-content-00
There are no check boxes on the screen to be checked.
Check ID: 1071
Unexpected behavior does not occur when manipulating forms.
ID 1071-content-00
There are no form controls on the screen to be checked.
ID 1071-content-01
If the behavior indicated in 1071-keyboard-01 occurs during form operations, it is explicitly communicated to the user that such behavior will occur.
Check ID: 1081
The design documentation explicitly specifies the specific phrases that are displayed when an error occurs in form input, clarifying the nature of the error.
ID 1081-content-00
There are no input forms on the screen to be checked.
ID 1081-content-01
The design is such that a message indicating the specific content of each error is displayed for all errors that are expected to occur during form input.
Check ID: 1101
When an error related to form entry occurs, text information that specifically identifies the nature of the error is displayed.
ID 1101-content-00
There are no input forms on the screen to be checked.
ID 1101-content-01
When performing form input that causes an error, text information that specifically identifies the nature of the error is displayed.
Check ID: 1111
The design documentation explicitly specifies error messages that indicate how to correct errors in form input.
ID 1111-content-00
There are no input forms on the screen to be checked.
ID 1111-content-01
The design is such that error messages indicating how to correct each error that may occur during form input are displayed.
Check ID: 1131
Error messages related to form entry indicate how to correct the error.
ID 1131-content-00
There are no input forms on the screen to be checked.
ID 1131-content-01
When performing form input that causes an error, text information is displayed that indicates how to correct the error.
Check ID: 1141
For functions that involve legal actions, financial transactions, or the modification and deletion of data, the design allows for cancellation, pre-submission confirmation and modification, or error checking and correction at the time of submission.
ID 1141-content-00
There are no functions that involve legal actions, financial transactions, or the modification and deletion of data on the screen to be checked.
ID 1141-content-01
The design allows for cancellation, pre-submission confirmation and modification, or error checking and correction at the time of submission for functions that involve legal actions, financial transactions, or the modification and deletion of data.
Check ID: 1171
Messages that should be treated as status messages, i.e., messages that need to be automatically read by screen readers when displayed or changed, are specified in the design documentation.
ID 1171-content-00
There are no messages that should be treated as status messages on the screen to be checked.
ID 1171-content-01
For messages that should be treated as status messages, it is explicitly stated in the design documentation that they need to be automatically read by screen readers when displayed or changed.
Check ID: 1191
Status messages, such as the result of an operation, are automatically announced by the screen reader.
ID 1191-content-00
No status messages are displayed on the screen to be checked.
Check ID: 1231
There is no automatically updated content that hinders user concentration.
ID 1231-content-00
There is no content that is automatically updated on the screen to be checked.
ID 1231-content-01
The user can change the update frequency of the automatically updated content.
ID 1231-content-02
The user can stop automatic updates.
Check ID: 1251
There is no automatically updated content that hinders user concentration.
ID 1251-content-00
There is no content that is automatically updated on the screen to be checked.
ID 1251-content-01
The user can change the update frequency of the automatically updated content.
ID 1251-content-02
The user can stop automatic updates.
Check ID: 1411
If there is an audio or video player embedded in the page, it is easy to recognize that fact.
ID 1411-content-00
There are no audio or video players embedded in the screen to be checked.
ID 1411-content-01
The audio or video player embedded in the page is properly labeled so that it is clear that there is a player there.
ID 1411-content-02
The audio or video player embedded in the page can be inferred from the text before and after that there is a player there.
Check ID: 1441
There is no conten containing audio that starts automatically and interferes with the screen reader’s speech output.
ID 1441-content-00
There is no content containing audio that starts automatically on the screen to be checked.
ID 1441-content-01
The audio playback of content containing audio that starts automatically ends within 3 seconds.
Check ID: 1451
There is no automatically played video or animation that hinders the user’s attention.
ID 1451-content-00
There is no automatically played video or animation on the screen to be checked.
ID 1451-content-01
The user can change the playback frequency of the automatically played video or animation.
ID 1451-content-02
The user can stop automatic playback.
Check ID: 1471
There are no videos or animations that start automatically and interfere with the user’s attention.
ID 1471-content-00
There are no videos or animations that start automatically on the screen to be checked.
ID 1471-content-01
Videos or animations that start automatically finish playing within 5 seconds.
ID 1471-content-02
The user can stop, pause, or hide videos or animations that start automatically.
Check ID: 1481
Audio and video content is clearly indicated as being supplementary to or an alternative to text information, and is designed so that information is conveyed adequately even when the content is not present.
ID 1481-content-00
There is no audio or video content on the screen to be checked.
ID 1481-content-01
Content of audio, video, or animation is designed to convey the same information as the text information, and the absence of that content does not hinder understanding of the information or use of the service.
ID 1481-content-02
User is explicitly informed that the audio content, video, and animation are the same content as the text information.
Check ID: 1501
The audio and video content is provided in such a way that the information on the screen can be conveyed without any deficiency even without the content, and it is explicitly labeled as an alternative or supplement to the textual information.
ID 1501-content-00
There is no audio content, video, or animation on the screen to be checked.
ID 1501-content-01
The audio content, video, or animation conveys the same information as the text information, and the absence of that content does not hinder understanding of the information or use of the service.
ID 1501-content-02
The audio content, video, and animation are explicitly stated to be the same content as the text information.
Check ID: 1511
Content that includes audio is provided with synchronized captions.
ID 1511-content-00
There is no content that includes audio on the screen to be checked.
ID 1511-content-01
Content that includes audio is provided with synchronized captions.
Check ID: 1531
Synchronized captions are provided for content that includes audio.
ID 1531-content-00
There is no content that includes audio on the target screen.
ID 1531-content-01
Synchronized captions are provided for content that includes audio.
Check ID: 1541
Video content is designed so that visually impaired users who cannot see the video can use the service and obtain necessary information without hindrance.
ID 1541-content-00
There is no video content on the target screen.
ID 1541-content-01
The video content conveys the same information as the text information, and the absence of that video content does not hinder understanding of the information or use of the service.
ID 1541-content-02
The audio track is designed to allow easy inference of the video content.
ID 1541-content-03
Audio description is provided.
ID 1541-content-04
Textual description of the video is provided.
Check ID: 1542
All videos are designed to be understandable to visually impaired individuals who cannot see the images.
ID 1542-content-00
There is no video content on the target screen.
ID 1542-content-01
The audio track is designed to allow easy inference of the video content.
ID 1542-content-02
Audio description is provided.
Check ID: 1561
For video content, visually impaired individuals who cannot see the images can use the service and obtain necessary information without any hindrance.
ID 1561-content-00
There is no video content on the target screen.
ID 1561-content-01
The video content conveys the same information as the text information, and the absence of that video content does not hinder understanding of the information or use of the service.
ID 1561-content-02
For video content, visually presented information can be easily inferred from the content of the originally recorded audio track.
ID 1561-content-03
Video includes audio description.
ID 1561-content-04
A textual description of the video is provided.
Check ID: 1562
All videos are designed to be understandable to visually impaired individuals who cannot see the images.
ID 1562-content-00
There is no video content on the target screen.
ID 1562-content-01
For video content, visually presented information can be easily inferred from the content of the originally recorded audio track.
ID 1562-content-02
Video includes audio description.
Check ID: 1571
For content that consists of audio only without video, a transcript of the audio is provided.
ID 1571-content-00
There is no audio content on the target screen.
ID 1571-content-01
The audio content conveys the same information as the text information, and the absence of that audio content does not hinder understanding of the information or use of the service.
ID 1571-content-02
A text transcribed from the audio content is provided.
Check ID: 1591
For audio-only content with no video, a transcribed audio text is provided.
ID 1591-content-00
There is no audio content on the target screen.
ID 1591-content-01
The audio content conveys the same information as the text information, and the absence of that audio content does not hinder understanding of the information or use of the service.
ID 1591-content-02
A text transcribed from the audio content is provided.
Check ID: 1601
Content that includes audio is provided with synchronized sign language interpretation.
ID 1601-content-00
There is no content with audio on the target screen.
ID 1601-content-01
Content with audio includes synchronized sign language interpretation.
Check ID: 1621
Sign language interpretation synchronized with the audio information is provided.
ID 1621-content-00
There is no content with audio on the target screen.
ID 1621-content-01
Content with audio includes synchronized sign language interpretation.
Check ID: 1631
In content with audio, the background sound is at an appropriate volume.
ID 1631-content-00
There is no audio content on the target screen.
ID 1631-content-01
The audio content is sufficiently audible.
Check ID: 1651
In content with audio, the background sound is at an appropriate volume.
ID 1651-content-00
There is no audio content on the target screen.
ID 1651-content-01
The audio content is sufficiently audible.