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

imagine have simple, single-page application - regardless of whether written using backbone, angular, ember or else.

how can tell screen reader we've changed 'page' when route followed?

in classic application, when navigate /index.html /about.html screen reader detects page change, , re-reads you'd expect.

in backbone application though, when follow route cannot work out how trigger 're-read'. i've tried triggering focus event i'd seen somewhere, doesn't seem work.

note: i'm testing nvda/chrome.

overall, should not need trigger 're-read', , depending on ui might not thing anyway.

my experience has been angular.js (as accessibility person rather developer), , our overall approach manage focus rather trigger re-read. (we extensive accessibility testing.)

the key thing ui point of view (primarily screen reader users) selecting link (e.g. about.html) should take somewhere.

in case appropriate place put focus top of content area of 'page', <h1>.

in order work target element should focusable via script, needs tabindex unless link or form control:

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

the -1 means not in default tab order, focusable via script. see more @ wai-aria authoring practices.

then @ end of function loads new content, including tabindex attribute, add like:

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

when adding tabindex dynamically best in line before focus() function otherwise may not work (i remember testing jaws).

to test use either:

• nvda & firefox, windows
• jaws & ie, windows

it test voiceover on safari/osx, works differently , may not hit same issues windows based screen reader.

you hit lot of issues chrome/nvda not supported well, , end-users unlikely use that. ie ok nvda, firefox best.

overall, worth getting know wai-aria authoring practices, particularly using aria in html. though using js app, browser (and therefore screen reader) interpreting resulting html advice still relevant.

lastly, if updating page content without user pressing space/enter activate something, might find jaws/nvda not know new content 'virtual buffer' has not updated. in case, might need add js shim make them update, if run problems in testing, should not global patch.