开发者社区> 问答> 正文

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

小旋风柴进 2016-03-23 14:55:33 1061

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

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

JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:11:09

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

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

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程