how to check screen reader is running in html5 application

Question

I want to make my application accessible.

my application want to behave differently while screen reader is on and off

for example : http://jsbin.com/pakiwuqa/6/edit

when screen-reader(jaws) is on #textContent should be in tabbing after #btn1 or #btn2,

when screen-reader(jaws) is off #textContent should not be in tabbing

is it possible to test that jaws is on or off using javascript ?

Answer 1

I think you misunderstand how a screen reader (SR) is supposed to work, you don't need to put #textContent in the tabbing order.

If the SR user is browsing, they will likely read by using the arrow keys, and they will read through all the non-hidden content in source-code order (#textContent, item 1, item 2). This is standard behaviour and useful, if it could not read the content apart from things you can tab to, it wouldn't be much of a reader.

The role=application is oddly placed though, as that div does not contain any form controls, and might prevent some screen readers from reading #textContent. Application is a region, and should wrap a set of form controls or interactive widgets. When inside a container marked as application, the page is supposed to handle key presses.

If the user is filling in a form, the SR will behave more how you are expecting, and they will skip the #textContent unless it is marked up as a <label>, you use aria-describedby, or they use the arrow keys.

Lastly, there isn't a reliable way of detecting assistive technology on the web, and there are privacy concerns with that approach. It may never be possible, plus when you factor in not everybody who has a disability uses a SR, you find you're better off building an accessible page/application versus hack.