盲人站长深恶痛绝的onfocus=”this.blur()”
这篇文章是淘宝的妙净写的
杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。杨同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时，他对我们前端的同学特别的强调：他最深恶痛绝的就是页面链接上有 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的文章里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得，虚线框的存在有它的合理性，但有时你也许无法回避某些”视觉洁癖”需求（如图二：虚线框使“商品”背景和下面的红色色块分隔开了），以下总结了去掉虚线框的几种常用方法：
去除虚线框的方法
优劣
兼容性
是否中断tab
| <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属性，该链接都会失去虚线框。
分享到：
相关推荐
然而，默认情况下，当鼠标悬停在`<a>`标签上时，浏览器可能会显示一条虚线边框，这在某些设计风格中可能并不符合预期。本教程将深入讲解如何通过CSS来消除`<a>`标签在点击时出现的虚线边框。 首先，我们需要理解`<a...
在网页设计中，超链接（通常使用A标签表示）在获得焦点时，默认浏览器会给它加上一个虚线框，这在某些设计风格中显得不协调。例如，在使用CSS来设计美观的按钮或图标时，这个默认的虚线框就显得非常突兀，破坏了整体...
去掉a标签超链接的虚线框的方法 在网页设计中，a标签超链接的虚线框是非常常见的，但有时我们需要去掉这种虚线框以提高用户体验。今天，我们将讨论如何去掉a标签超链接的虚线框。 一、使用outline属性 在Firefox中...
// 使用示例：移除所有a标签的虚线边框 fHideFocus("A"); ``` 这里的`hideFocus`属性是IE特有的一种方式，其他浏览器可能不支持。因此，为了兼容性，使用`onfocus`事件更为可靠。 通过以上的方法，我们可以有效地...
将此属性添加到`<a>`标签中，可以有效地隐藏超链接的虚线框。 ```html <a hideFocus="true" style="outline: none;">链接文本</a> ``` 此外，也可以使用`onFocus`事件配合`blur()`函数，强制移除焦点，从而避免...
标题 "A Simple Dash-Line Class一个简单的虚线类(4KB)" 暗示这是一个关于创建和使用虚线类的小型程序或库，适用于图形界面开发。这个类可能用于在屏幕上绘制具有虚线样式边框的控件或其他元素，提供了一种高效且...
总结，将链接的下划线做成虚线主要涉及HTML的`<a>`标签和CSS的`text-decoration`, `text-decoration-style`, `text-decoration-color`以及`text-decoration-thickness`属性。通过灵活运用这些属性，你可以创造出各种...
当鼠标悬停在`<a>`标签内的元素上时，浏览器会默认显示一个虚线边框来指示链接区域。要消除这个虚线框，我们可以利用CSS（层叠样式表）来覆盖这个默认样式。 方法一：直接在`<a>`标签内使用内联样式 在每个`<a>`...
标题“去掉点击链接时出现的虚线”所涉及的知识点，就是如何通过编程技术，特别是JavaScript，来消除这种链接的虚线边框。 在HTML中，`<a>`标签用于创建超链接，当用户鼠标悬浮或点击链接时，浏览器会根据其默认...
然后，按照虚线对折，这样可以使标签更具立体感，同时为双面胶或黏着剂的粘贴提供方便。在标签背面均匀涂抹双面胶或黏贴剂，确保它们能牢固地固定在目标物体上，如文件夹、书籍、电子产品等。 小标签的应用并不止于...
这段代码遍历所有`<a>`标签，如果它们包含图片，就会移除虚线边框。 2. **使用事件监听：** 如果只想在特定情况下移除边框，可以监听用户的交互事件，如鼠标悬停(`mouseover`)或点击(`click`)。以下是一个例子： ...
这些CSS规则主要针对的是锚标签（a标签）、按钮（button元素）以及不同类型的输入元素（input元素）。需要注意的是，尽管这里提到的是Firefox浏览器，但实际上这些样式更改也同样适用于其他主流浏览器，因为它们在...
这段CSS代码会确保所有`<a>`标签在任何浏览器中都不会显示聚焦的虚线框。这种方法更加兼容且推荐，因为它不仅适用于IE，也适用于其他遵循W3C标准的浏览器。 然而，完全移除元素的聚焦指示器可能会对辅助技术的用户...
- 颜色：默认情况下，A标签的文本颜色和下划线行为由浏览器默认样式决定。我们可以使用`color`属性改变文本颜色，如`a {color: #007BFF;}`，将链接颜色设置为蓝色。 - 下划线：默认状态下，A标签有下划线。要移除...
- **Step3：剪裁和应用** - 打印出的标签通常会有虚线指示剪裁位置，沿着这些虚线剪下标签，然后将其粘贴到你想要标记的对象上，如文件夹、盒子等。 3. **设计要点**： - **尺寸适中** - 标签的大小应与被标记...
可以通过给链接标签（<a>）添加onfocus属性并设置其值为this.blur()来去掉虚线框。onfocus事件会在链接获得焦点时触发，而this.blur()是一个JavaScript方法，用于使链接失去焦点，从而去除虚线框。代码示例为： <a...
3. **边框样式**：`border-style`属性定义边框的样式，如实线（solid）、虚线（dashed）等。例如，`.t9{BORDER-RIGHT:#ff00000px double;...}`设置了右侧边框为双线样式。 ### 综合样式示例 1. **复合样式类**：...
- **去除虚线**：可以通过CSS取消链接的下划线，如`a {text-decoration: none;}`。 - **过渡动画**：可以添加CSS3的过渡效果，如`transition`，让内容切换更平滑。 - **响应式设计**：确保标签切换在不同屏幕尺寸下...