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

• Images: Ensure Sufficient Contrast Ratio With Adjacent Regions

• Icons: Ensure Sufficient Contrast Ratio

Supplementary Information

• Importance of Contrast Ratio

• Method for Checking Contrast Ratio

• The Color Contrast Grid of Vibes, freee’s Internal Design System

• 画像の表示とアクセシビリティー

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

• Text: Ensure Sufficient Contrast Ratio

• Images of Text: Contrast Ratio of Text in Images

• Images: Contrast Ratio of Text in Images

Supplementary Information

• 画像の表示とアクセシビリティー

• Importance of Contrast Ratio

• Method for Checking Contrast Ratio

• The Color Contrast Grid of Vibes, freee’s Internal Design System

• 画像化されたテキストの問題点

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

• Text: Ensure Sufficient Contrast Ratio on Mobile OS

• Images of Text: Contrast Ratio of Text in Images on Mobile OS

• Images: Contrast Ratio of Text in Images on Mobile OS

Supplementary Information

• 画像の表示とアクセシビリティー

• Importance of Contrast Ratio

• Method for Checking Contrast Ratio

• The Color Contrast Grid of Vibes, freee’s Internal Design System

• 画像化されたテキストの問題点

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

• Text: Ensure Sufficient Contrast Ratio

• Text: Ensure Sufficient Contrast Ratio on Mobile OS

Supplementary Information

• Importance of Contrast Ratio

• Method for Checking Contrast Ratio

• The Color Contrast Grid of Vibes, freee’s Internal Design System

Check Procedure: Web

Confirm that either of the following checks passes: check by the Axe DevTools or check by the WebAIM Contrast Checker.

An Example of Performin the Check with axe DevTools

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

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

• When the contrast ratio is insufficient after the text and/or background color change, e.g. after mouse hover

• When the contrast ratio of large-scale text is 3:1 or more and less than 4.5:1

  • While large-scale text is defined as 29px(22pt) or larger font, or 24px(18pt) or larger bold font within freee’s product as the primary text is assumed to be in Japanese, WCAG defines it as 18pt or larger font, or 14pt or larger bold font assuming euro-languages. As Axe DevTools is based on the requirements set by the WCAG, it cannot detect insufficient color contrast of Japanese text whose font size is between 18pt and 22pt (14pt and 18pt if bold).

• When the contrast ratio of non-text content is insufficient.

  • icons, images, images of text, outlines of buttons and input fields, etc.

• Insufficient contrast ratio of the actual colors being seen, when different colors appear to blend into a new color due to overlapping translucent elements.

• When it is difficult to identify the background and foreground colors in overlapping elements.

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

• Text: Expression Using Multiple Visual Elements

• Images: Expression Using Multiple Visual Elements

• Links: Expression Using Multiple Visual Elements

• Forms: Expression Using Multiple Visual Elements

Related FAQs

• The Bookmarklet to Display in Grayscale Breaks the Layout

Supplementary Information

• Considerations for Using Color in Expressions

• How to Switch to Grayscale Display

• 画像の表示とアクセシビリティー

• The Role of Wording in Text Information and Accessibility

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

• Text: Expressions Not Dependent on Specific Senses

Supplementary Information

• The Role of Wording in Text Information and Accessibility

Check ID: 0051

Displaying content in grayscale does not interfere with its use.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[MAJOR]

Related Guidelines

• Text: Expression Using Multiple Visual Elements

• Images: Expression Using Multiple Visual Elements

• Links: Expression Using Multiple Visual Elements

• Forms: Expression Using Multiple Visual Elements

Related FAQs

• The Bookmarklet to Display in Grayscale Breaks the Layout

Supplementary Information

• Considerations for Using Color in Expressions

• How to Switch to Grayscale Display

• 画像の表示とアクセシビリティー

• The Role of Wording in Text Information and Accessibility

Check Procedure: Web, Mobile

Confirm the content meets the following when displayed in grayscale:

• Links can be identified

• The intent of images and text is clear

• Required fields and errors in ininput forms can be recognized

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 that no functionality is executed upon performing the following:

1. Move the mouse pointer onto the object

2. Press the mouse button

3. Move the mouse pointer outside the object while holding down the mouse button

4. 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

