作者:aarongwang56_972 | 来源:互联网 | 2018-06-18 07:11
想象一下,你把一个重要内容放在一个弹出窗口,又不聚集到这个窗口。让使用屏幕阅读器的同学情何以堪,只有当他们tab到这页面结束,还继续tab,才可能找到这个弹窗
是不是应该为弹出菜单提供更好的可访问支持?这篇文章将涉及到3种常见的弹窗:
window.open 新建的浏览器窗口 // js
document.getElementById('theframe').src = '/target.html'
3. 页面 DOM 创建的伪弹出窗口:使用
来隐藏。链接用锚点。
代码如下:
[open current page DOM]
... 很多很多东西隔在中间 ...
二、大多数情况下
大数多情况下,用户的浏览器都是有开启 JS 的。而我们要做的是:focus 到弹出的窗口,并且第一个 tab 就可以访问里面的内容。听过来挺简单的,hub? 先看看 DEMO:
预览:http://demo.jb51.net/js/2011/popmenu_focus/" target=_blank>可访问弹出菜单/窗口
1. window.open 新建的浏览器窗口:focus 到新建的窗口即可。
代码如下:
// 引用自:QuickMode - popups
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {
// focus 到新建窗口
newwindow.focus();
}
// 阻止触发器的默认行为
return false;
}
2. 创建的窗口:调试了好久,IE8/9 需要等 iframe onload 成功后 setTimeout 来 hack;firefox 不能使用 ifrcontentWindow.focus(),只能用 iframe.focus()。综合起来需要这样的代码:
代码如下:
// for all except firefox
setTimeout(function(){
f.contentWindow.focus();
}, 50);
// hack for firefox
navigator.userAgent.toLowerCase().indexOf('firefox') !== -1 && f.focus();
3. 页面 DOM 创建的伪弹出窗口:对于 dom,除了
等这些 focusable 元素(W3C SPEC),都是不可以 focus 的。那么当需要 focus 到一个 p 时,我们有什么方法可以做到呢?通常来说,我们可以设置 Tabindex 来让像
这样的非 focusable 元素可以触发 focus 事件。但我们想要的时真正 focus 到一个地方,以便于使用 tab 来访问这个区域的内容,所以这种方法对我们等于无用。
目前还没有比较好的方法(对于我能想到的和找到的),所以目前来说,我们只能利用一个 focusable 元素来创建 focus 目标。我们可以这样做:
Get focus 但问题是,对于这个链接对于我们来说是毫无作用的,我们需要隐藏他,又能 focus 到。但 display:none 的时候是不能 focus 的。对于隐藏 来说,这里也不想说太多。推荐看看这篇文章:使用clip隐藏内容。那么我们可以这样来 hack 我们的这个链接:
代码如下:
// html: 注意用 hidefocus 来删除虚线框
Get focus
// CSS: 使用 clip
.getfocus{
position:relative;
clip:rect(1px 1px 1px 1px);
clip:rect(1px, 1px, 1px, 1px);
}
// Javascript: 记得把 放在这个 DOM 结构的最前面方便自上至下 tab 下去
a.focus()
三、总结: 至此,重要的技术实现点也已经说明白。代码请见这个粗陋的 DEMO,虽然只是没有特别优化的一段代码,但相信可以解决很多问题。对于可访问性,我们要走的路还有很多。一点点来吧,从今天开始。