Tab (keyboard) navigation in a page which contains iframe

Question

I have a page with iframe. The iframe contains input elements. When the user places the cursor into the first input textbox in the iframe and presses the tab key, the focus jumps out from the iframe and the next element in the parent page gets the focus. (instead remaining in the iframe, and place to focus on the 2nd input element.)

I've tried to place tabIndex attribute for the input elements with no effect.

I would like to ensure the input elements in the iframe can be accessed by pressing tab key.

* Begin Edit Risking the minuses, but I have to share my opinion... I recognized answering this question is this is not obvious.Regarding the UX consequences of this behavior: Seeing the browsers and html/css we still have these white holes what are teleport us to the stone-age of UI/IX: the 80s and early 90s... Just place yourself into the situation of an end user, who tries to navigate between UI elements using the tab key... End Edit *

...sorry if one felt be offended because there is not obvious answer for this in the age of HTML 6+... I think instead we should solve or workaround this to ensure enduser UX.... or is not this reproducable? Please let me know if I missed something.

I don't think you can do that (I hope I'm wrong) as you can't control what's inside the iframe. With tab you just interact between your elements (your html) . Anyway I'll follow the question as it may be nice if Im wrong — Alvaro Menéndez, Apr 16 '15 at 08:49
@Alvaro Menéndez: I can not believe it is impossible to navigate within an iframe with tab. I do not want change anything on a 'normal' behaviour: — g.pickardou, Apr 16 '15 at 08:52
Possible duplicate of http://stackoverflow.com/questions/6815836/navigate-through-the-tab-key maybe you can find your answer there? — Olga, Apr 16 '15 at 10:06
@Olga: Yes I've read that _before_ I asked my question. 1) The answer which checked as 'Answer' there does not even mention the iframes. 2) I wrote in my question I actually _tried_ to use tabindex which does not helped. 3) Also "read your browser documentation" like answers (like also can be find following your link) are not appropriate because our ( your and mine) end users should not must read a browser doc to navigate though the input elements with tab as she/he used to it in the last 25 years... — g.pickardou, Apr 16 '15 at 12:43
@putvande: Both pages (parent and child) are mine, and are in the same domain. I can modify freely both of them — g.pickardou, Apr 16 '15 at 12:44

score 4 · Answer 1 · edited Aug 15 '20 at 22:33

Please consider this simple example that contradicts your claim. Tab works correctly navigating through form elements of both child frame and parent frame.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Outer Frame</title>
    <style>
        .iframe-wrapper {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="iframe-wrapper">
        <iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <input type="button" value="No, press me!">
</body>
</html>

And inner-frame.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inner Frame</title>
    <style>
        .wrapper {
            border: 2px solid #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>Hello, world. I am iframe.</div>
        <input type="text" name="" id="" value="Write in me">
        <input type="button" value="Press me">
    </div>
</body>
</html>

Tested on Windows with Chrome, Firefox and IE - all latest versions.

I've also made a JS fiddle to demonstrate it. But for some reason for iframe to render you need to press Run first. http://jsfiddle.net/zecu3yvn/

Thanks for this demo. Now I am trying isolate and repro my case where the tab navigation definitely does not works, instead works as I described in my question. However it is a pretty complex page with bootstrap, jquery and some plugins... — g.pickardou, Apr 16 '15 at 19:26

Tab (keyboard) navigation in a page which contains iframe

1 Answers1