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.
Complete List of Accessibility Check Items
The items listed in the “Checklist Items” of each guideline are presented in order of check ID.
For each, the following details are provided. For more information on each item, see Checklist Items.
Check ID
Check Content
Applicable Stages: Design, Code, or Product
Target Platform: Either Web, Mobile, or both
Severity: [CRITICAL]/[MAJOR]/[NORMAL]/[MINOR]
Related Guidelines: Guideline that can be checked for compliance through this checklist item
Supplementary Information: Some include information about the intent or method of conducting the check (same as those published in each related guideline).
Related FAQs: Links to FAQs listed in Frequently Asked Questions (FAQ) that are related to the checklist item
Among those applicable to “Code,” some include examples of implementation methods.
Among those applicable to “Product,” some include examples of how to conduct the checks.
Check ID: 0001
For icons and images, a contrast ratio of at least 3:1 is ensured.
Between the icon and its background color
Between important information within the image and its background color
Between the image and images of text and their adjacent areas
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 0002
Sufficient contrast ratios are ensured for the display colors and background colors of text and images of text.
For text size 29px (22pt) or larger: at least 3:1
For bold text size 24px (18pt) or larger: at least 3:1
In other cases: at least 4.5:1
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Images of Text: Contrast Ratio of Text in Images
Images: Contrast Ratio of Text in Images
- Supplementary Information
Check ID: 0003
Sufficient contrast ratios are ensured for the display colors and background colors of text and images of text.
For text size 24px (18pt) or larger: at least 3:1
For bold text size 19px (14pt) or larger: at least 3:1
In other cases: at least 4.5:1
- Applicable Stages
Design
- Target Platforms
Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 0021
Sufficient contrast ratio is maintained between the display color of the text and the background color.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check Procedure: Web
Confirm 0021-axe-01 or 0021-webaim-01 passes below.
0021-axe-01: An Example of Performin the Check with axe DevTools
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.
0021-webaim-01: An Example of Performin the Check with WebAIM Contrast Checker
Verify 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: 0031
The color scheme is designed to not hinder usability even in grayscale display:
Links can be distinguished
The intent of images and text is conveyed
Required items and errors in input forms can be recognized
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
- Related FAQs
- Supplementary Information
Check ID: 0032
Descriptions are not based solely on one characteristic such as shape, color, size, visual position, direction, or sound, but use multiple elements for explanations.
Example:
- Expressions to avoid
Items in red are required fields.
Refer to the table on the right
Press the blue button
Press the button in the lower right of the screen
- Acceptable expressions
Items marked with a red asterisk (*) are required fields.
Refer to the table on the right (Table 3)
Press the blue “Save” button
Press the “New” button in the lower right of the screen
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
- Supplementary Information
Check ID: 0051
The content is usable when displayed in grayscale, meeting the following:
Links can be identified
The intent of images and text is clear
Required fields and errors in ininput forms can be recognized
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
- Related FAQs
- Supplementary Information
Check ID: 0071
The mouse button’s down event is not used as a trigger.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Input Devices: Do Not Use Down Events as Triggers
- Supplementary Information
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.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Input Devices: Do Not Use Down Events as Triggers
- Supplementary Information
Check Procedure: Web
Confirm 0081-mouse-01 passes below.
0081-mouse-01: An Example of Performin the Check with mouse
Confirm that 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 to meet all of the following criteria:
It is possible to hide the content displayed on mouseover without moving the pointer (e.g., it disappears when the ESC key is pressed).
The content displayed on mouseover is hidden only if the mouseover state is no longer active, the user performs an action to hide it, or the content becomes invalid.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Dynamic Content: Hiding the Content Displayed by Mouseover (Hover)
- Supplementary Information
Check ID: 0092
All content displayed on mouseover is designed so that the content does not disappear even when the pointer is moved over it.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Magnification of the Content Displayed by Mouseover (Hover)
- Supplementary Information
Check ID: 0111
All content displayed on hover meets all of the following
Content displayed on hover can be hidden without moving the mouse pointer. (ESC key to make it disappear, etc.)
Hide content displayed on hover only when it is no longer in hover state, when the user performs an action to hide it, or when the content is no longer valid.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Dynamic Content: Hiding the Content Displayed by Mouseover (Hover)
- Supplementary Information
Check ID: 0112
Content displayed on hover does not disappear when the mouse pointer is moved over it.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Magnification of the Content Displayed by Mouseover (Hover)
- Supplementary Information
Check ID: 0141
If there are shortcut keys that work regardless of which part of the screen the focus is on, one of the following is true
Users can disable the shortcut keys
Users can change shortcut assignments
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Input Devices: When Providing Shortcut Keys
- Supplementary Information
Check ID: 0151
When not using the default focus indicator, an alternative focus indicator is explicitly specified in the design documentation.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[CRITICAL]
- Related Guidelines
Input Devices: Visualization of Focus Areas
- Supplementary Information
Check ID: 0152
The design documentation does not include features that cause the following changes when moving focus using the Tab/Shift+Tab keys:
Form submission
Layout changes
Page transitions
Display of modal dialogs
Significant changes in displayed content, etc.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[CRITICAL]
- Related Guidelines
Forms: Behavior When Focused
Dynamic Content: OnFocus/OffFocus Behavior
- Supplementary Information
Check ID: 0153
The color scheme is designed to make it possible to see the color that indicates the focus area of the screen reader.
- Applicable Stages
Design
- Target Platforms
Mobile
- Severity
[CRITICAL]
- Related Guidelines
Input Devices: Support for Mobile Assistive Technologies
- Supplementary Information
Check ID: 0154
There are no functions in the design documents that cannot be used without using application-specific unique gestures.
- Applicable Stages
Design
- Target Platforms
Mobile
- Severity
[CRITICAL]
- Related Guidelines
Input Devices: Operation by Mobile OS Standard Gestures
- Supplementary Information
Check ID: 0171
Behavior when moving focus using tab/shift+tab keys fulfills all of the following
Focus indicator or alternative display is present
The following behaviors do not occur automatically:
Form Submission
Layout Changes
Page Transitions
Display of modal dialogs
Significant changes in displayed content
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[CRITICAL]
- Related Guidelines
Input Devices: Visualization of Focus Areas
Forms: Behavior When Focused
Dynamic Content: OnFocus/OffFocus Behavior
- Supplementary Information
Check ID: 0172
When moving the focus, the focus moves in a natural order that is consistent with the context, layout, and operating procedures among the following components.
Links and Buttons
Form controls
Everything else that accepts mouse, keyboard, or touch operation
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Input Devices: Enable Keyboard Operation
Input Devices: Support for Mobile Assistive Technologies
Input Devices: Appropriate Focus Order
Links: Appropriate Focus Order
Forms: Enable Keyboard Operation
Forms: Appropriate Focus Order
- Supplementary Information
Check Procedure: Web
Confirm 0172-keyboard-01 passes below.
0172-keyboard-01: An Example of Performin the Check with Keyboard
Confirm the following by moving the focus using Tab key, or Shift+Tab key:
The focus moves to all the links, buttons, form controls, and components that accepts operation.
The focus moves in a natural order that is consistent with the context, layout, and operating procedures.
Check Procedure: iOS
Confirm 0172-iosvo-01 passes below.
0172-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm the following by moving the focus with one-finger left/right flicks with iOS VoiceOver enabled:
Selected state moves in a natural order that is consistent with displayed content and its meaning.
Nothing besides text displayed on the screen and the alternative text of images being displayed is announced.
Everything displayed on the screen is announced.
Check Procedure: Android
Confirm 0172-androidtb-01 passes below.
0172-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm the following by moving the focus with one-finger left/right flicks with Android TalkBack enabled:
Selected state moves in a natural order that is consistent with displayed content and its meaning.
Nothing besides text displayed on the screen and the alternative text of images being displayed is announced.
Everything displayed on the screen is announced.
Check ID: 0201
When moving the focus using Tab/Shift+Tab keys, the focus does not get stuck at certain location, or
If the focus gets stuck at certain location, simple operation such as pressing arrow keys or Esc key gets the focus away from the location
Examples of components that require special caution:
audio and/or video players
pop-up menus
modal dialogs
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[CRITICAL]
- Related Guidelines
Input Devices: Avoid Keyboard Traps
Audio and Video Content: Avoid Keyboard Traps
- Supplementary Information
Check Procedure: Web
Confirm 0201-keyboard-01 passes below.
0201-keyboard-01: An Example of Performin the Check with Keyboard
Use the Tab key to sequentially move the focus from the top of the page and confirm the following:
Pressing the Tab key or Shift+Tab key does not cause a situation where the focus cannot escape from a specific location, or
If the focus cannot escape by pressing the Tab key or Shift+Tab key, it is possible to remove the focus from the corresponding location with simple key operations such as the arrow keys or the Esc key.
Check ID: 0211
Elements that accept mouse actions such as clicks or mouseovers are designed to be operable with the keyboard alone.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Input Devices: Enable Keyboard Operation
- Supplementary Information
Check ID: 0231
Anything that accepts mouse operation, such as clicks and hover, can also be operated using only the keyboard.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Input Devices: Enable Keyboard Operation
- Supplementary Information
Check ID: 0241
Link text is not merely ‘click here’ or similar phrases, and is designed so that the destination can be somewhat inferred from the wording of the link text.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MINOR]
- Related Guidelines
Links: Appropriate Link Text
- Supplementary Information
Check ID: 0242
Consistent text and icons are used for links and buttons with the same destination or purpose in the same context.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Icons: Consistency of Icons
Links: Consistent Link Text
Check ID: 0261
Only the “here” part of “click here for *” is not a link. (In this case, the entire “click here for *” should be a link.) or
The intent of the link text is clear from its markup
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MINOR]
- Related Guidelines
Links: Appropriate Link Text
- Supplementary Information
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.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Icons: Consistency of Icons
Links: Consistent Link Text
Check ID: 0271
The text of headings appropriately reflects the content.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
- Related FAQs
- Supplementary Information
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]
- Related Guidelines
- Supplementary Information
Check ID: 0321
Magnifying text up to 200 percent using the zoom function of the browser does not cause layout collapses that interfere with understanding of the text.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
- Supplementary Information
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]
- Related Guidelines
- Supplementary Information
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]
- Related Guidelines
- Supplementary Information
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]
- Related Guidelines
- Supplementary Information
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]
- Related Guidelines
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]
- Related Guidelines
Check ID: 0331
When an image is used as a link or button, the area that responds to clicks or touches is sufficiently large, and this area is explicitly specified in the design documentation.
For desktop Web, at least 24 x 24 CSS pixels, preferably more than 44 x 44 CSS pixels
For mobile Web, more than 44 x 44 CSS pixels”
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
- Related FAQs
- Supplementary Information
Check ID: 0332
When altering the appearance of form controls such as checkboxes, radio buttons, and buttons from the browser’s default, the area responsive to clicks or touches is sufficiently large, and this area is explicitly specified in the design documentation.
For desktop Web, at least 24 x 24 CSS px, preferably more than 44 x 44 CSS px
For mobile Web, more than 44 x 44 CSS px
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 0333
When using images as links or buttons, the area responsive to clicks or touches is sufficiently large, and this area is explicitly specified in the design documentation.
- For iOS:
44 x 44 px (as specified in the OS’s UI guidelines)
- For Android:
Tap size at 48 x 48 px with an 8px space visually (as specified in the OS’s UI guidelines)
Visually, ensure a height of 36px for horizontally elongated shapes and 40px for square shapes
- Applicable Stages
Design
- Target Platforms
Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 0334
Form controls such as checkboxes, radio buttons, buttons, and other interactive elements have a sufficiently large area responsive to clicks or touches, and this area is explicitly specified in the design documentation.
- For iOS:
44 x 44 px (as specified in the OS’s UI guidelines)
- For Android:
Tap size at 48 x 48 px with an 8px space visually (as specified in the OS’s UI guidelines)
Visually, ensure a height of 36px for horizontally elongated shapes and 40px for square shapes
- Applicable Stages
Design
- Target Platforms
Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 0351
Images used as buttons or links have large enough area that responds to clicks and touches
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
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
- Related FAQs
- Supplementary Information
Check ID: 0352
Form controls, such as checkboxes, radio buttons, buttons, etc., have large enough area that responds to clicks and touches, when their appearance is changed from the browser default.
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
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 0361
Design such that information displayed or functions executable on mouseover can also be displayed or executed when operating solely with a keyboard, or with a touch UI.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Input Devices: Enable Keyboard Operation
- Supplementary Information
Check ID: 0362
There are no features or information that can only be accessed by using methods other than standard touch operations, such as shaking the device.
- Applicable Stages
Design
- Target Platforms
Mobile
- Severity
[MAJOR]
- Related Guidelines
Input Devices: Do Not Assume Specific Input Devices
- Supplementary Information
Check ID: 0371
In situations where the user inputs text, such as in edit boxes or custom-implemented components for entering passwords, input via an external keyboard is possible, regardless of when the external keyboard is connected.
- Applicable Stages
Code
- Target Platforms
Mobile
- Severity
[MAJOR]
- Related Guidelines
Input Devices: Do Not Assume Specific Input Devices
- Supplementary Information
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
altattribute, which makes the role or meaning understandable, is explicitly specified in the design documentation.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
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]
- Related Guidelines
Icons: Provide Text Information
Implementation Example: Associate the Displayed Text With the Icon
- Web
Use the
aria-labelledbyattribute.
Implementation Example: Add a Label to the Icon
- Web
Use the
altattribute or thearia-labelattribute.
- iOS
Specify with
accessibilityLabel.
- Android
Specify with the
contentDescriptionattribute.
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]
- Related Guidelines
Icons: Provide Text Information
- Related FAQs
Implementation Example: Ensure That the Content Is Not Read Out by the Screen Reader
- Web
For the
imgelement, specify an emptyaltattribute (alt="").For elements other than the
imgelement, do not specify thearia-labelattribute or thearia-labelledbyattribute.
- iOS
Set
isAccessibilityElementtofalse.- Android
Set
importantForAccessibilitytono.
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]
- Related Guidelines
Icons: Provide Text Information
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 Procedure: iOS
Confirm 0411-iosvo-01 passes below.
0411-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm the following with iOS VoiceOver enabled:
Cofirm that text describing the role of the icon is announced when reaching an icon by one-finger left/right flicks.
Cofirm that text describing the role of the icon is announced when an icon is touched, instead of reaching it by flicking.
Check Procedure: Android
Confirm 0411-androidtb-01 passes below.
0411-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm the following with Android TalkBack enabled:
Cofirm that text describing the role of the icon is announced when reaching an icon by one-finger left/right flicks.
Cofirm that text describing the role of the icon is announced when the icon is touched, instead of reaching it by flicking.
Check ID: 0412
There are no icons that do not have text labels, 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.)
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
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]
- Related Guidelines
Icons: Provide Text Information
- Related FAQs
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.
Check Procedure: iOS
Confirm 0413-iosvo-01 passes below.
0413-iosvo-01: An Example of Performin the Check with iOS 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 one-finger left/right flicks with iOS VoiceOver enabled.
Check Procedure: Android
Confirm 0413-androidtb-01 passes below.
0413-androidtb-01: An Example of Performin the Check with Android TalkBack
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 one-finger left/right flicks with Android TalkBack enabled.
Check ID: 0421
Concise and sufficient descriptions related to images are explicitly specified in the design documentation. And,
If a short text is not enough for explanation, detailed descriptive text is explicitly specified in the design documentation.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Images: Provide Image Descriptions
- Related FAQs
- Supplementary Information
Check ID: 0431
A concise and sufficient description is added to the image. And
If a detailed description is necessary, it is displayed immediately before or after the image, or it is associated with the image.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Images: Provide Image Descriptions
- Related FAQs
- Supplementary Information
Implementation Example: Adding a Concise Description
- Web
Specify with the
altattribute or thearia-labelattribute.To use the displayed text as a concise description, associate that text with the image using the
aria-labelledbyattribute.
- iOS
Specify with
accessibilityLabel.
- Android
Specify with
contentDescription.
Implementation Example: Adding a Detailed Description
- Web
If the detailed description and the image are not close to each other in the DOM tree, associate them using the
aria-describedbyattribute.
Check ID: 0441
Image descriptions are properly announced by the screen reader.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Images: Provide Image Descriptions
- Related FAQs
- Supplementary Information
Check Procedure: Web
Confirm 0441-axe-01 and 0441-content-01 pass, and (0441-nvda-01 or 0441-macvo-01 passes) below.
0441-axe-01: An Example of Performin the Check with axe DevTools
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.
0441-content-01: An Example of Performin the Check with Miscellaneous Methods
Confirm that brief and detailed descriptions announced by the screen reader properly convey the content of the image.
0441-nvda-01: An Example of Performin the Check with NVDA
Using NVDA, confirm that a brief description of the image is announced when performing the following:
When reading the part with the image using arrow keys in browse mode
When the image receives focus with Tab / Shift + Tab key operation, for focusable images, such as links.
Confirm that one of the following is true for images that require detailed description
Detailed description is placed immediately before or after the image, and it is announced when using arrow keys in browse mode.
Detailed description is announced when reading the image using arrow keys in browse mode.
Reference Videos: 画像の説明【NVDAでアクセシビリティー チェック】
0441-macvo-01: An Example of Performin the Check with macOS VoiceOver
Using macOS VoiceOver, confirm that a brief description of the image is announced when performing the following:
When reading the part with the image using the VO key and the left/right arrow keys to operate the VoiceOver cursor.
When the image receives focus with Tab / Shift + Tab key operation, for focusable images, such as links.
Confirm that one of the following is true for images that require detailed description
Detailed description is placed immediately before or after the image, and it is announced when using the VO key and the left/right arrow keys to operate the VoiceOver cursor.
Detailed description is announced when reading the image using the VO key and the left/right arrow keys to operate the VoiceOver cursor.
Check Procedure: iOS
Confirm 0441-iosvo-01 passes below.
0441-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm the following with iOS VoiceOver enabled:
Cofirm that text describing the meaning of the image is announced when reaching an image by one-finger left/right flicks.
Cofirm that text describing the meaning of the image is announced when an image is touched, instead of reaching it by flicking.
Confirm that the announced description properly represents the content of the image.
Check Procedure: Android
Confirm 0441-androidtb-01 passes below.
0441-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm the following with Android TalkBack enabled:
Cofirm that text describing the meaning of the image is announced when reaching an image by one-finger left/right flicks.
Cofirm that text describing the meaning of the image is announced when an image is touched, instead of reaching it by flicking.
Confirm that the announced description properly represents the content of the image.
Check ID: 0451
It is explicitly stated in the design documentation that images which do not carry any information or functionality must not have descriptive text added to them.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Images: Ignore Decorative Images
- Related FAQs
- Supplementary Information
Check ID: 0461
Images that have no information or functionality are ignored by screen readers.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Images: Ignore Decorative Images
- Related FAQs
- Supplementary Information
Implementation Example: Make It Ignored by Screen Readers
- Web
Specify an empty
altattribute (alt=""). OrSpecify
role="presentation".
- iOS
Set
isAccessibilityElementtofalse.
- Android
Set
importantForAccessibilitytono.
Check ID: 0471
Images that do not contain any information or functionality are ignored by the screen reader.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Images: Ignore Decorative Images
- Related FAQs
- Supplementary Information
Check Procedure: Web
Confirm 0471-nvda-01 or 0471-macvo-01 passes below.
0471-nvda-01: An Example of Performin the Check with NVDA
Confirm that the presence of the image is not announced when passing over the image using arrow keys in NVDA’s browse mode.
Reference Videos: 情報や機能性を持たない画像【NVDAでアクセシビリティー チェック】
0471-macvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm that the presence of the image is not announced when passing over the image using the VO key and the left/right arrow keys to operate the VoiceOver cursor with macOS VoiceOver enabled.
Check Procedure: iOS
Confirm 0471-iosvo-01 passes below.
0471-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm that the image is ignored and nothing is announced when moving the focus by one-finger left/right flicks with iOS VoiceOver enabled.
Check Procedure: Android
Confirm 0471-androidtb-01 passes below.
0471-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm that the image is ignored and nothing is announced when moving the focus by one-finger left/right flicks with Android TalkBack enabled.
Check ID: 0481
The design documentation does not contain any instances of text that is to be implemented using images of text, except for the company’s and others’ logos, banners, and text within diagrams or photos.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Images of Text: Avoid the Use of Images of Text
- Supplementary Information
Check ID: 0501
There are no images of text, except for text within logos of companies, banners, figures, or photographs.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Images of Text: Avoid the Use of Images of Text
- Supplementary Information
Check ID: 0511
The text that has the same content as images of text is explicitly stated as the alternative text for those images in the design documentation.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Images of Text: Provide Text Information
- Supplementary Information
Check ID: 0521
The same content as images of text is also provided as text data in a form that can be recognized by screen readers.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Images of Text: Provide Text Information
- Supplementary Information
Implementation Example: Providing Text Data
- Web
Use the
altattribute or thearia-labelattribute
- iOS
Use the
accessibilityLabel
- Android
Use the
contentDescription
Check ID: 0531
The screen reader announces the same content as the images of text.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Images of Text: Provide Text Information
- Supplementary Information
Check Procedure: Web
Confirm 0531-nvda-01 or 0531-macvo-01 passes below.
0531-nvda-01: An Example of Performin the Check with NVDA
Confirm that the same text as contained in the image is announced when using arrow keys in NVDA’s browse mode.
Reference Videos: 画像化されたテキスト【NVDAでアクセシビリティー チェック】
0531-macvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm that the same text as contained in the image is announced when using the VO key and the left/right arrow keys to operate the VoiceOver cursor with macOS VoiceOver enabled.
Check Procedure: iOS
Confirm 0531-iosvo-01 passes below.
0531-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm the following with iOS VoiceOver enabled:
Cofirm that the same text as contained in the image is announced when reaching the image by one-finger left/right flicks.
Cofirm that the same text as contained in the image is announced when the image is touched, instead of reaching it by flicking.
Check Procedure: Android
Confirm 0531-androidtb-01 passes below.
0531-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm the following with Android TalkBack enabled:
Cofirm that the same text as contained in the image is announced when reaching the image by one-finger left/right flicks.
Cofirm that the same text as contained in the image is announced when the image is touched, instead of reaching it by flicking.
Check ID: 0541
It is explicitly stated in the design documentation what should be expressed as headings.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Markup and Implementation: Implement or Utilize Markup to Accurately Represent Document Structure
Pages in General: Appropriate Sectioning and Headings
- Supplementary Information
Check ID: 0542
It is explicitly stated in the design documentation what should be expressed as lists, tables, etc., along with the HTML elements or the design system components to be used.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Markup and Implementation: Implement or Utilize Markup to Accurately Represent Document Structure
- Supplementary Information
Check ID: 0543
Appropriate heading levels are specified for headings:
Heading levels reflect the document’s hierarchical structure
Across the entire page, heading levels start from 1
Heading levels increase sequentially by one at each level, such as 2 being subordinate to 1, and 3 to 2, ensuring there are no gaps
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Markup and Implementation: Implement or Utilize Markup to Accurately Represent Document Structure
Pages in General: Appropriate Sectioning and Headings
- Supplementary Information
Check ID: 0551
Headings are implemented appropriately according to the design documentation.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Markup and Implementation: Implement or Utilize Markup to Accurately Represent Document Structure
Pages in General: Appropriate Sectioning and Headings
- Supplementary Information
Implementation Example: Heading Implementation
- Web
Mark up with
h1toh6.- iOS
Set
UIAccessibilityTraits.header.- Android
Set
android:accessiblityHeadingtotruefor the text in question (Android 9 or later)
Check ID: 0552
The semantics of lists, tables, etc. are implemented appropriately according to the design documentation.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Markup and Implementation: Implement or Utilize Markup to Accurately Represent Document Structure
- Supplementary Information
Implementation Example: Implementation According to Semantics
- Web
Use lists (
ul,ol,dl), tables (table), etc.Use the appropriate components of the design system
Check ID: 0553
Buttons are implemented with the button element, links are implemented with the a element that has an href attribute, and various form controls such as edit boxes, check boxes, and radio buttons are implemented with the appropriate HTML elements.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Markup and Implementation: Implementation of Interactive UI Components
- Supplementary Information
Check ID: 0554
UI components are implemented using standard components of the OS or development framework.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Markup and Implementation: Implementation of Interactive UI Components
- Supplementary Information
Check ID: 0561
Headings are recognized by the screen reader as headings of the heading levels indicated in the design documents.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Markup and Implementation: Implement or Utilize Markup to Accurately Represent Document Structure
Pages in General: Appropriate Sectioning and Headings
- Supplementary Information
Check Procedure: Web
Confirm 0561-axe-01 passes, and (0561-nvda-01 or 0561-macvo-01 passes) below.
0561-axe-01: An Example of Performin the Check with axe DevTools
Confirm that none of the following issues is reported混地裁.
0561-nvda-01: An Example of Performin the Check with NVDA
With NVDA, display the heading list by steps below, and confirm that all headings on the page are displayed appropriately.
Display the elements list in browse mode (NVDA+F7)
Set the “Type” to “Headings” ():kbd:Alt+H)
Reference Videos: 見出し【NVDAでアクセシビリティー チェック】
0561-macvo-01: An Example of Performin the Check with macOS VoiceOver
With macOS VoiceOver, display the heading list by steps below, and confirm that all headings on the page are displayed appropriately.
Press VO + U to display the rotor menu
Select “Headings”
Check Procedure: iOS
Confirm 0561-iosvo-01 passes below.
0561-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm that all the headings can be reached by one-finger up/down flicks after choosing “headings” by the rotor gesture of iOS VoiceOver.
Check Procedure: Android
Confirm 0561-androidtb-01 passes below.
0561-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm that all the headings can be reached by one-finger up/down flicks after choosing “headings” for reading controls of Android TalkBack.
Check ID: 0562
The screen reader properly recognizes tables and their cells.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Markup and Implementation: Implement or Utilize Markup to Accurately Represent Document Structure
- Supplementary Information
Check Procedure: Web
Confirm 0562-nvda-01 passes below.
0562-nvda-01: An Example of Performin the Check with NVDA
Confirm that all of the following are met using NVDA.
The table can be found by the following steps:
Move to the beginning of the page in browse mode ():kbd:Ctrl+Home)
Move to the table using the go to next/previous table functions (T or Shift+T)
Content of the table cells are announced properly when moving among the cells using the following steps:
Find the beginning of the table in browse mode
Move among the cells using following keys:
Ctrl+Alt+←: to the left cell
Ctrl+Alt+→: to the right cell
Ctrl+Alt+↓: to the cell below
Ctrl+Alt+↑: to the cell above
What to be announced when moving among table cells：
The following content is announced when moving among cells using the functions listed above.
move to left/right: the column header, column number, and the content of the destination cell
move up/down: the row header, row number, and the content of the destination cell
The following is announced if arrow keys are simply used in browse mode:
up/down arrows: move to the previous/next cell and announce the cell content; only a part of the cell might be read if there are line-breaks within the cell.
left/right arrows: move and announce character by character; the behavior on empty cells is as if there is only one space character
Reference Videos: 表【NVDAでアクセシビリティー チェック】
Check ID: 0571
The code passes checks by a validator or linter.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Markup and Implementation: Valid Markup
- Supplementary Information
Check ID: 0581
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.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Markup and Implementation: Make Components Accessible
Input Devices: Enable Keyboard Operation
Input Devices: Support for Mobile Assistive Technologies
Forms: Enable Keyboard Operation
- Supplementary Information
Check ID: 0586
Custom UI components are implemented so that their roles and states are appropriately conveyed to assistive technologies such as screen readers.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Markup and Implementation: Make Components Accessible
Input Devices: Enable Keyboard Operation
Input Devices: Support for Mobile Assistive Technologies
Forms: Enable Keyboard Operation
- Supplementary Information
Implementation Example: Conveying Roles to Screen Readers
- Web
Specify the
roleattribute appropriately.- iOS
Specify the appropriate
accessibilityTraits.
- Android
If using jetpack compose: Specify the
roleattribute appropriatelyIf not using jetpack compose: Override the
getAccessibilityClassName()method of the view to return an appropriate value.
Check ID: 0587
Components with multiple states are implemented so that their states are understandable both visually and by screen readers. (For example, the currently selected tab in a tab UI, icons that change according to their state, etc.)
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Markup and Implementation: Make Components Accessible
- Supplementary Information
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.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Markup and Implementation: Make Components Accessible
- Supplementary Information
Check Procedure: Web
Confirm 0591-nvda-01 passes below.
0591-nvda-01: An Example of Performin the Check with NVDA
Confirm that all of the following are met using NVDA:
Users can recognize that the component accepts some operation when reading the part in browse mode.
All of the functions provided in the part can be operated at least by keyboard in focus mode.
If the displayed content changes upon operation, users can recognize it through the announcement.
If the displayed content changes upon operation, users can read the updated content in browse mode.
Reference Videos: 開閉するボタン【NVDAでアクセシビリティー チェック】
Check ID: 0592
The state of components with multiple states can be determined by the screen reader. (e.g., the currently selected tab in the tabbed UI, icons that change according to state, etc.)
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Markup and Implementation: Make Components Accessible
- Supplementary Information
Check ID: 0611
Japanese pages have the <html lang="ja"> specified.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[CRITICAL]
- Related Guidelines
- Supplementary Information
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]
- Related Guidelines
- Supplementary Information
Check Procedure: Web
Confirm 0621-axe-01 and 0621-nvda-01 pass below.
0621-axe-01: 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 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)
0621-nvda-01: 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 NVDA’s browse mode.
To perform this check properly, the settings need to be done for processing multiple languages.
Reference Videos: 適切な言語の音声【NVDAでアクセシビリティー チェック】
Check ID: 0631
The design documentation explicitly states a title that indicates the purpose of the page/screen and is different from the titles of other pages/screens.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Specify a Title
- Supplementary Information
Check ID: 0651
The page/screen has a title that indicates its purpose and is different from other pages/screens.
It is displayed in the title bar/tab bar of the browser.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Specify a Title
- Supplementary Information
Check ID: 0661
The design documentation explicitly states in a consistent manner across multiple pages which parts of the page should be marked up with the header, nav, main, and footer elements.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate Regions That Compose a Page
Pages in General: Consistent Sequence of Components
- Supplementary Information
Check ID: 0671
The
header,main,nav, andfooterelements are used appropriately, orthey are explicitly indicated by the
roleattribute.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate Regions That Compose a Page
- Supplementary Information
Check ID: 0672
The
mainelement reflects the start of the main content, orthere is a heading marked up with an
h1orh2element at the beginning of the main content.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate the Beginning of the Main Content
- Supplementary Information
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.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate the Beginning of the Main Content
- Supplementary Information
Check Procedure: Web
Confirm 0681-axe-01 passes, and (0681-nvda-01 or 0681-nvda-02 or 0681-macosvo-01 or 0681-macosvo-02 passes) below.
0681-axe-01: An Example of Performin the Check with axe DevTools
Confirm that none of the following issues are reported by axe DevTools.
0681-nvda-01: An Example of Performin the Check with NVDA
Confirm that users can move to the position immediately before the main body using the jump to next/previous heading function ( H / Shift + H key) in NVDA’s browse mode.
Reference Videos: 本文の開始位置【NVDAでアクセシビリティー チェック】
0681-nvda-02: An Example of Performin the Check with NVDA
Confirm that users can move to the beginning of the main landmark using the jump to next landmark function ( D` key) in NVDA’s browse mode, and the main body begins immediately after that position.
0681-macosvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm that users can move to the position immediately before the main body using the jump to next/previous heading function of macOS VoiceOver ( VO + Command + H / VO + Command + Shift + H key).
0681-macosvo-02: An Example of Performin the Check with macOS VoiceOver
Confirm that users can move to the beginning of the main landmark by the following steps with macOS VoiceOver enabled, and the main body begins immediately after that position.
Press VO + U to display the rotor menu
Select “Landmarks”
Select “Main” and press Enter
Check ID: 0682
All content on the page is placed in the appropriate area indicated by ARIA landmarks.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate Regions That Compose a Page
- Supplementary Information
Check Procedure: Web
Confirm 0682-axe-01 and 0682-misc-01 pass below.
0682-axe-01: An Example of Performin the Check with axe DevTools
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: 0711
The content is read aloud in an order which is natural both visually and semantically, when read by the screen reader, including when the page/screen state changes.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Pages in General: Appropriate Markup Order
Dynamic Content: Maintaining Appropriate Information Provision To Assistive Technology
- Supplementary Information
Check Procedure: Web
Confirm 0711-nvda-01 or 0711-macvo-01 passes below.
0711-nvda-01: An Example of Performin the Check with NVDA
With NVDA running, confirm the following:
Confirm that the content is read aloud in an order which is natural, and does not hinder the understanding of the meaning when reading from the top of the page using arrow keys in browse mode.
Confirm that the content is read aloud in the appropriate order in all states when there are mechanisms that change the display content without transitioning to another page.
0711-macvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm the following with macOS VoiceOver enabled:
Confirm that the content is read aloud in an order which is natural, and does not hinder the understanding of the meaning when reading from the top of the page using the VO key and the left/right arrow keys to operate the VoiceOver cursor.
Confirm that the content is read aloud in the appropriate order in all states when there are mechanisms that change the display content without transitioning to another page.
Check Procedure: iOS
Confirm 0711-iosvo-01 passes below.
0711-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm the following with iOS VoiceOver enabled:
Confirm that the content is read aloud in an order which is natural, and does not hinder the understanding of the meaning when moving the focus with one-finger left/right flicks.
Confirm that the content is read aloud in the appropriate order in all states when there are mechanisms that change the display content without transitioning to another page.
Check Procedure: Android
Confirm 0711-androidtb-01 passes below.
0711-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm the following with Android TalkBack enabled:
Confirm that the content is read aloud in an order which is natural, and does not hinder the understanding of the meaning when moving the focus with one-finger left/right flicks.
Confirm that the content is read aloud in the appropriate order in all states when there are mechanisms that change the display content without transitioning to another page.
Check ID: 0721
Headings are placed appropriately at the beginning of the page, at the beginning of the main content, and at the beginning of each section.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Appropriate Sectioning and Headings
- Supplementary Information
Check ID: 0722
In screens containing multiple types of information, headings are placed at the divisions of information.
- Applicable Stages
Design
- Target Platforms
Mobile
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Appropriate Sectioning and Headings
- Supplementary Information
Check ID: 0751
The design does not assume use fixed to a specific screen orientation.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Pages in General: Do Not Lock Screen Orientation
- Supplementary Information
Check ID: 0771
On devices that can detect screen orientation, the screen will rotate appropriately when the device orientation is changed.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Do Not Lock Screen Orientation
- Supplementary Information
Check ID: 0781
Components commonly used across multiple pages/screens, such as global navigation, headers, footers, breadcrumb lists, and support UI, appear in the same order on all pages/screens. And,
The appearance order of links and buttons within these components is the same on all pages/screens.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Consistent Sequence of Components
- Supplementary Information
Check ID: 0801
Components commonly used on multiple pages/screens, such as global navigation, header, footer, breadcrumb list, and support UI, have the same order of appearance on all pages/screens. and
The order of appearance of links and buttons within these components is the same on all pages/screens.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Consistent Sequence of Components
- Supplementary Information
Check Procedure: Web
Confirm 0801-keyboard-01 passes, and (0801-nvda-01 or 0801-macvo-01 passes) below.
0801-keyboard-01: An Example of Performin the Check with Keyboard
Confirm that the focus moves in a consistent order across multiple pages when moving the focus using the Tab key and Shift+Tab key.
0801-nvda-01: An Example of Performin the Check with NVDA
Confirm that the reading order is consistent across multiple pages when reading the content using the up/down arrow keys in NVDA’s browse mode.
Reference Videos: 同じ出現順序【NVDAでアクセシビリティー チェック】
0801-macvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm that the reading order is consistent across multiple pages when reading the content using the VO key and the left/right arrow keys to operate the VoiceOver cursor with macOS VoiceOver enabled.
Check Procedure: iOS
Confirm 0801-iosvo-01 passes below.
0801-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Confirm that the reading order is consistent across multiple screens when moving the focus using one-finger left/right flicks with iOS VoiceOver enabled.
Check Procedure: Android
Confirm 0801-androidtb-01 passes below.
0801-androidtb-01: An Example of Performin the Check with Android TalkBack
Confirm that the reading order is consistent across multiple screens when moving the focus using one-finger left/right flicks with Android TalkBack enabled.
Check ID: 0811
There are multiple ways to reach that page. However, this does not apply to pages displayed as a result of specific actions or those shown during a process (e.g., a wizard).
Examples:
It can be accessed from both the navigation menu and so-called hub pages.
In addition to transitioning from links on a specific page, it can also be accessed through the site’s search function.
It can also be accessed from links within the help page.
- Applicable Stages
Design
- Target Platforms
Web
- Severity
[MINOR]
- Related Guidelines
Pages in General: Multiple Ways
- Supplementary Information
Check ID: 0841
If there is a global navigation or so-called breadcrumb list, the position of the page/screen within the site or application is indicated in the global navigation or breadcrumb list.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate Current Location
- Supplementary Information
Check ID: 0851
The position of that page/screen is explicitly indicated within the global navigation or breadcrumb list.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate Current Location
- Supplementary Information
Implementation Example: Indicating Position
- Web
Assign the
aria-currentattribute.
Check ID: 0861
The screen reader announces the location of current page within the global navigation and breadcrumb list.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate Current Location
- Supplementary Information
Check Procedure: Web
Confirm 0861-nvda-01 or 0861-macvo-01 passes below.
0861-nvda-01: An Example of Performin the Check with NVDA
Confirm that the part that represents the currently displayed page in the breadcrumbs or global navigation is indicated by announcement such as “current page” when reading the content using arrow keys in NVDA’s browse mode.
Reference Videos: 現在のページ【NVDAでアクセシビリティー チェック】
0861-macvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm that the part that represents the currently displayed page in the breadcrumbs or global navigation is indicated by announcement such as “current page” when reading the content using the VO key and the left/right arrow keys with macOS VoiceOver enabled.
Check ID: 0862
There is a visual indication of the location of current page within the global navigation and the breadcrumb list.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Pages in General: Indicate Current Location
- Supplementary Information
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]
- Related Guidelines
- Supplementary Information
Check ID: 0911
The lang attribute is correctly specified for text that contains multiple languages.
- Applicable Stages
Code
- Target Platforms
Web
- Severity
[MINOR]
- Related Guidelines
- Supplementary Information
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]
- Related Guidelines
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.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[MINOR]
- Related Guidelines
- Supplementary Information
Check Procedure: Web
Confirm 0921-nvda-01 passes below.
0921-nvda-01: An Example of Performin the Check with NVDA
Confirm that the voices for reading content change according to the natural language used in the content when reading with arrow keys in NVDA’s browse mode.
Reference Videos: 複数の言語の音声【NVDAでアクセシビリティー チェック】
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]
- Related Guidelines
Check Procedure: Web
Confirm 0922-nvda-01 passes below.
0922-nvda-01: 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 NVDA’s 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.)
Check ID: 0931
In order to make the roles of form controls, such as edit boxes, checkboxes, and radio buttons understandable, design documentation explicitly specifies the labels to be added.
- For the web:
Specify text displayed on the screen or images with alternative text as labels.
Explicitly specify the text that should be designated as the
aria-labelattribute value.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
- Supplementary Information
Check ID: 0941
Form controls such as edit boxes, check boxes, and radio buttons have labels that indicate their purposes.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
- Supplementary Information
Implementation Example: Labeling Form Controls
- Web
Associate the displayed text or image with the
labelelement or thearia-labelledbyattribute, orSpecify the label with the
aria-labelattribute.
- iOS
Use
accessibilityLabel.
- Android
Use
labelFor.
Implementation Example: Checking for Appropriate States
- Web
When checked with developer tools, the accessible name of the form control specifies text that indicates its purpose.
Check ID: 0951
Form controls, such as edit boxes, check boxes, and radio buttons, are properly labeled.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
- Supplementary Information
Check Procedure: Web
Confirm 0951-axe-01 passes, and (0951-nvda-01 or 0951-macvo-01 passes) below.
0951-axe-01: An Example of Performin the Check with axe DevTools
Confirm that none of the following issues are reported by axe DevTools.
0951-nvda-01: An Example of Performin the Check with NVDA
Confirm that the appropriate text, corresponding to the form control is announced when moving focus to the form control using Tab / Shift + Tab keys in NVDA’s focus mode.
0951-macvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm that the appropriate text, corresponding to the form control is announced when moving focus to the form control using Tab / Shift + Tab keys with VoiceOver enabled.
Check ID: 0956
Radio buttons can be operated using the keyboard.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Forms: Enable Keyboard Operation
- Supplementary Information
Check Procedure: Web
Confirm 0956-keyboard-01 passes below.
0956-keyboard-01: An Example of Performin the Check with Keyboard
Perform keyboard operations and confirm that all of the following are met:
Radio buttons are grouped in appropriate units, such as choices for the same question, and when moving the focus using the Tab/Shift+Tab keys, the focus moves to only one radio button in each group.
When the focus is on a radio button in a group, the selection state of the radio buttons in the group can be changed using the arrow keys, and the focus moves to the selected radio button.
When the selection state of a radio button is changed using the arrow keys, the state of a radio button that does not belong to the group is not affected or the focus does not move to such a radio button.
Check ID: 0957
Check boxes can be operated using the keyboard.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Forms: Enable Keyboard Operation
- Supplementary Information
Check Procedure: Web
Confirm 0957-keyboard-01 passes below.
0957-keyboard-01: An Example of Performin the Check with Keyboard
Perform keyboard operations and confirm that all of the following are met:
There are no check boxes that cannot be reached when moving the focus using the Tab/Shift+Tab keys.
The on/off state of the focused check box can be toggled by pressing the space key.
Check ID: 0961
Form inputs are not subject to time limits. Or, they meet one of the following conditions:
Users can disable the time limit in advance. Or,
Users can make a significant adjustment to the time limit, exceeding at least ten times the default setting, in advance. Or,
Users are warned before time expires and can extend the time limit by at least 20 seconds with a simple action, such as pressing the space bar, at least ten times. Or,
The time limit is an essential element of a real-time event (e.g., an auction) and there is no alternative to the time limit. Or,
The time limit is essential and extending it would invalidate the form. Or,
The time limit is longer than 20 hours.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Forms: Time Limit for Form Input
- Supplementary Information
Check ID: 1021
If the time limit is exceeded while entering information into a form with a set time limit, it is possible to resume input without losing the content entered up to that point.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
- Supplementary Information
Check ID: 1051
There are no functions in the design documentation where changing the value of a field in a form, or moving the focus after changing a value, triggers significant changes to the display content affecting the entire page/screen, page/screen transitions, or changes to the values of other fields.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
- Supplementary Information
Check ID: 1071
Manipulating form controls, such as edit boxes, checkboxes, radio buttons, buttons, etc., within the page/screen doesn not cause behavior such as:
The display content changes significantly.
Automatic transition to another page/screen
The content of a field already entered by the user is automatically changed (especially undesirable if the field being changed is located before the field that was manipulated).
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
- Supplementary Information
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.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 1101
When an error related to form entry occurs, text information that specifically identifies the nature of the error is displayed.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 1111
The design documentation explicitly specifies error messages that indicate how to correct errors in form input.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
Check ID: 1131
Error messages related to form entry indicate how to correct the error.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
- Supplementary Information
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.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Forms: Prevention of Misoperation
- Supplementary Information
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.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Appropriate Implementation of Status Messages
- Supplementary Information
Check ID: 1181
Status messages and the results of operations are automatically read out.
- Applicable Stages
Code
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Appropriate Implementation of Status Messages
- Supplementary Information
Implementation Example: Automatically Read Out
- Web
Use the
aria-liveattribute.- iOS
Put
.announcementand the message in the argument ofUIAccessibility.post(notification:argument:). (Reference: https://developer.apple.com/documentation/uikit/uiaccessibility/notification/1620176-announcement )- Android
Put the message in
Toast,SnackBar, etc., and ensure that it is read out appropriately by TalkBack.
Check ID: 1191
Status messages, such as the result of an operation, are automatically announced by the screen reader.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Appropriate Implementation of Status Messages
- Supplementary Information
Check Procedure: Web
Confirm 1191-nvda-01 passes below.
1191-nvda-01: An Example of Performin the Check with NVDA
With NVDA running, perform the operation to display status messages according to the design documents, and confirm that the displayed status messages are automatically announced.
Note: Refer to the implementation example shown inステータス・メッセージとスクリーン・リーダーfor the expected behavior in the implementation using aria-live.
Reference Videos: ステータスメッセージ【NVDAでアクセシビリティー チェック】
Check Procedure: iOS
Confirm 1191-iosvo-01 passes below.
1191-iosvo-01: An Example of Performin the Check with iOS VoiceOver
Perform the operation to display status messages according to the design documents while iOS VoiceOver is running, and confirm that the displayed status messages are automatically announced.
Check Procedure: Android
Confirm 1191-androidtb-01 passes below.
1191-androidtb-01: An Example of Performin the Check with Android TalkBack
Perform the operation to display status messages according to the design documents while Android TalkBack is running, and confirm that the displayed status messages are automatically announced.
Check ID: 1201
There is no content that blinks or scrolls automatically.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Content That Blinks or Scrolls Automatically
- Supplementary Information
Check ID: 1221
There is no content that blinks or scrolls automatically.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Content That Blinks or Scrolls Automatically
- Supplementary Information
Check ID: 1231
There is no content that updates automatically. Or
Users can change the interval and timing of automatic updates, or stop automatic updates.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Content That Updates Automatically
- Supplementary Information
Check ID: 1251
No content is automatically updated. or
The user can change the interval and timing of automatic updates. or
The user can stop automatic updates.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Content That Updates Automatically
- Supplementary Information
Check ID: 1261
There is no content that flashes more than three times per second.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Dynamic Content: Content That Flashes
- Supplementary Information
Check ID: 1281
No content flashes more than three times per second.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Dynamic Content: Content That Flashes
- Supplementary Information
Check ID: 1291
There are no notifications that significantly alter the content of the screen at times that would interfere with the user’s input operations or information browsing.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Interrupting Content
- Supplementary Information
Check ID: 1292
There are no modal dialogs that appear at times that would interfere with the user’s input operations or information browsing.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Interrupting Content
- Supplementary Information
Check ID: 1311
There are no notifications, which cause significant change of the screen content, that appear at times that interfere with the user’s input operations or viewing of information.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Interrupting Content
- Supplementary Information
Check ID: 1312
Modal dialogs meet the following:
Does not appear automatically at a time that interferes with the user’s input operations or viewing of information
Opening a modal dialog with a keyboard operation and pressing the Tab key moves the focus into the modal dialog, and the focus returns to its original position when the modal dialog is closed
Focus does not move outside of a modal dialog when the focus is moved by pressing Tab or Shift+Tab within the modal dialog.
- Applicable Stages
Product
- Target Platforms
Web
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Interrupting Content
- Supplementary Information
Check ID: 1313
When a modal dialog is displayed:
It does not automatically appear at times that would interfere with the user’s input operations or information browsing.
Movement of screen reader focus to, reading of content outside the modal dialog, and interaction with controls such as buttons outside the modal dialog are prevented.
- Applicable Stages
Product
- Target Platforms
Mobile
- Severity
[MAJOR]
- Related Guidelines
Dynamic Content: Maintaining Appropriate Information Provision To Assistive Technology
Dynamic Content: Interrupting Content
- Supplementary Information
Check ID: 1321
The login session is not set with an expiration time. Or, it meets one of the following conditions:
At the time of login, the user can disable the expiration setting. Or,
At the time of login, the user can significantly adjust the expiration time to exceed at least ten times the default setting. Or,
The user is warned before time expires, and with at least 20 seconds of grace, for example, by pressing the space bar, the user can extend the expiration time more than ten times. Or,
The expiration time is essential, and extending it would invalidate the content’s functionality. Or,
The expiration time is longer than 20 hours.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Login Sessions: Expiration of Login Sessions
- Supplementary Information
Check ID: 1381
If the login session times out, users can continue their operations without losing data after re-authentication.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Login Sessions: Continuing Operation After Exceeding Time Limit
- Supplementary Information
Check ID: 1411
For audio/video players that are embedded in the page, they are properly labeled so that it is easily recognizable that the player is there. OR
It can be inferred from the text before and after that the player is there.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Explicitly Indicate the Presence of Audio and Video Content
- Supplementary Information
Check ID: 1421
There is no audio content that plays automatically for more than 3 seconds.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Audio and Video Content: Autoplay of Sound
- Supplementary Information
Check ID: 1441
There is no audio content that automatically plays for more than 3 seconds in length.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[CRITICAL]
- Related Guidelines
Audio and Video Content: Autoplay of Sound
- Supplementary Information
Check ID: 1451
There are no videos or animations that start automatically and last for more than 5 seconds. Or
Videos or animations can be stopped, paused, or hidden.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Audio and Video Content: Content that Moves
Check ID: 1471
There is no video or animation that starts automatically and lasts longer than 5 seconds. or
Video or animation can be stopped, paused, or hidden.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Audio and Video Content: Content that Moves
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.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Audio and Video Content: Ensure Content Is Equivalent to Text Information
- Supplementary Information
Check ID: 1501
EThe audio and video content is provided in such a way that it is not essential to perceive the information, and the content is explicitly labeled as a substitute or supplement to the textual information.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
- Related Guidelines
Audio and Video Content: Ensure Content Is Equivalent to Text Information
- Supplementary Information
Check ID: 1511
Content that includes audio is provided with synchronized captions.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Captions
- Supplementary Information
Check ID: 1531
Synchronized captions are provided for content that includes audio.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Captions
- Supplementary Information
Check ID: 1541
The video allows for easy inference of the visual content from the originally recorded audio track. Or,
The video includes audio descriptions. Or,
Descriptions regarding the visuals are provided in text.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Text or Audio Description
- Supplementary Information
Check ID: 1542
The video allows for easy inference of the visual content from the originally recorded audio track. Or,
The video includes audio descriptions.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Audio Description
- Supplementary Information
Check ID: 1561
For video content, visually presented information can be easily inferred from the content of the originally recorded audio track. Or
Video includes audio description. OR
A textual description of the video is provided.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Text or Audio Description
- Supplementary Information
Check ID: 1562
For video content, visually presented information can be easily inferred from the content of the originally recorded audio track. Or
Video includes audio description.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Audio Description
- Supplementary Information
Check ID: 1571
For content that consists of audio only without video, a transcript of the audio is provided.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Transcripts
- Supplementary Information
Check ID: 1591
For audio-only content with no video, a transcribed audio text is provided.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Provide Transcripts
- Supplementary Information
Check ID: 1601
Synchronized sign language interpretation is provided for the audio information in videos.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MINOR]
- Related Guidelines
Audio and Video Content: Provide Sign Language
- Supplementary Information
Check ID: 1621
Synchronized sign language interpretation is provided for the audio information in the video.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MINOR]
- Related Guidelines
Audio and Video Content: Provide Sign Language
- Supplementary Information
Check ID: 1631
The audio content is sufficiently easy to listen to.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Sufficiently Low Background Sound
- Supplementary Information
Check ID: 1651
Sufficient audibility is provided for the audio content.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
- Related Guidelines
Audio and Video Content: Sufficiently Low Background Sound
- Supplementary Information