<aside> 💡

Study Tasks

• If the AJAX content is loaded as the direct result of a user action (e.g., activating a button), the screen reader user should be notified that new content has loaded. Methods that can be used to notify screen readers that new content has loaded include:
  • Sending the focus to the new content
  • Using aria-live to announce content without moving the focus (e.g., providing a status message, such as “New Page: [Name of new page])
  • Update the page title via JavaScript (document.title)
• If the AJAX content is loaded passively (i.e., not as the direct result of a user action like activating a button), users may not need to be notified that the new content has loaded. This action may be dependent on the importance and urgency of the new content, and whether the content has been inserted above the user’s current position or not. </aside>

Resources

Managing Focus/State Changes

Option 1: Load or Reload 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.

Option 2: Move the Focus

• Strategy 1: Roving Index - The container where the focus is sent must have tabindex="-1".
• Strategy 2: active-descendant
• 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.

Option 3: ARIA Live

• aria-live="assertive" and aria-live="polite".
• Setting an element to role="alert" turns it into an assertive ARIA live region
• 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.