杰晶网络

盲人站长深恶痛绝的onfocus=”this.blur()”
网页制作 2024/11/23 佚名
3 2

在谈到读屏软件操作页面时，他对我们前端的同学特别的强调：他最深恶痛绝的就是页面链接上有 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()” （图二）

那么，有更好的方式吗？从根源上看，加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属性，该链接都会失去虚线框。

标签：
盲人站长,onfocus
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网