0

So I'm trying to make my site more accessible, and part of that is helping people navigate the site by tabbing through the links. The issue I've come across is that tabbing won't play nicely with my custom modals I've built.

For example, on Bootstrap you can tab through the links on the page, but when you launch a modal the focus shifts to the modal's content, and you can then only tab through the links in the modal. Close the modal and you go back to tabbing through the links on the page.

On my site, when I launch the modal the focus stays on the launch link. If I continue to tab, I just continue on the page links and not the contents of the modal.

How do I get the modal to be in focus, and restrict tabbing to the contents of the modal while it's open?

Thanks, I hope my question was clear enough.

evanart
  • 11
  • This might be helpful: http://heydonworks.com/practical_aria_examples/#warning-dialog – steveax Mar 14 '18 at 15:03
  • Thanks, this was helpful! It lead me to find this article: https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element Which is basically exactly what i need. I was able to get the first part to work - trapFocus on my modal. however, i can't see to get the undoTrapFocus function to run. after i close the modal i'm still stuck with my focus on the modal and not the rest of the page. I think maybe it has something to do with namespace - i'm not sure what i'm supposed to put there. any ideas? thanks! – evanart Mar 14 '18 at 16:32
  • also look at https://github.com/gdkraus/accessible-modal-dialog. it addresses keyboard focus and tab order – slugolicious Mar 16 '18 at 21:30

1 Answers1

0

Trapping keyboard focus is quite more difficult than what you can find on Internet.

Intercepting keyboard events for tab key won't have effect on screenreaders which will still list other elements as being activable.

Elements have both to removed from the screen (aria-disabled) and from the keyboard and mouse navigation.

I already made a full answer on the subject on the following question: Prevent background items from receiving focus while modal overlay is covering them?

Adam
  • 17,838
  • 32
  • 54