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
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 0711-nvda-01 or 0711-macvo-01 passes below.
0711-nvda-01: An Example of Performin the Check with NVDA
With NVDA running, confirm the following:
Confirm that the content is read aloud in an order which is natural, and does not hinder the understanding of the meaning when reading from the top of the page using arrow keys in browse mode.
Confirm that the content is read aloud in the appropriate order in all states when there are mechanisms that change the display content without transitioning to another page.
0711-macvo-01: An Example of Performin the Check with macOS VoiceOver
Confirm the following with macOS VoiceOver enabled:
Confirm that the content is read aloud in an order which is natural, and does not hinder the understanding of the meaning when reading from the top of the page using the VO key and the left/right arrow keys to operate the VoiceOver cursor.
Confirm that the content is read aloud in the appropriate order in all states when there are mechanisms that change the display content without transitioning to another page.
Check 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
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
roleand 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-liveattribute.- iOS
Put
.announcementand the message in the argument ofUIAccessibility.post(notification:argument:). (Reference: https://developer.apple.com/documentation/uikit/uiaccessibility/notification/1620176-announcement )- Android
Put the message in
Toast,SnackBar, etc., and ensure that it is read out appropriately by TalkBack.
Check ID: 1191
Status messages, such as the result of an operation, are automatically announced by the screen reader.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
Check Procedure: Web
Confirm 1191-nvda-01 passes below.
1191-nvda-01: An Example of Performin the Check with NVDA
With NVDA running, perform the operation to display status messages according to the design documents, and confirm that the displayed status messages are automatically announced.
Note: Refer to the implementation example shown inステータス・メッセージとスクリーン・リーダーfor the expected behavior in the implementation using aria-live.
Reference Videos: ステータスメッセージ【NVDAでアクセシビリティー チェック】
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]