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

…
创建"跳至内容部分"链接
可以在文档顶部添加一个链接，以允许屏幕阅读器用户选择跳过常见的重复性内容，例如徽标和主导航。用户可以直接进入页面主要内容。每次用户进入新页面时，都可以通过为他们提供简单的导航选项，而不是执行相同的"欢迎序列"来改善他们的体验。可以使用CSS直观地隐藏此链接，但是当用户使用键盘导航到该链接时，该链接才可见。
要添加这样的链接，可参见下面的例子：
HTML:
跳到内容部分
…
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设置了内容，则它们不会阅读内容。如果使用下拉导航，则使该元素看起来不可见，但对屏幕阅读器保持可见。可以采用与"跳至主要内容"链接相同的方式进行绝对定位。如果以这种方式解决问题，键盘仍然可以到达内容，但是它仍然不可见。解决该问题的方法是允许菜单在单击时永久扩展。