杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学一起面对面交流网站无障碍访问方面的问题。杨 同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时，他对我们前端的同学特别的强调：他最深恶痛绝的 就是页面链接上有 onfocus=”this.blur()” 这句代码，这从何说起呢？
(图一)
各 位同学，看到这句代码有没有觉得眼熟，对的，你懂的，我们常用它来去除链接取得焦点时外围出现的虚线框（如上图一），google一下，前面几十页谈的都 是这个去除虚线框的技巧。但我们也许以前从未想过：我们的这行代码给盲人用户们带来了巨大的困扰：这中断了盲人用户的Tab键路径，导致Tab光标无法聚 焦页面的下一个控制器（链接、表单域、object、image map等）。测试如下：
<body>
<a href=”#” >第一个链接</a>
<a href=”#” >第二个链接</a>
<a href=”#” onfocus=”this.blur();”>第三个链接</a>
<a href=”#” >第四个链接</a>
<a href=”#” >第五个链接</a>
<a href=”#” >第六个链接</a>
</body>
按 下Tab键，第一和第二个链接都可以正常获取焦点，继续Tab到第三个链接时，悲剧出现了：此时焦点会回到第一个链接，而无法Focus到第四个链接，原 因是当Focus到第三个链接时，onfocus=”this.blur()” 事件处理强制触发了失焦，焦点重新回到文档的最开始。于是不停按Tab的结果就是焦点在前面三个链接轮流转，后面的内容通过Tab键无法访问[1]。
那 么，有更好的方式吗？从根源上看，加onfocus=”this.blur()”是为了去除链接获取焦点后外围的虚线框（当然chrome、 safari、opera下的focus效果各异，这里姑且就这么叫吧 ）。W3C关于Outline的文章里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得，虚线框的存在有它的合理性，但有时你也许无法回避某 些”视觉洁癖”需求（如图二：虚线框使“商品”背景和下面的红色色块分隔开了），以下总结了去掉虚线框的几种常用方法：
<a href=”#” onfocus=”this.blur()”>this blur</a>链接聚焦触发时失去焦点，js和html耦合在一起没有兼容性问题是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属性，该链接都会失去虚线框
相关推荐
“onfocus='this.blur()'”是一个JavaScript事件处理函数，它会在元素获得焦点时立即移除焦点，通常用于消除链接或按钮在获得焦点时周围的虚线边框。然而，这个技术对于使用屏幕阅读器的盲人用户来说是极其不利的。...
a{ blr:[removed]this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ -moz-outline-style: none; /* FF */ } 全 局控制 CSS实现 a{blr:[removed]this.onFocus=this.close());} /*...
然而，在某些设计场景下，这种虚线框可能会影响网站的整体美观或是与设计风格不协调，因此开发者有时需要去除这些超链接的虚线框。 ### 如何去掉超链接的虚线框 要去掉超链接的虚线框，可以通过多种方法实现，包括...
这里的`star`是自定义的属性名，`expression(onfocus=this.blur())`则是JavaScript代码，用于在链接获得焦点时自动模糊，从而消除虚线框。这种方式大大减少了代码量，提高了效率。 然而，需要注意的是，当表达式...
<input style="ime-mode:disabled"> 关闭输入法 <br/>光标是停在文本框文字的最后 <script language="javascript"> ... <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>
onfocus事件会在链接获得焦点时触发，而this.blur()是一个JavaScript方法，用于使链接失去焦点，从而去除虚线框。代码示例为： <ahref="#"onfocus="this.blur()">链接 这种方法简单直接，但仅适用于非锚点链接，因为...
blr: expression(this.onFocus = this.blur()); } ``` 这里使用了`blr`属性，该属性并不存在于标准CSS中，而是一种特殊的写法，用于触发IE中的JavaScript表达式。`this.onFocus = this.blur();` 这段代码的作用是...
当链接获取焦点时，调用`blur()`方法使链接失去焦点，从而消除虚线框。在HTML中，可以这样写： ```html <a href="//www.jb51.net/" onfocus="this.blur();">设计蜂巢 ``` - **方法二（jQuery）**：如果使用了...
### CSS去掉链接虚框知识点详解 #### 一、概述 在网页设计中，当用户通过键盘导航（例如使用Tab键）或使用辅助技术（如屏幕阅读器）与页面交互时，浏览器默认会在可聚焦元素（如`<a>`标签、某些表单元素等）周围...
3. **去除图片链接虚线**：在图片链接中添加 `onFocus="this.blur()"` 可以消除鼠标点击后的虚线边框：`<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>`。 4. **电子邮件表单提交**：创建一...
为了确保图片链接在FF和IE浏览器下均无虚线效果，开发者可以灵活运用JavaScript和CSS技术，通过`this.blur()`、设置`outline: none`或两者结合的方式来实现这一目标。在实际项目中，建议进行充分的测试以确保在各种...
最后，为了通用性，我们可以创建一个函数`fHideFocus`，接收元素类型作为参数，批量处理去除虚线边框的问题： ```javascript function fHideFocus(tName) { var aTag = document.getElementsByTagName(tName); for...
文档中给出的代码`a{star:expression(this.onFocus=this.blur());}`表示当元素获得焦点时，立即使用`blur()`方法去除焦点。这种方法在现代网页开发中并不推荐使用，因为它不跨浏览器兼容且难以维护。 对于Firefox...
- **解释**：这段代码定义了一个带有图片的链接，通过设置`border`属性为`0`来去除图片周围的边框，并通过`onFocus`事件处理程序调用`this.blur()`方法来避免点击链接时出现虚线框。 ### 17. 表单提交至邮箱 - **...
至于IE浏览器，比较遗憾的是，目前还没有找到通过CSS去掉链接虚线框的完美解决方法。所以，只能使用IE特有的`hidefocus`属性来实现这一需求。 总结来说，去除非必要的焦点轮廓线，主要集中在移除`outline`属性，并...
- 要去掉超链接的默认边框，可以在链接样式中添加`onfocus="this.blur()"`，这会在链接获得焦点时立即失去焦点，从而隐藏边框。 9. **网页元信息**： - `META`标签用于设置网页的元信息，如设置关键词以利于搜索...
首先，我们可以为`<a>`标签添加`onfocus`事件，当该链接获取焦点时，调用`this.blur()`函数，使得链接失去焦点，从而消除虚框。以下是具体的代码示例： ```html <a onfocus="this.blur()" href="javascript:void(0)...
在这里，`star`是一个自定义的CSS属性，它通过`expression`关联到JavaScript的`onfocus`事件处理，当链接获得焦点时，自动调用`blur`方法去除虚线边框。 ### `expression`的限制与注意事项 1. **性能问题**：`...