Set JAWS cursor focus programmatically

2.6k views Asked by At

I'm developing a web application that needs to be accessible via JAWS. There is a requirement which says that newly opened dialogs need to be focused on in order to be announced by JAWS. I implemented this, and it's working fine without JAWS: the dialog's first element has focus. Testing this web site with JAWS+IE shows that the element is focused, but the braille viewer shows something different (part of the page header) and that's also being read.

From my understanding, this means that the PC's cursor is correct, but the JAWS cursor is misplaced.

Is there any way to influence the JAWS cursor placement using JavaScript?

2

There are 2 answers

0
dmitriy.g On

Is there any way to influence he JAWS cursor placement (via Javascript)?

No

0
a11y_guru On

When testing with JAWS, you need to not just look at the screen but listen to what JAWS is saying. Spend time getting to know JAWS intimately if you need your testing to provide reliable results.

The best way to create an accessible dialog is to:

  • Ensure the dialog heading has an ID attribute.
  • If the dialog has a short message, make sure this also has an ID attribute.
  • Give the container a role of "dialog" and a tabindex of "-1".
  • Ensure that the container's ARIA-LABELLEDBY attribute contains the ID of the heading.
  • Ensure the container's ARIA-DESCRIBEDBY attribute contains the ID of the short message if there is one.
  • When the dialog opens, send focus to the container.

If you follow this pattern to the letter, your dialog will work beautifully with JAWS and other AT.

Simple example:

<div id="dlg_discard" tabindex="-1" role="dialog" aria-labelledby="dialog_heading" aria-describedby="dialog_message">
<h1 id="dialog_heading">Discard changes?</h1>
<p id="dialog_message">Are you sure you want to discard your changes?</p>
<button>Yes</button> <button>No</button>
</div>

... And the jQuery to make the dialog visible ...

$("#dlg_discard").show().focus();