Tell screen reader that page has changed in Backbone/Angular single-page app

by

Overall, you should not need to trigger a ‘re-read’, and depending on your UI that might not be a good thing anyway.

My experience has been with angular.js (as an accessibility person rather than the developer), and our overall approach was to manage the focus rather than trigger a re-read. (We do extensive accessibility testing.)

The key thing from a UI point of view (primarily for screen reader users) is that selecting a link (e.g. about.html) should take you somewhere.

In this case the appropriate place to put the focus would be the top of the content area of the about ‘page’, hopefully an <h1>.

In order for that to work the target element should be focusable via a script, so probably needs tabindex unless it is a link or form control:

<h1 id="test" tabindex="-1">

The -1 means it is not in the default tab order, but is focusable via a script. See more at WAI-ARIA authoring practices.

Then at the end of the function that loads the new content, including the tabindex attribute, add something like:

$('#test').attr('tabindex', '-1').css('outline', 'none');
$('#test').focus();

When adding tabindex dynamically it is best to do so in a line before the focus() function otherwise it may not work (I remember that from testing with JAWS).

To test this I would use either:

  • NVDA & Firefox, Windows
  • Jaws & IE, Windows

It is also good to test with VoiceOver on Safari/OSX, but that works differently and may not hit the same issues as a windows based screen reader.

You will hit a lot of issues with Chrome/NVDA as that is not supported very well, and end-users are very unlikely to use that. IE is ok with NVDA, but Firefox is best.

Overall, it is worth getting to know the WAI-ARIA authoring practices, particularly Using ARIA in HTML. Even though you are using a JS app, the browser (and therefore screen reader) is interpreting the resulting HTML so that advice is still relevant.

Lastly, if you are updating page content without the user pressing space/enter to activate something, you might find that JAWS/NVDA do not know about the new content as their ‘virtual buffer’ has not updated. In that case, you might need to add a JS shim to make them update, but only do that if you run into problems in testing, it should not be a global patch.

More Related Contents:

  1. Print a div using javascript in angularJS single page application
  2. Accessibility and all these JavaScript frameworks
  3. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  4. How to display length of filtered ng-repeat data
  5. Clicking a button within a form causes page refresh
  6. How to dynamically change header based on AngularJS partial view?
  7. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  8. What’s the recommended way to extend AngularJS controllers?
  9. Losing scope when using ng-include
  10. What does `void 0` mean? [duplicate]
  11. SyntaxError: Unexpected token o in JSON at position 1
  12. How to get the url parameters using AngularJS
  13. angularjs: allows only numbers to be typed into a text box
  14. Using Jquery Datatable with AngularJs
  15. How do I use Bluebird with Angular?
  16. How to implement history.back() in angular.js
  17. What’s the difference/incompatibility between ng-model and ng-value?
  18. Global Ajax error handler with AngularJS
  19. Angular JS custom delimiter
  20. Where to put model data and behaviour? [tl; dr; Use Services]
  21. Pass variables to AngularJS controller, best practice?
  22. correctly implement backbone comparators
  23. Pass Angular scope variable to Javascript
  24. Angular UI-Router more Optional Parameters in one State
  25. How to achieve that “ui-sref” be conditionally executed?
  26. Ionic Framework: $scope is undefined in simple alert
  27. AngularJS ng-click fires twice
  28. Extending React.js components
  29. Super in Backbone
  30. Decode HTML entity in Angular JS

Leave a Comment