SPA Time: Accessibility Testing Techniques for Single Page Web Applications

I was recently asked about accessibility testing for single page web applications. It had been a few years since I last needed to perform accessibility testing of this kind, so I had to delve into my memories from previous jobs to find the answer. Fortunately, after a minute or two, I was able to recall the specific techniques for testing the accessibility of single page web applications with a screen reader. Later, I decided that I should preserve and share this knowledge with others in my profession. So, I jotted down the parts that I could remember and found a couple of good quality resources to use as reference material for filling in the gaps. That is why I have written this blog post.
Many accessibility professionals are familiar with single page web applications. Single page web applications load a web site as a single web page, making these sites seem to load faster and look more modern than traditional web sites. When users interact with single page web applications by “clicking” links and buttons to load new content and pages, content is loaded and changed dynamically using JavaScript. Single page web applications do not initiate a page refresh to add/update content, which is where many of the unique accessibility challenges for creating and testing these pages come in. For reference, some common examples of single page web applications include popular sites such as Facebook, Gmail, Twitter and Netflix.
For users of Assistive Technology, single page web applications offer some unique challenges such as keyboard and screen reader focus possibly remaining on the last focused element rather than moving to new content, screen readers not announcing all content changes, Custom elements possibly contradicting the accessibility advantages of good semantic HTML, the browser history functions which allow users to go Back / Forward through previously visited pages not working as expected, and the title bar (located near the top of the browser window) might not be changing to reflect the current page of content being displayed.
As an accessibility tester, it is important to test single page web applications against the latest WCAG success criteria. Two success criteria that can be especially problematic in single page web applications are Success Criterion 2.4.2: Page Titled (Level A) and Success Criterion 2.4.3 Focus Order (Level A). However, it is also necessary for testers to employ some specialized accessibility testing techniques when auditing single page web applications. These techniques include the following:
• Ensure the page title (in the title bar) updates each time content on the page changes significantly.
• Ensure users of Assistive Technology are notified of page changes.
• Ensure users of Assistive Technology are notified about content updates inside the page (using ARIA).
• Ensure that keyboard focus is moved to the beginning of new content when changes are initiated by the user.
• Ensure that all elements, widgets, and content operate as expected and are fully accessible and navigable via keyboard only navigation.
• Ensure that users can navigate back/forward through previously visited pages in the application using the browser history.
• Ensure users of Assistive Technology can navigate using only the keyboard between distinct parts of the page. Two common accessibility techniques for achieving this include having a Skip to Main Content link at the top of the page and using landmark elements such as grouping main navigation elements in a