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.

Dynamic Content

These guidelines are about dynamic content.

Dynamic content refers to content that changes automatically or in response to user interactions. Such changes may include modifications to the displayed content as well as page transitions.

Maintaining Appropriate Information Provision To Assistive Technology

In pages where content increases or decreases upon user actions, maintain a state in which screen readers can appropriately acquire information, regardless of the page’s state.

• The order of content that conveys the correct meaning of the content when read from the beginning by a screen reader.

• A state where information provided visually is conveyed accurately and without omission to assistive technologies.

Target Platforms

Web, Mobile

Intent

Ensure that users of assistive technologies such as screen readers can correctly understand the content.

• In the case of Web content, dynamically added content is inserted at the appropriate position in the DOM tree, so that users of screen readers can recognize the existence of the content and understand its content.

• Special attention is needed for modal dialogs, expandable/collapsible menus, accordions, and similar elements.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 1.3.1 (Level A): Info and Relationships

• Success Criterion 1.3.2 (Level A): Meaningful Sequence

Supplementary Information

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

Checklist Items

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]

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

OnFocus/OffFocus Behavior

OnFocus and OffFocus events should not cause changes like the following:

• Page transition

• Form submission

• Display of modal dialog

Target Platforms

Web, Mobile

Intent

Do not cause unexpected behavior for users with visual or cognitive impairments.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 3.2.1 (Level A): On Focus

Supplementary Information

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

Checklist Items

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]

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]

Magnification of the Content Displayed by Mouseover (Hover)

Regarding content displayed on mouseover (hover), ensure that the content does not disappear when the pointer is moved over the mouseover-displayed content, to allow for the use of that content with magnification.

Target Platforms

Web

Intent

Allow users with low vision who use magnification to use the content displayed by mouseover.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 1.4.13 (Level AA): Content on Hover or Focus

Supplementary Information

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

Checklist Items

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]

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]

Hiding the Content Displayed by Mouseover (Hover)

Regarding content displayed on mouseover (hover), ensure that all of the following are satisfied:

• The mouseover-displayed content can be hidden without moving the pointer. (For example, it disappears when the Esc key is pressed.)

• The mouseover-displayed content is hidden only when the mouseover state is no longer present, the user performs an operation to hide it, or the content becomes invalid.

Target Platforms

Web

Intent

Allow users with low vision who use magnification to use the content displayed by mouseover.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 1.4.13 (Level AA): Content on Hover or Focus

Supplementary Information

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

Checklist Items

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]

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]

Appropriate Implementation of Status Messages

Ensure that status messages meet all of the following criteria:

• They are read out automatically by a screen reader.

• They are recognized as status messages and their content is understood through the role and other properties.

Target Platforms

Web, Mobile

Intent

Ensure that people with visual impairments can check status messages without delay.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 4.1.3 (Level AA): Status Messages

Supplementary Information

• ステータス・メッセージとスクリーン・リーダー

Checklist Items

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]

Check ID: 1181

Status messages and the results of operations are automatically read out.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[MAJOR]

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]

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.

Content That Blinks or Scrolls Automatically

Do not place content that blinks for more than five seconds or scrolls automatically on the same page as other content. If you create such content, ensure that users can pause, stop, or hide it.

Target Platforms

Web, Mobile

Intent

Ensure that people with low vision or cognitive impairments are not distracted.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 2.2.2 (Level A): Pause, Stop, Hide

Supplementary Information

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

Checklist Items

Check ID: 1201

There is no content that blinks or scrolls automatically.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[MAJOR]

Check ID: 1221

There is no content that blinks or scrolls automatically.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[MAJOR]

Content That Updates Automatically

Do not create content that is automatically updated or hidden at preset intervals. If you create such content, ensure that users can pause, stop, or hide it, or adjust the update frequency.

Target Platforms

Web, Mobile

Intent

Ensure that people with low vision or cognitive impairments are not distracted.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 2.2.2 (Level A): Pause, Stop, Hide

Supplementary Information

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

Checklist Items

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]

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]

Content That Flashes

Ensure that there are no elements emitting flashes more than three times in any one-second period.

Target Platforms

Web, Mobile

Intent

Prevent photosensitive seizures.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 2.3.1 (Level A): Three Flashes or Below Threshold

• Success Criterion 2.3.2 (Level AAA): Three Flashes

Supplementary Information

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

Checklist Items

Check ID: 1261

There is no content that flashes more than three times per second.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[CRITICAL]

Check ID: 1281

No content flashes more than three times per second.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[CRITICAL]

Interrupting Content

Except when presenting highly urgent information, avoid causing interruptions through push notifications or automatic updates.

Target Platforms

Web, Mobile

Intent

Ensure that people with low vision or cognitive impairments are not distracted.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 2.2.4 (Level AAA): Interruptions

Supplementary Information

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

Checklist Items

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]

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]

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]

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]

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]