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
Bookmarked, so I can continuously check on new posts! If you need some details about Hospitality Industry, you might want to take a look at Article Star Keep on posting!
Very interesting information!Perfect just what I was looking for!Raise your business
I know a lot of folks whom I think would really enjoy your content that covers in depth. I just hope you wouldn’t mind if I share your blog to our community. Thanks, and feel free to surf my website FQ5 for content about Airport Transfer.
Thanks for your comment and please feel free to share my blog with anyone you think might be interested in the topics I cover here.
This is quality work regarding the topic! I guess I’ll have to bookmark this page. See my website QH8 for content about Car Purchase and I hope it gets your seal of approval, too!
Your ideas absolutely shows this site could easily be one of the bests in its niche. Drop by my website QH3 for some fresh takes about Airport Transfer. Also, I look forward to your new updates.
Your site visitors, especially me appreciate the time and effort you have spent to put this information together. Here is my website Article World for something more enlightening posts about SEO.