CODEWITHSUNDEEP
htmlcssiframe
g.pickardou
g.pickardou

Reputation: 35953

Tab (keyboard) navigation in a page which contains iframe

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.

Upvotes: 4

Views: 10485

Answers (1)

Olga
Olga

Reputation: 1690

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/

Upvotes: 4

Related Questions