1

I am building a modal plugin and I would like to be able to set focus to the address bar.

I'd like to be able to do this because I need to be able to restrict tabbing to objects inside of the modal window, but keyboard users and accessibility users should be able to tab out of the modal window to the address bar when they have reached the final element (so that they are not stuck inside the modal). I'm aware that I can do this by setting all of the tabbable elements outside of the modal to have a tabindex of -1, but I'd like to avoid that solution if possible.

I'm aware that it may not be possible to directly set focus to the address bar due to security restrictions. Is there, however, a way to either do this, or defocus the page so that the next element is the address bar?

  • 2
    Why can't they just use Ctrl-L/Cmd-L? – jonrsharpe Jun 18 '16 at 21:00
  • You may have more success with teaching your users about [Control] + [L] – jdphenix Jun 18 '16 at 21:00
  • http://stackoverflow.com/questions/3266053/setting-focus-to-the-address-bar-using-a-firefox-extension perhaps – mplungjan Jun 18 '16 at 21:01
  • @jonrsharpe Mouse users can access the address bar from a website or in a modal window. Keyboard users can tab to the address bar from a window - additionally, they can do this using an HTML5 dialog. A modal dialog plugin should share this behavior for maximum accessibility. –  Jun 18 '16 at 21:50
  • @mplungjan That's a similar issue, but that question deals with browser extensions, which have different security execution contexts than websites do. –  Jun 18 '16 at 21:56

1 Answers1

0

Having a modal element does not remove the other elements from the visual buffer. A screenreader may read automatically any other element after your modal. So removing the tabindex of elements which might be announced is indeed not a solution.

You may try to remove the focus from any other element using some code like $(".outside_modal").onfocus() {$("#modal-first-link").focus()} but you will have incoherence between your visual focus which will read link targets and the action provided by the keyboard focus.

The only viable solution is to set the modal element in the last position of your DOM.

Adam
  • 17,838
  • 32
  • 54