• Tab/Shift+Tabキーを用いたチェック

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

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab/Shift+Tabキーを用いたチェック

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

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

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab/Shift+Tabキーを用いたチェック

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

• Tab/Shift+Tabキーを用いたチェック

Check Procedure: Web

Confirm the following check by keyboard passes.

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: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

An Example of Performin the Check with iOS VoiceOver

Confirm the following by moving the focus with one-finger left/right flicks:

• 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.

CF：1本指による右および左方向へのフリック

An Example of Performin the Check with Android TalkBack

Confirm the following by moving the focus with one-finger left/right flicks:

• 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.

CF：1本指による右および左方向へのフリック

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 the following check by keyboard operation passes.

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

• Tab/Shift+Tabキーを用いたチェック

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

• Tab/Shift+Tabキーを用いたチェック

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

• Text: Appropriate Wording for Headings

Related FAQs

• Heading Level Specification

Supplementary Information

• The Role of Wording in Text Information and Accessibility

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

• Text: Change Text Size Settings

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

• Text: 200 Percent Magnification Using Zoom Function

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

• Text: 400 Percent Magnification Using Zoom Function

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

• Text: Change Text Size Settings

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

• Text: Change Text Size Settings

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

• Text: Change Text Size Settings of Mobile OS

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

• Text: Change Text Size Settings of Mobile OS

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

• Icons: Sufficiently Large Click/Touch Targets

Related FAQs

• Size of Radio Buttons And Check Boxes

• The Clickable Area of a Text Link Is Small

Supplementary Information

• Issues Related to Click and Tap Target Sizes and How to Verify Target Sizes

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

• Forms: Sufficiently Large Click/Touch Targets

Supplementary Information

• Issues Related to Click and Tap Target Sizes and How to Verify Target Sizes

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

• Icons: Sufficiently Large Click/Touch Targets (Mobile)

Supplementary Information

• Issues Related to Click and Tap Target Sizes and How to Verify Target Sizes

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

• Forms: Sufficiently Large Click/Touch Targets (Mobile)

Supplementary Information

• Issues Related to Click and Tap Target Sizes and How to Verify Target Sizes

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

• Icons: Sufficiently Large Click/Touch Targets

Related FAQs

• Size of Radio Buttons And Check Boxes

• The Clickable Area of a Text Link Is Small

Supplementary Information

• Issues Related to Click and Tap Target Sizes and How to Verify Target Sizes

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

• Forms: Sufficiently Large Click/Touch Targets

Supplementary Information

• Issues Related to Click and Tap Target Sizes and How to Verify Target Sizes

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

• Tab/Shift+Tabキーを用いたチェック

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 alt attribute, 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

• Icons: Provide Text Information

• Icons: Expression Using Multiple Visual Elements

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-labelledby attribute.

Implementation Example: Add a Label to the Icon

Web

• Use the alt attribute or the aria-label attribute.

iOS

• Specify with accessibilityLabel.

Android

• Specify with the contentDescription attribute.

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

• What Information Should Not Be Read Aloud by Screen Readers?

Implementation Example: Ensure That the Content Is Not Read Out by the Screen Reader

Web

• For the img element, specify an empty alt attribute ( alt="" ).

• For elements other than the img element, do not specify the aria-label attribute or the aria-labelledby attribute.

iOS

Set isAccessibilityElement to false.

Android

Set importantForAccessibility to no.

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 that the following check by axe DevTools passes, and also either the checks by NVDA or the checks by macOS VoiceOver passes.

An Example of Performin the Check with axe DevTools

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

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:

• 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でアクセシビリティー チェック】

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:

• 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: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

An Example of Performin the Check with iOS VoiceOver

• 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.

CF: 1本指による右および左方向へのフリック

An Example of Performin the Check with Android TalkBack

• 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.

CF: 1本指による右および左方向へのフリック

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

• Icons: Expression Using Multiple Visual Elements

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

• What Information Should Not Be Read Aloud by Screen Readers?

Check Procedure: Web

Confirm that either the check by NVDA or the check by macOS VoiceOver below passes.

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 browse mode.

Reference Videos: アイコンの説明が重複しない【NVDAでアクセシビリティー チェック】

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.

Check Procedure: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

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.

CF: 1本指による右および左方向へのフリック

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.

