Dynamic Updates, AJAX, and Single-Page Apps Flashcards
What are the 3 ways of notifying a user that a change has occurred?
Load/Reload Page
Move the Focus
ARIA Live
When a new page is loaded or when the same page is reloaded, most screen readers do what 3 things?
Read the page title
Provide a summary of features on the page (such as “7 headings, 3 regions, and 27 links”)
Start reading from the top of the page
What are 2 accessibility considerations when loading a new page?
Ensure the page title accurately reflects the content of the page AND the result of any user actions.
Make it easy to navigate to the main content by providing a “Skip to Main Content” Link.
What are 4 accessibility considerations when moving focus?
The container where the focus is sent must have tabindex=”-1”.
The container must not be empty.
Don’t move the focus unexpectedly.
Sending the focus must be the last event, and it will probably be necessary to delay before sending the focus.
True or False. When making an Announcement, you should send the keyboard focus to the Announcement.
False.
Don’t send the focus just to make an announcement if moving the focus would disrupt the user’s actions, or if the disruption is not critical. Use ARIA live regions to make announcements that do not steal the keyboard focus.
What are the 2 main kinds of ARIA live announcements?
aria-live=”assertive” and aria-live=”polite”
What is an ARIA Live Region Assertive announcement?
Interrupt. the screen reader immediately and make the announcement.
What is an ARIA Live Region Polite announcement?
Wait until the screen reader finishes reading the current sentence or item before making the announcement.
What are 4 accessibility considerations when using ARIA Live Regions?
The ARIA live region must be present and must be empty before making an announcement.
ARIA live announcements should be brief.
Remove the announcement soon after it is inserted (in most cases).
If the announcement is not meant to be seen, hide with CSS clip.
MUST (NOT), SHOULD (NOT), MAY (NOT)
Status messages XXXX be programmatically determinable through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Status messages MUST be programmatically determinable through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Which of the following methods for notifying users of new content does not require JavaScript?
A. Moving focus within a page or to another element such as a dialog
B. Loading or reloading a page
C. ARIA live announcements
D. All methods require JavaScript
B. Loading or reloading a page
When moving focus to an element that is not focusable, it is important to include which one of the following attributes on the container:
A. tabindex=”-1”
B. tabindex=”0”
C. tabindex=”1”
D. aria-focus=”true”
A. tabindex=”-1”
Which of the following is NOT a consideration when moving focus to new content:
A. The container on which focus is set must not be empty.
B. Focus should not move unexpectedly.
C. The element that triggers the focus change must include aria-haspopup=”true”.
D. Sending focus to AJAX content must be the last event.
C. The element that triggers the focus change must include aria-haspopup=”true”.
True or False: ARIA live announcements are an effective way to notify users of new content without moving the user’s focus.
True.
True or False: aria-live=”assertive” always gives screen reader users updates, while aria-live=”polite” asks the user if they would like updates.
False.
True or False: The ARIA live region must be present on the page and must be empty before inserting the content to be announced.
True
MUST (NOT), SHOULD (NOT), MAY (NOT)
If there is a session time limit, users XXXX be warned before the session ends and XXXX be given time to save their data and/or extend the session.
If there is a session time limit, users MUST be warned before the session ends and MUST be given time to save their data and/or extend the session.
MUST (NOT), SHOULD (NOT), MAY (NOT)
Incomplete data XXXX be saved after a session timeout.
Incomplete data SHOULD be saved after a session timeout.
MUST (NOT), SHOULD (NOT), MAY (NOT)
Users XXXX be warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.
Users SHOULD be warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.
If a user unintentionally takes too long to a complete a task or leaves the page inactive for a period of time, it is frustrating to have to start a task all over again. What are 3 methods to avoid this?
Give the user at least 20 hours, regardless of inactivity, to complete the task or form.
Inform the user of the inactivity time constraint at the beginning of the task so that they can choose to prepare their information ahead of time.
Save user information.