写给开发人员的Web无障碍标准( 二 ) _Web无障碍标准

CSS:
.skip-to-content {
position: absolute;
top: -400px;
}
弱视和色盲的Web可访问性标准由于视力障碍的类型和组合太多，因此有时根本没有一种适合所有人的一刀切的解决方案。视力低下是可访问性的罕见领域之一，在其中修复一个障碍实际上可能会让其他用户造成障碍。
实用的Web包含和可访问性视力低下或色盲的用户可能非常多样化。根据低视力用户的合作调查发现用户既以通过放大的尺寸观看屏幕，又使用屏幕阅读器进行强化。因此，屏幕与屏幕阅读器之间保持一致性的重要性。
尽管残障用户的经历各不相同，但以下Web访问标准对于视力低下或色盲的人特别有用。
使用相对大小而不是像素来显示字体大小使用像像素这样的固定测量值可能会对使用放大率的测量有害。像素大小的文本将忽略用户首选项。如果14px字体大小太小，放大后仍然太小。
而是使用类似rem或em单位。这些测量单位不会影响用户的偏好，并会带来更灵活的阅读体验。

文章插图

测试颜色对比度和文本大小高色彩对比度和文本大小可以改善所有人的体验，但是，作为不强调文本的一种方式，我们仍然在设计中使用较小的文本大小和浅灰色白色文本。通常，我们应该以高对比度为目标，并尝试提高基本字体的大小并确定可读字体的优先级。

文章插图

不要使用单独的颜色来表示状态在许多设计中，红色和绿色之类的颜色用于指示状态。如果仅是这些指标，则那些具有常见色盲类型的人可能不会察觉到这种差异或觉得具有挑战性。红绿色盲的人更容易分辨出浅绿色和深红色之间的区别。但是，用浅绿色和浅红色指示状态可能更难区分。
可以使用颜色以外的指示器。例如，图标也可以用作指示符。
行动障碍的顶级Web无障碍标准是否曾经尝试不用鼠标访问网站？这比想象的要难，尤其是在需要跨多个页面执行操作（例如注册或购买某物）时。一些行动不便的用户通常只使用键盘与计算机交互。
以下网络可访问性标准对那些患有运动障碍并使用键盘导航网页的人很有帮助。
使用焦点样式默认情况下，当使用tab按钮时，元素周围会发出蓝色光，但是许多设计人员可能会删除此样式，因为他们可能会觉得它不舒服，使用CSS样式将焦点指示器全部删除：
*: focus { outline: 0; }
可以想象，消除焦点是一个大问题。拥有清晰的焦点风格是无价的，因此请考虑创建既有品位又明显的焦点指示器。作为开发人员，重要的是要tab通过我们的应用程序并注意焦点指示符何时不明显。
也要注意模态之类的叠加层。确保关闭按钮很明显并且可以使用键盘访问。
避免出现悬停的内容在诸如下拉导航的元素中，悬停状态作为键盘上的焦点区域触发。但是这儿有一个问题：当移出顶层项目时，菜单会折叠。
此外，如果屏幕阅读器有内容visibility:hidden或display:none设置了内容，则它们不会阅读内容。如果使用下拉导航，则使该元素看起来不可见，但对屏幕阅读器保持可见。可以采用与"跳至主要内容"链接相同的方式进行绝对定位。如果以这种方式解决问题，键盘仍然可以到达内容，但是它仍然不可见。解决该问题的方法是允许菜单在单击时永久扩展。
耳聋和听力障碍的顶级Web可访问性标准乍一看，这些用户会遇到类似的访问需求——听觉信息必须以其他方式传达。实际上，还有很多事情要做，重要的是要记住，不同的聋哑用户对于如何接收此信息有不同的偏好。
使用track元素添加字幕和字幕操作在HTML中，可以很好地控制字幕。使用HTML track元素，可以将多种字幕文件添加到不同语言的视频中。字幕的常见文件格式是.vtt或Web视频文本轨道格式。
还可以使用CSS设置字幕样式。可以针对喜欢video::cue或者audio::cue选择字幕本身的风格。
编写标题时，记住操作和对话很重要。可以使用方括号指示操作。例如，[spits drink] 。
总结上面Web可访问性标准是一组很棒的标准，可以让我们的网站大大改善障碍人士的访问体验，但是还有很多东西要学习，尤其是当涉及与表单和在线支付体验等复杂的网站交互时。