CF: 1本指による右および左方向へのフリック

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

Supplementary Information

• Describing Images Through Text

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

Supplementary Information

• Describing Images Through Text

Implementation Example: Adding a Concise Description

Web

• Specify with the alt attribute or the aria-label attribute.

• To use the displayed text as a concise description, associate that text with the image using the aria-labelledby attribute.

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-describedby attribute.

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

Supplementary Information

• Describing Images Through Text

Check Procedure: Web

Confirm that the following check by axe DevTools passes, and also either the checks by NVDA or the checks by macOS VoiceOver passes.

An Example of Performin the Check with axe DevTools

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

Note that this issue is not reported if any alternative text is specified for the image, and it is not possible to detect if the alternative text is inappropriate.

An Example of Performin the Check with 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.

• In either case, confirm that the description properly represents the content of the image.

Reference Videos: 画像の説明【NVDAでアクセシビリティー チェック】

An Example of Performin the Check with 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.

• In either case, confirm that the description properly represents the content of the image.

Check Procedure: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

An Example of Performin the Check with iOS VoiceOver

• 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.

CF: 1本指による右および左方向へのフリック

An Example of Performin the Check with Android TalkBack

• 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.

CF: 1本指による右および左方向へのフリック

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

• What Information Should Not Be Read Aloud by Screen Readers?

Supplementary Information

• Describing Images Through Text

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

• What Information Should Not Be Read Aloud by Screen Readers?

Supplementary Information

• Describing Images Through Text

Implementation Example: Make It Ignored by Screen Readers

Web

• Specify an empty alt attribute ( alt="" ). Or

• Specify role="presentation".

iOS

• Set isAccessibilityElement to false.

Android

• Set importantForAccessibility to no.

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

• What Information Should Not Be Read Aloud by Screen Readers?

Supplementary Information

• Describing Images Through Text

Check Procedure: Web

Confirm that either the check by NVDA or the check by macOS VoiceOver below passes.

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 browse mode.

Reference Videos: 情報や機能性を持たない画像【NVDAでアクセシビリティー チェック】

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.

Check Procedure: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

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.

CF: 1本指による右および左方向へのフリック

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.

CF: 1本指による右および左方向へのフリック

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 alt attribute or the aria-label attribute

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 that either the check by NVDA or the check by macOS VoiceOver below passes.

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 browse mode.

Reference Videos: 画像化されたテキスト【NVDAでアクセシビリティー チェック】

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.

Check Procedure: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

An Example of Performin the Check with iOS VoiceOver

• 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.

CF: 1本指による右および左方向へのフリック

An Example of Performin the Check with Android TalkBack

• 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.

CF: 1本指による右および左方向へのフリック

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

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• The Importance of Properly Marking Up Semantics

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

• The Importance of Properly Marking Up Semantics

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

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• The Importance of Properly Marking Up Semantics

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

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• The Importance of Properly Marking Up Semantics

Implementation Example: Heading Implementation

Web

Mark up with h1 to h6.

iOS

Set UIAccessibilityTraits.header.

Android

Set android:accessiblityHeading to true for 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

• The Importance of Properly Marking Up Semantics

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

• UIコンポーネントのアクセシビリティー

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

• UIコンポーネントのアクセシビリティー

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

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• The Importance of Properly Marking Up Semantics

Check Procedure: Web

Confirm that the following check by axe DevTools passes, and also either the checks by NVDA or the checks by macOS VoiceOver passes.

An Example of Performin the Check with axe DevTools

Confirm that none of the following issues is reported.

• Headings should not be empty （見出しは空にしてはなりません）

• Heading levels should only increase by one （見出しのレベルは1つずつ増加させなければなりません）

• Page should contain a level-one heading （ページにはレベル1の見出しが含まれていなければなりません）

An Example of Performin the Check with NVDA

Display the heading list by steps below, and confirm that all headings on the page are displayed appropriately.

1. Display the elements list in browse mode (NVDA+F7)

2. Set the “Type” to “Headings” ():kbd:Alt+H)

Reference Videos: 見出し【NVDAでアクセシビリティー チェック】

An Example of Performin the Check with macOS VoiceOver

Display the heading list by steps below, and confirm that all headings on the page are displayed appropriately.

