Accessibility focus trap, make items inside iframe not focussable

Issue

This Content is from Stack Overflow. Question asked by Zebda

On my website I am creating a dialog. When this dialog is visible I want to create a focus trap so the user is tabbing inside this dialog until the dialog is closed. I am able to set the tabindex of all items on my page to -1 so they can’t be focussed.

But I have one problem. I have an iframe with a webform inside it. The field and submit button inside this iframe are still focusable after I’ve run my tabindex script. I know this is how it should work (I shouldn’t be able to change iframes content) but how can I make sure these items are not focusable when the dialog is visible?

For now I just hide the form (display:none) when the dialog is visible and this is an okay option. But I have the feeling there is a better way and since I’m learning about accessibility I’m curious about what solutions there are for this problem.

Thanks in advance



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of 
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.
people found this article helpful. What about you?