Challenges in Single Page Applications

Problem statement: in Single Page Applications (SPA) user actions change elements of the visual display in ways that would traditionally involve a new page. With a new page a screen reader user experiences the new page as a whole. Some potential problems of SPA:

• screen reader users may be unaware of changes
• keyboard users may need to traverse large parts of the focusable DOM to go to the new locale
• depending on the change, other users may miss the new content or may be distracted by it

• How do we provide the benefits of a new page in the context of a SPA? These benefits are (or may be, everything is debatable)
  1. awareness of change
  2. awareness of new context

• How do we make it so that a SPA
  1. announces the change
  2. provides the same affordances as a visual or mouse driven experience
  3. provides the same "next up" as a mouse driven experience
  4. ensures that the change is visible independently of viewport size or zoomed-in state
  5. ensures that the change does not distract the user from the current task they are involved with

• Example 1
• Example 2
• Example 3