在之前的译文《不得不知，关于无障碍设计的七件事》里的“为键盘用户提供视觉聚焦指示”这一段提到现代css的reset file里往往有这么一条，这能让按键、选框等界面ui元素在键盘选中时丢失高亮聚焦效果，也就是没有了浏览器默认的淡蓝色边框。目的是什么呢？可能很大一方面是为了让开发者自行提供自定义高亮样式。可悲的是对于大多数个人网站来说，似乎根本就没有人在意这点。设计师和开发者们把绝大多数的精力、时间都花在了酷炫的动效、精美的排版布局上，而键盘用户矣然被排除在一般用户之外，这不能不说是一大憾事。
请在你的css中去掉这一行
谷歌
不负众望，在这一方面谷歌很好地遵循了无障碍设计法则，但也有一些缺憾。
搜索框高亮，蓝色边框、闪烁光标
下方按键高亮，同样的蓝色边框
上方doodle高亮选中，蓝色边框
下方页脚链接，蓝色边框
可以看到，目前为止链接都以淡蓝色边框为选中样式，但是这个样式并不适用于所有元素，比如下图所示，下划线在此的可辨识度非常低，高亮样式的一致性也有所欠缺。
右上角链接，下划线
yahoo
雅虎的首页内容非常繁杂，虽然做了很好的组合处理，但很容易陷进一个区域太深，我们很容易看到它并没有采用太多的dropdown设计，这和它的内容类型不无关系。
左上角的主导航‘answer’，采用了自定义的虚线框高亮样式
左侧新闻分类导航的‘weather’，同样的虚线框
右侧quotes的输入框，浏览器默认蓝色边框高亮
samsung
三星通过简单的ctrl+tab和回车来控制dropdown menu，这同样也被应用在其它无障碍性方案较为成熟的网站里。
上方导航条高亮选中，蓝色边框
下拉框高亮，蓝色边框
Apple
无需赘述，保留了浏览器默认的高亮样式，对于这种现在颇为流行的一体导航条，边框能够明确限定有效范围。但从紧凑图片的高亮效果来看，浏览器默认的样式方案显然有提升的空间。
上方导航条高亮，蓝色边框
下方图片高亮，蓝色边框
知乎
做得很不错，由于知乎的品牌色原因，若能换种对比度更突出的颜色作为高亮样式，会更加分。
上方“设置”高亮，蓝色边框
“分享”按键高亮，蓝色边框
简书
没有完整的高亮方案，几本是沿用了悬浮的标签和输入框高亮，在文章列表页面完全丢失高亮样式，非常遗憾。
左上方标签
左下方标签
右上角输入框高亮
Smashing Magazine
让人眼前一亮，除了完整的高亮解决方案，还提供了颜色来注释，非常之醒目。
左侧分类高亮
总结：
绝大多数网站能够较好地实践无障碍设计规范，简书的表现则让人大跌眼镜。
网友评论