1. Press VO + U to display the rotor menu

2. Select “Headings”

Check Procedure: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

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.

CF: 1本指による上および下方向へのフリック

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.

CF: 1本指による上および下方向へのフリック

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

• The Importance of Properly Marking Up Semantics

Check Procedure: Web

Confirm the following check by NVDA passes.

An Example of Performin the Check with NVDA

Confirm that all of the following are met.

• The table can be found by the following steps:

  1. Move to the beginning of the page in browse mode ():kbd:Ctrl+Home)

  2. 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:

  1. Find the beginning of the table in browse mode

  2. 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

• The Nu Html Checkerを用いたHTMLのバリデーション

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

• Tab/Shift+Tabキーを用いたチェック

• UIコンポーネントのアクセシビリティー

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

• Tab/Shift+Tabキーを用いたチェック

• UIコンポーネントのアクセシビリティー

Implementation Example: Conveying Roles to Screen Readers

Web

Specify the role attribute appropriately.

iOS

• Specify the appropriate accessibilityTraits.

Android

• If using jetpack compose: Specify the role attribute appropriately

• If 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

• UIコンポーネントのアクセシビリティー

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

• UIコンポーネントのアクセシビリティー

Check Procedure: Web

Confirm the following check by NVDA passes.

An Example of Performin the Check with NVDA

Confirm that all of the following are met:

• 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

• UIコンポーネントのアクセシビリティー

Check ID: 0611

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

Applicable Stages

Code

Target Platforms

Web

Severity

[CRITICAL]

Related Guidelines

• Text: Specify the Primary Language of the Page

Supplementary Information

• lang 属性と音声読み上げ

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

• Text: Specify the Primary Language of the Page

Supplementary Information

• lang 属性と音声読み上げ

Check Procedure: Web

Confirm the following checks by axe DevTools and NVDA pass.

An Example of Performin the Check with axe DevTools

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

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

An Example of Performin the Check with NVDA

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

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

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

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, and footer elements are used appropriately, or

• they are explicitly indicated by the role attribute.

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 main element reflects the start of the main content, or

• there is a heading marked up with an h1 or h2 element 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 that either the check by NVDA or the check by macOS VoiceOver below passes.

An Example of Performin the Check with NVDA

Confirm that the beginning of the main body, or the main function of the page can be easily found using any of the following method.

• Users can move to the position immediately before the main body using the jump to next/previous heading function ( H / Shift + H key) in browse mode.

