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