Dynamic code considerations

Question 1

What are some high-level considerations related to loading a new page dynamically (via fetch or AJAX)?

Answer 1

• Focus should not be lost (it may or may not make sense to move focus to the new content)
• Don’t break the back (or forward) button: you must handle browser history manually via the JS history API
• If there is a LONG loading state, there should be a status message that announces that, otherwise, don’t
• The page title should updated to match the content and be announced to the user
• Including a summary of the content updates may make sense for something like search results

Question 2

What are some way to make updates available to a screen reader user, like loading state or page updates?

Answer 2

Using an aria-live region

Moving focus to the new content

Question 3

What are some important considerations when using an aria-live region?

Answer 3

• the aria-live container must be present on the page before adding an announcement (it watches for changes)
• announcements should be:
  
  • brief (don’t wrap your entire search results!), and
  • minimized (e.g. one summary, not each time a product loads)
• you can use hidden-text announcements for screen readers only, but consider whether it helps sighted users first
• consider whether your message should be “polite” or “assertive” based on the message, and test!
• you may wish to delete the aria-message after announcement to make sure the next one reads (if the same message repeats, or just changes a word or two, for example)

Question 4

What are some important considerations when moving focus to new content on load?

Answer 4

• the element you send focus to must either be already focusable, or have tabindex=”-1”
• best practice is to use the header of the new content, or a container around the content (aria-labelledby the header)
• the container must not be empty (use promises or setTimeout to make sure the content has loaded)

Question 5

What are some ways to make infinite scrolling (new content loads on scrolling) accessible?

Answer 5

• instead of automatically loading content, give the user a trigger to load more content
• make the scroll area the very last feature on the page (e.g. not even a footer after it), so it doesn’t block access to that content.

Question 6

What are some ways to make interstitial views accessible? For example, a credit card payment is submitted, and a page loads saying “contacting bank for approval?”

Answer 6

• move the focus to the interstitial message
• announce the interstitial message with a live region
• make sure to move the focus to the right place in the next screen when it loads.
• make sure the result of any actions are confirmed with the first focus (e.g. error, success)