使父DOM元素不可读

时间:2014-02-05 12:35:32

标签: javascript accessibility

我正在使我的IFrame成为全屏,我想使用javascript在父禁用[on tabbing]中制作DOM元素。有什么想法吗?

提前致谢

1 个答案:

答案 0 :(得分:1)

我认为这个场景非常类似于内容弹出式窗口(灯箱),您可以将其用于:

  • 将键盘焦点移动到iframe的顶部。
  • 将键盘焦点保持在iframe中。

要将键盘焦点移动到iframe,请使用正确的链接(使用href)并触发:

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

要将焦点保持在iframe中,找到第一个和最后一个元素并循环它们:

(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不是我的强项,所以你可能需要调整它。例如,如果第一个/最后一个可聚焦元素是一个不起作用的表单控件。

此外,值得了解的是,屏幕阅读器不一定使用标签来浏览页面,它们是“箭头”(浏览模式)并且不一定会触发焦点。 为了将它们保留在iframe中,您实际上需要“隐藏”其他所有内容。

如果主要内容和iframe位于同一级别,这很简单,您可以从以下开始:

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

页面加载时使用:

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

当iframe成为焦点时:

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

所有这些技巧(在灯箱的上下文中)都在这里:https://gist.github.com/alastc/7340946

注意:完整筛选iframe的整个概念听起来有点可疑,如果你提供了一些上下文,可能会有更好的解决方案吗?