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

Question

Imagine you have a simple, single-page application - regardless of whether it was written using Backbone, Angular, Ember or anything else.

How can you tell a screen

Answer 1

Taking the answer from @AlastairC, and the comments below it. I've taken this a bit further now and am going with this as my solution going forward:

---

My go-forward solution

I found that just reading out the first heading wasn't really that useful. Especially if the last page you were on was a loading sequence. You can hear that there something new has been focused, but it's certainly not clear that this forms the part of a whole now page.

Add some useful, descriptive text to the page

As such I now have a single paragraph at the top of my page layout template. This includes a screen-reader friendly message, along with a very rough overview of what the page.

  The Dashboard page is now on-screen.
  It contains several widgets for summarizing your data.

Note that the tabindex value allows us to focus this element with JavaScript. You might not want to use a p element for this, you can use anything you like really.

Hide it off-screen (optional, only required if it would break your design/readability)

This is then coupled with CSS to move this element off-screen:

.screenreader-summary {
  position: absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  outline: none; /* Important, don't show an outline on-focus */
}

Focus this element, when a new page is shown on-screen

Finally, in the JavaScript code that shows your page on screen (e.g. in MarionetteJS using onShow or the show event):

$yourViewEl.find('.screenreader-summary').focus();

The result

I'm a sighted person, so take what I say with a pinch of salt - however I found that reading out a short description is so much more useful.