视障站长深恶痛疾的onfocus=”this.blur()”

在谈到读屏手机软件实际操作网页页面时，他对大家前端开发的同学非常的强调：他最深恶痛疾的便是网页页面连接上有 onfocus=”this.blur()” 这句编码，这从何说起呢？

(图1)

各位同学，看到这句编码有木有感觉熟悉，对的，你懂的，大家常见它来除去连接获得聚焦点时外围出現的虚线框（如上图1），google1下，前面几10页谈的全是这个除去虚线框的技能。但大家或许之前从未想过：大家的这行编码给视障客户们带来了极大的困扰：这终断了视障客户的Tab键相对路径，致使Tab光标没法聚焦网页页面的下1个操纵器（连接、表单域、object、image map等）。检测以下：

按下Tab键，第1和第2个连接都可以以一切正常获得聚焦点，再次Tab到第3个连接时，不幸出現了：此时聚焦点会返回第1个连接，而没法Focus到第4个连接，缘故是当Focus到第3个连接时，onfocus=”this.blur()” 恶性事件解决强制性开启了失焦，聚焦点再次返回文本文档的最初。因而不断按Tab的結果便是聚焦点在前面3个连接轮着转，后边的內容根据Tab键没法浏览[1]。

那末，有更好的方法吗？从根本原因上看，加onfocus=”this.blur()”是以便除去连接获得聚焦点后外围的虚线框（自然chrome、safari、opera下的focus实际效果各不相同，这里暂且就这么叫吧 ）。W3C有关Outline的文章内容里表明这个虚线框用来告知客户当今网页页面获得聚焦点的元素。我感觉，虚线框的存在有它的有效性，但有时你或许没法逃避一些”视觉效果洁癖”要求（如图2：虚线框使“产品”情况和下面的鲜红色色块隔开开了），下列总结了去掉虚线框的几种常见方式：

除去虚线框的方式 好坏 适配性 是不是终断tab <a href=”#” onfocus=”this.blur()”>this blur</a> 连接聚焦开启时丧失聚焦点，js和html藕合在1起 沒有适配性难题 是 a:focus {outline:none}或
a{outline:none} outline由css2.1引进，除去虚线框视觉效果上的难题更是css的岗位职责 ie6/ie7不适用,ie8+/ff /safari/opera[2]适用 否 <a href=”#” hidefocus=”true” >hidefocus</a> 该特性是ie的独享特性[3] ie5+适用 否 a { noFocusLine: expression(this.onFocus = this.blur())} 可大批量解决，但expression的特性难题不可以忽略 expression ie6/7适用，ie8+、非ie不适用 是

综合性以上，除去连接虚线框的强烈推荐方式是：ie下用hidefocus特性，ff/chorme/opera/safari下用outline:none。即:
<a href="#" hidefocus="true" >连接</a>
a:focus {
outline:none;
}

杨永全同学无可奈何地说，假如网页页面由于onfocus="this.blur()"致使tab没法浏览网页页面所有內容，争渡读屏手机软件在载入网页页面以前会强制性过虑掉这个特性，可是假如客户是在js里边动态性开启this.blur(),读屏手机软件又要出新招来抑制了。这无疑提升了读屏手机软件的开发设计工作中量，以便让视障客户们能更畅顺的浏览大家的网站，尽可能防止应用onfocus="this.blur()"哦。

注解

[1]Safari默认设置状况下，按tab键是不容易focus连接的，但会focus表单域，在偏好设定-高級勾选“按下tab以高亮度显示信息网页页面上的每项”可打开该作用。Opera较为独特，它根据shift+左右上下方位键能够向左右上下focus网页页面聚焦点。

[2]在Opera下点一下连接（focus和active情况）时都不容易出現所谓的虚线框，因此 Opera下连接的虚线框难题能够不计。 Opera 根据shift+左右上下键造成的线框根据outline:none其实不能除去，可是Opera适用outline这个特性。

[3]hidefocus特性是ie的独享特性，尽管hidefocus特性有true or false两个值，但检测結果是ie5-ie9无论其值为true or false, 要是加上hidefocus特性，该连接都会丧失虚线框。