0

I'm working with the following set up:

jQuery - 1.7.1
simplemodal - 1.4.2

And my problem is that for accessibility reasons I'd like to put focus on the modal window when it opens and allow users to hit the tab-key to go to the close-button and there click enter to close the window.

What I'm using simplemodal for on the page is just to show tables in full-size which does not fit on the original grid. I hence have no input fields or such, the only thing I can put focus on is the div working as a container for the simplemodal window, simplemodal-wrap, and yes we are working with HTML 5.

I've followed the steps suggested here, tab order for links in a simplemodal dialog, which made me able to put focus on the close-link by extending the input variable to:

$('#simplemodal-container :input:visible:enabled, #simplemodal-container a:visible')

But this is where I'm stuck, I cannot manage to change this to also contain the div/table/content, and once the close-link has focus hitting enter-key has no effect.

Any suggestions, pointers, solutions?

Community
  • 1
  • 1
staffang
  • 176
  • 10

1 Answers1

0

You can bind an event handler to the keypress event on .modalCloseImg. You may want to bind this a little closer on a static element other than document, but without seeing the HTML its the best I can do.

$(document).on("keypress", ".modalCloseImg", function(e){
   e.keyCode == 13 ? $.modal.close():"";
});

BTW: Did you know the escape key closes the window?

Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189
  • That's one way to do that part, Yes I know escape is closing the window but there are requirements from the national accessibility organization here in Sweden for these things. This only solves half of my issue though, but thanks! – staffang Jul 02 '13 at 13:58
  • Oh, and the HTML is not really key here I think, it's more about the simplemodal script taking control over tabbing by itself and there I'm lost... – staffang Jul 02 '13 at 14:02