请选择 进入手机版 | 继续访问电脑版

原型库

原型库 首页 网站设计 启发 查看内容

关于可访问性设计师必知的7件事情(下)

2015-4-25 12:25| 发布者: yuanxingbbs| 查看: 6369| 评论: 0

摘要: 本文的作者Jesse Hausler,是一个在可访问性领域深耕12年的资深从业者。目前Jesse 供职于Salesforce,作为首席可访问性设计专家,到现在已经有4个年头了。这篇文字所探讨的7个问题坦率的讲,大多都是我们平时都忽略 ...

本文的作者Jesse Hausler,是一个在可访问性领域深耕12年的资深从业者。目前Jesse 供职于Salesforce,作为首席可访问性设计专家,到现在已经有4个年头了。这篇文字所探讨的7个问题坦率的讲,大多都是我们平时都忽略的“细微末节”。但也正是这些细微末节之处,使得有行为障碍或者肢体缺陷的用户如此难于使用网页或者APP。可访问性设计是如此的重要,有的时候一点小小的改变,能给一部分用户带来翻天覆地的体验转变。

4、为键盘焦点提供更明确的视觉提醒

探讨这个问题之前,先感谢一下“样式重置”功能的存在以及它为当代网页设计师所提供的便捷。如果没有这个功能,跨设备和跨浏览器网页设计是何其艰难,完全无非像现在这样提供一致的体验。

接下来,我们该说说现在样式重置所造就的流传最广泛的可访问性设计失误之一:

:focus {outline: 0;}

这行隐藏在CSS中的代码,让视觉障碍者几乎没法仅靠键盘来访问网站。还好,随着最初的CSS样式标准的逐步演进,许多站点也随着Eric Meyer所释出的更新而更新,移除了未定型的 :focus 的伪类。

使用未定型 :focus 的出发点还是很好的:移除默认的 focus 样式,让设计师和开发者将其替换为视觉上更能引人注意,同时也符合网页风格的样式。许多用户也已经厌倦了IE里的虚线框与Chrome和Firefox浏览器里的蓝色光晕。

Chrome和Firefox 浏览器默认的focus样式

问题在于,许多网站压根不会创建属于他们自己的Focus样式,而对于习惯使用键盘的用户而言(欧美确实比较多),没有Focus 标识,浏览网络的时候几乎是处于半瘫痪状态。

随便开一个网站,然后开始快速浏览,用方向键滚动,用Tab键选定链接,你能找到多少链接?这些是全部的么?你能用Tab键浏览完整个页面么?所以,想想那些用户此刻的感受。(注意这里的用户不是“普通用户”)

如果你使用的是Mac,那么你可能需要稍微设定一下,在系统偏好设置 >> 键盘 >> 快捷键 中,选定最下方的“所有控制”,确保可以使用Tab键,控制键盘焦点。

如果你移除了默认的focus 样式,用你认为更好的样式替代原有的,那么也需要仔细考虑一下用户体验。还是以BBC为例,他们使用了一个蓝色的光标在链接下方,用以指示链接的存在。

0-BNrgAFEkXG8HxbA1

Twitter 则将两种样式结合到了一起,默认的蓝色光晕Focus样式保留了,当你使用Tab键切换的时候,图标回由灰色转为绿色,这样可以更好地吸引用户注意力,配合链接上方的弹出的对话框说明链接的功用,可以说做的相当贴心了。


0-Rzkmsk2iwQz6h4yM

当你要添加自己的focus样式的时候,请务必确认已经移除了默认的样式,否则两者会重叠到一起。

0-SYm5Ja2u1Ed5ptGL

1234下一页
2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

相关分类

返回顶部