CODEWITHSUNDEEP
javascriptaccessibility
Pradhaban
Pradhaban

Reputation: 694

Make Parent DOM Elements unreadable

I'm making my IFrame to be fullscreen, I want to make DOM Elements in Parent disable [on tabbing] using javascript. Any Idea?

thanks in advance

Upvotes: 0

Views: 153

Answers (1)

AlastairC
AlastairC

Reputation: 3297

I think the scenario is very similar to content pop-overs (lightboxes), where you want it to:

  • Move the keyboard focus to the top of the iframe.
  • Keep the keyboard focus in the iframe.

To move the keyboard focus into the iframe use a proper link (with href) and trigger:

$("#myIframe").attr("tabindex", "-1").css("outline", "0");
$("#myIframe").focus(); // separate line to ensure the tabindex is applied first.

To keep the focus in the iframe, find the first and last elements and loop them around:

(function(){ 
    var firstLink = $("#myIframe a:first").get(0);
    var lastLink = $("#myIframe a:last").get(0);

        $(firstLink).keydown(function(e) {
            // if you shift-tab on first link, go to last
            if(e.shiftKey && e.keyCode == 9) { 
                e.preventDefault();
                $(lastLink).focus();
            }
        });
        $(lastLink).keydown(function(e) {
            // if you press tab without shift, loop to first link.
            if (!e.shiftKey && e.keyCode == 9) { 
                e.preventDefault();
                $(firstLink).focus();
            }
        });
    })(); // end tabloop anonymous function

JavaScript/jQuery isn't my strong point, so you might need to adjust this. For example, if the first/last focusable element is a form control that wouldn't work.

Also, it is worth knowing that screen readers do not necessarily use tab to progress through the page, they 'arrow' through (browse mode) and do not necessarily trigger focus. In order to keep them within the iframe you effectively need to 'hide' everything else.

If you have the main content and iframe on the same level this is straightforward, you would start with:

<div class="mainContent">...</div>
<iframe id="myIframe">...</iframe>

When the page loads use:

$("#myIframe").attr("aria-hidden", "true");

When the iframe becomes the focus:

$("#myIframe").attr("aria-hidden", "false");
$("div.mainContent").attr("aria-hidden", "true");

All the techniques for this (in the context of a lightbox) are in a gist here: https://gist.github.com/alastc/7340946

NB: The whole concept of full-screening an iframe sounds a bit dubious, if you provided some context there may be a better solution?

Upvotes: 1

Related Questions