• Users can move to the beginning of the main landmark using the jump to next landmark function ( D` key) in browse mode, and the main body begins immediately after that position.

Reference Videos: 本文の開始位置【NVDAでアクセシビリティー チェック】

An Example of Performin the Check with macOS VoiceOver

Confirm that the beginning of the main body, or the main function of the page can be easily found using any of the following method.

• Users can move to the position immediately before the main body using the jump to next/previous heading function ( VO + Command + H / VO + Command + Shift + H key).

• Users can move to the beginning of the main landmark by the following steps, and the main body begins immediately after that position.

  1. Press VO + U to display the rotor menu

  2. Select “Landmarks”

  3. 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 that both of the following checks pass: check by the Axe DevTools and check by the Landmark Navigation via Keyboard or Pop-up

An Example of Performin the Check with axe DevTools

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

• Banner landmark should not be contained in another landmark （bannerランドマークは他のランドマークに含まれるべきではありません）

• Aside should not be contained in another landmark （asideは他の要素に含まれるべきではありません）

• Contentinfo landmark should not be contained in another landmark （contentinfoランドマークは他のランドマークに含まれるべきではありません）

• 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つ含まれていなければなりません）

• Ensures landmarks are unique （ランドマークが一意であることを確認します）

• All page content should be contained by landmarks （ページのすべてのコンテンツはlandmarkに含まれていなければなりません）

An Example of Performin the Check with Landmark Navigation via Keyboard or Pop-up

Confirm that 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: 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

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• DOMツリーとスクリーン・リーダー

Check Procedure: Web

Confirm that either the check by NVDA or the check by macOS VoiceOver below passes.

An Example of Performin the Check with NVDA

• 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.

An Example of Performin the Check with macOS VoiceOver

• 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: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

An Example of Performin the Check with iOS VoiceOver

• 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.

CF: 1本指による右および左方向へのフリック

An Example of Performin the Check with Android TalkBack

• 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.

CF: 1本指による右および左方向へのフリック

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 that the following check by keyboard passes, and also either the checks by NVDA or the checks by macOS VoiceOver passes.

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.

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 browse mode.

Reference Videos: 同じ出現順序【NVDAでアクセシビリティー チェック】

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.

Check Procedure: Mobile

Confirm that the following checks by iOS VoiceOver and Android TalkBack pass.

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.

CF: 1本指による右および左方向へのフリック

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.

CF: 1本指による右および左方向へのフリック

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-current attribute.

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 that either the check by NVDA or the check by macOS VoiceOver below passes.

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 in browse mode using arrow keys.

Reference Videos: 現在のページ【NVDAでアクセシビリティー チェック】

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.

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

• Text: Customization of Text Display

Supplementary Information

• ユーザーCSSを適用したチェックの実施方法

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

• Text: Explicitly Indicate Partially Used Languages

Supplementary Information

• lang 属性と音声読み上げ

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

• Text: Explicitly Specify the Language for Text-Displaying UI Components

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

• Text: Explicitly Indicate Partially Used Languages

Supplementary Information

• lang 属性と音声読み上げ

Check Procedure: Web

Confirm the following check by NVDA passes.

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 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

• Text: Explicitly Specify the Language for Text-Displaying UI Components

Check Procedure: Web

Confirm the following check by NVDA passes.

An Example of Performin the Check with NVDA

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

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

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

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-label attribute value.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[MAJOR]

Related Guidelines

• Forms: Use Displayed Text as Label

• Forms: When Displayed Text Cannot Be Used as a Label

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

• Forms: Use Displayed Text as Label

• Forms: When Displayed Text Cannot Be Used as a Label

Supplementary Information

• フォーム・コントロールのラベル付けの必要性

Implementation Example: Labeling Form Controls

Web

• Associate the displayed text or image with the label element or the aria-labelledby attribute, or

• Specify the label with the aria-label attribute.

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

• Forms: Use Displayed Text as Label

• Forms: When Displayed Text Cannot Be Used as a Label

Supplementary Information

• フォーム・コントロールのラベル付けの必要性

Check Procedure: Web

Confirm that the following check by axe DevTools passes, and also either the checks by NVDA or the checks by macOS VoiceOver passes.

An Example of Performin the Check with axe DevTools

Confirm that none of the following issues are reported.

• Form elements must have labels （フォーム要素にはラベルがなければなりません）

• Select element must have an accessible name （select要素にはアクセシブルな名前がなければなりません）

• Form field must not have multiple label elements （フォームフィールドに複数のlabel要素を付与してはなりりません）

• Form elements should have a visible label （フォーム要素には視認できるラベルがなければなりません）

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 focus mode.

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

• Tab/Shift+Tabキーを用いたチェック

Check Procedure: Web

Confirm the following check by keyboard passes.

An Example of Performin the Check with Keyboard

Confirm that all of the following are satisfied:

• 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

• Tab/Shift+Tabキーを用いたチェック

Check Procedure: Web

Confirm the following check by keyboard passes.

An Example of Performin the Check with Keyboard

Confirm that all of the following are satisfied:

• 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

• Forms: Continuing Operation After Exceeding Time Limit

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

• Forms: Behavior When the Value of a Form Field Changes

Supplementary Information

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab/Shift+Tabキーを用いたチェック

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

• Forms: Behavior When the Value of a Form Field Changes

Supplementary Information

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab/Shift+Tabキーを用いたチェック

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

• Forms: Identify Errors by Text Information

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

• Forms: Identify Errors by Text Information

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

• Forms: Suggestion for How to Correct Errors

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

• Forms: Suggestion for How to Correct Errors

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-live attribute.

iOS

Put .announcement and the message in the argument of UIAccessibility.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 the following check by NVDA passes.

An Example of Performin the Check with NVDA

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: Mobile

Perform the operation to display status messages according to the design documents while iOS VoiceOver and Android TalkBack are 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

• 自動的に変化するコンテンツの問題点

• DOMツリーとスクリーン・リーダー

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

• 音声・映像コンテンツのアクセシビリティーを確保する