如何解决js生成弹出层窗口时的tab焦点问题

看到最近看到这里不少针对视觉障碍用户改进网页的问题。
我突然想到个几个相关的,一个比较不错的就是针对弹出的遮罩窗口默认绑定ESC快捷键关闭窗口。
但是,有两个困惑:

  1. 当弹出窗口后,tab仍然聚焦在之前点击的地方,如何让他自动跳到这弹出的遮罩上呢?
  2. 关闭遮罩窗口后,又如何重新定位到触发遮罩弹出的那个链接呢?
阅读 6.5k
评论
    2 个回答

    解答你的问题

    1. 正常情况下,只有表单元素与链接才能使用focus与blur事件,但是如果对元素设置了tabindex,那么其他元素也可以获取到焦点。如果tabindex值为0到32767,则按照tabindex大小和元素顺序控制按tab时的焦点转移顺序,如果tabindex值为负,则不响应tab键,但是元素可以被focus到。

    参考jsfiddle里的例子:http://jsfiddle.net/hqutv/3/

    2. 既然上个问题解决了,那么其实重新定位回去理论上也还是可以解决的,记下上次点击所在的元素即可。

      弹出层的焦点问题我觉得他已经成为如今互联网应用中最典型和棘手的可用性问题之一,尤其对使用读屏软件的视障用户。
      具体的实现我没有经验,但我觉得下面几点必须重视:
      1 fbocus到弹出层内的一个元素上(这可以是弹出层里的第一个可设定焦点元素,或者人为的给非焦点元素加上tabindex=0 来实现)
      2 弹出层关闭后,一定要将焦点重新还给触发弹出层的元素,这一点非常关键。

      关于这个问题的一个场景是浏览微博,当你对第十条微博进行了转发之后,很自然的应该继续从第十一条微博开始继续浏览,但是如果处理不好转发微博的弹出层的焦点的话,就会导致tab焦点回到网页第一个元素,那就意味着需要从头开始,这就给使用键盘操作的用户带来非常差的体验。
      新浪微博和腾讯微博之前都有这一问题,经过多次反馈和交涉之后,他们的部分页面已经解决,但仍然不够完美。大家如果有兴趣,可以在新浪微博的搜索页面,尝试转发一条微博,之后在观察tab的焦点位置。另外解释下,读屏软件一般都会主动读出焦点内容,网页里只要调用focus(),读屏就会读出被focus到的元素内容。
      推荐两个曾关注过弹出层焦点问题的同学:
      http://t.qq.com/xhlv
      http://weibo.com/27855136

        撰写回答

        登录后参与交流、获取后续更新提醒