博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Accessibility应用之focus篇
阅读量:5879 次
发布时间:2019-06-19

本文共 3567 字,大约阅读时间需要 11 分钟。

最近项目中需要应用accessibility,大量使用了focus和blur,总结如下

一、设置焦点focus

如创建无障碍对话框:当一个对话框出现时,焦点应在对话框内,这样用户才可以使用键盘继续浏览。焦点设置在对话框内的确切位置,在很大程度上取决于对话框本身的目的。如果确认对话框(confirmation dialog )内有一个“继续”按钮和一个“取消”按钮,那么你可以将焦点默认设置在“取消”按钮上。如果对话框是用来让用户输入文字的,那么你可以将焦点默认设置在文本输入框内。如果你实在不知道将焦点设在何处,将焦点设置在能代表对话框的元素上是个不错的选择。

由于多数情况下,我们使用<div>元素来表示一个对话框,那么可以将焦点默认设置在该<div>上。你需要将该元素的tabIndex属性设置为-1,这样这个元素才能获得焦点。这个属性值允许你使用JavaScript将焦点设置到该元素,但不会将该元素插入到正常的Tab键顺序中。也就是说用户将无法按TAB键将焦点设置在对话框上。直接在HTML中设置或通过JavaScript设置都可以。在HTML中设置:

通过JavaScript设置:

var div = document.getElementById("my-dialog");div.tabIndex = -1;div.focus();

一旦将tabIndex设置为-1,元素就可以调用focus(),就像任何其他的可聚焦元素一样。这样用户就可以按Tab键在对话框中导航了。

说明:tabIndex在不同的元素上对focus有不同表现,具体参见 http://test.cita.illinois.edu/aria/focus-tests/index.php

二、限制焦点(Trapping focus)

对话框的另一个可访问性问题是要确保焦点不能跳出对话框。一般来说,如果对话框是模态的,其焦点应无法逃脱对话框。当对话框打开时,如果按tab键将焦点设置到对话框背后的页面元素中,那么对于键盘用户来说将焦点重新返回到对话框内是相当困难的。因此,最好使用一些JavaScript以避免这种情况发生。

基本思路是使用事件捕获(event capturing)侦听focus事件,这种方法由Peter-Paul Koch[2]推广,如今已在JavaScript库中广泛使用。由于focus不冒泡(bubble),你无法在事件流的冒泡阶段捕捉到它。相反,你可以通过使用事件捕获方法捕获页面上的所有focus事件。之后,你只需确定获得焦点的元素是否在对话框中。如果没有,则将焦点设置在对话框上。代码是非常简单的:

document.addEventListener("focus", function(event) {    var dialog = document.getElementById("my-dialog");    if (dialogOpen && !dialog.contains(event.target)) {        event.stopPropagation();        dialog.focus();    }}, true);

如果你使用JavaScript库的话,focus事件委托的方法也可以实现同样的效果。如果不使用JavaScript库,同时需要支持Internet Explorer 8及更早的版本,可以使用focusin事件代替(译者注:focusin和focusout支持事件冒泡)。

三、恢复焦点(Restoring focus)

对话框的最后一个焦点难题:当对话框关闭时,将焦点返回至页面的主体部分。思路很简单:为了打开对话框,用户可能激活了一个链接或一个按钮。此时焦点转移到对话框中,用户完成一些任务后,然后退出对话框。焦点应该重新设回至为了打开对话框而点击的链接或按钮上,以便可以继续浏览网页。在Web应用程序中经常忽视这个问题,但效果是天壤之别。

与其他部分一样,少量代码即可实现效果。所有浏览器都支持document.activeElement ,返回当前具有焦点的元素。你只需获得这个值,然后显示对话框,关闭对话框时,将焦点返回到该元素。例如:

var lastFocus = document.activeElement, dialog = document.getElementById("my-dialog");dialog.className = "show";dialog.focus();

这段代码的重点是它记录了最后的焦点元素。这样一来,对话框被关闭时,将焦点设置在它上面:

lastFocus.focus()

四、退出焦点(对话框)

最后一个问题是要为用户提供一个快速简便的方法来退出对话框。最好的办法是使用Esc键关闭对话框。这是对话框在桌面应用程序中的退出方式,所以用户非常熟悉这种方式。只需监听Esc键是否被按下,然后退出对话框,如:

document.addEventListener("keydown", function(event) {    if (dialogOpen && event.keyCode == 27) {        // close the dialog    }}, true);

五 补充:Delegating the focus and blur events

少数事件,如focus, blur, 和change不支持事件冒泡,如以下代码

Some text.

$('testParagraph').onfocus = handleEventPar;$('testInput').onfocus = handleEventInput;

当用户聚焦在input时候handleEventInput可以执行,但由于focus事件不支持冒泡,所以handleEventPar并不执行。唯一例外的是p标签定义tabIndex属性,否则handleEventPar永远不会被执行

让我们将转为到事件捕捉(Event capture),代码如下

Some text.

$('testParagraph').onfocus = handleEventPar;$('testInput').onfocus = handleEventInput;$('testParagraph').addEventListener('focus',handleEventPar,true);$('testInput').addEventListener('focus',handleEventInput,true);

使用addEventListener,并设置第二个参数为true,这样如果用户聚焦在input的时候handleEventParhandleEventInput均能被执行

兼容IE

但IE并不支持事件捕捉,它支持和事件,不同于focus和blur,这两个事件支持事件冒泡。如要兼容IE,需要修改代码如下:

$('dropdown').onmouseover = handleMouseOver;$('dropdown').onmouseout = handleMouseOut;$('dropdown').onfocusin = handleMouseOver;$('dropdown').onfocusout = handleMouseOut;$('dropdown').addEventListener('focus',handleMouseOver,true);$('dropdown').addEventListener('blur',handleMouseOut,true);

参考:

  • http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
  • http://www.topcss.org/?p=590

转载地址:http://uldix.baihongyu.com/

你可能感兴趣的文章
JavaScript高级程序设计--对象,数组(栈方法,队列方法,重排序方法,迭代方法)...
查看>>
【转】 学习ios(必看经典)牛人40天精通iOS开发的学习方法【2015.12.2
查看>>
nginx+php的使用
查看>>
在 ASP.NET MVC 中使用异步控制器
查看>>
SQL语句的执行过程
查看>>
Silverlight开发历程—动画(线性动画)
查看>>
详解Linux中Load average负载
查看>>
HTTP 协议 Cache-Control 头——性能啊~~~
查看>>
丢包补偿技术概述
查看>>
PHP遍历文件夹及子文件夹所有文件
查看>>
WinForm程序中两份mdf文件问题的解决
查看>>
【转】唯快不破:创业公司如何高效的进行产品研发管理
查看>>
程序计数器、反汇编工具
查看>>
Android N: jack server failed
查看>>
007-Shell test 命令,[],[[]]
查看>>
关于Linux系统使用遇到的问题-1:vi 打开只读(readonly)文件如何退出保存?
查看>>
pandas 按照某一列进行排序
查看>>
在WPF中如何使用RelativeSource绑定
查看>>
XSLT语法 在.net中使用XSLT转换xml文档示例
查看>>
如何将lotus 通讯簿导入到outlook 2003中
查看>>