Is there a way to make modal available?

Question

I am working on a project with Twitter Bootstrap and play around JavaScript components using a screen reader.

When I launch the modal dialog, Jaws skips the modal transition to the next link on the page.

Is there a way to implement an affordable modal?

Another solution, which, I think, is to make the static functionality page modal and redirect to this page when the user uses the screen reader. Can I somehow determine if the user is using a screen reader?

Answer 1

An accessible modal dialog is available here: http://hanshillen.github.com/jqtest/#goto_dialog

Once the modal is activated, keyboard navigation is trapped inside the dialog box until it is explicitly closed by the user.

http://irama.org/web/dhtml/lightbox/ details such an accessible implementation (there are few differences between the lightbox and the modal dialog, the important thing is the modal part and keyboard control).
You can also read in the unofficial copy of the DHTML style guide the modal section and W3C / WAI-ARIA Creating a modal dialog .

J. Wajsberg wrote a jQuery plugin capable of capturing keyboard input inside a DOM element if you need a more DIY approach.

Answer 2

I do not know what solution can be detected automatically if the user uses a screen reader. but there is a google solution to hide the link at the top of the page (left: -1000em and position: absolute), which can be activated if you use the keyboard and display "special mode".

<a href="#" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a> 

for your modal dialog, try using the aria attribute and aria-atomic = "true" aria-live = "assertive" in the html div dialog box. it should declare the contents of your dialog box.