快速提高产品的可访问性的七个原则

昨天是周日，陪着弟弟去看了徐峥的电影《我不是药神》，电影拍的很实际、很走心、很现实，强忍着泪水还没哭出来。在济南网站建设公司工作的我认为，从电影中看出来的是人们在面临生活压力下安全感缺失，在阳光照射不到的角落如同被抛弃，甚至是冷的瑟瑟发抖，那么《我不是药神》产品中就表达了这部电影的可观看性。

早前看过一个苹果的宣传片《Apple不为多数人，也不为少数人》，这部宣传片和《我不是药神》的群体很类似，容易被人忽视的小众群体就是我们今天的主要对象。

数字产品的可访问性是构建可供广泛人群使用的数字内容和应用的实践，包括具有视觉，运动，听觉，语言或认知障碍的个人。

使网站为所有人设计，被人过度神话了，认为那样做既困难成本也高，但实际上并非如此。从设计初期就开始考虑产品可访问性，事实上，并不会增加额外的功能或内容，所以也不应该会有额外的成本和努力。

但是，要修复一个已经无法访问的网站可能就需要费一番精力了。 我以前在 Carbon Health 工作时，我们使用 AXE 插件来检查了网站的可访问性。 我们发现仅在主页上就28个违规行为需要解决。 虽说听起来很复杂，但我们发现这些问题并不难以纠正，只是需要花费一些时间和成本来分析这些问题，最后差不多几天功夫我们就全部解决了。

我想分享一些我们曾用过的简单步骤，来改善你的网站可访问性。这些原则将侧重于网站和移动端。

在开始之前，先来谈谈为什么做这些优化很重要。

一、为什么设计需要考虑可访问性？

作为设计师，我们有能力和责任确保每个人都能访问我们设计的内容，无论其能力，背景或使用场景如何。 做好产品可访问性可以为每个人带来更好的体验。

美国有超过5600万人（近五分之一）和全世界超过10亿残疾人。 在2017年，有814起网站可访问性诉讼在联邦和州法院提起。仅这两项数据就可以让我们相信设计可用性的重要性。

可访问性还有一个很好的商业案例：分析表明，可访问的网站有更好的搜索结果，能够覆盖更多的受众，对 SEO 友好，下载时间更快，并且还鼓励使用更好的代码结构，他们也总是会有更好的可用性。

以下讲到的7个方面是很容易做到，可以帮助你的产品更接近满足 Web 内容可访问性规范（WCAG 2.0）AA级标准。同时建议最好也去分析下最常用的辅助功能——包括屏幕阅读器，屏幕放大器和语音识别工具。

1. 增加足够的颜色对比度

颜色对比是一个经常被忽视的 Web 可访问性问题。 如果对比度低，弱视的人很难从背景颜色中读取文本。 在关于视力损伤和失明的情况说明书中，世界卫生组织（WHO）估计有2.17亿人患有中度至重度视力障碍。 所以，考虑文本和背景之间的充分对比是至关重要的。

根据 W3C 规定，文本与其背景之间的对比度应该至少为4.5比1（符合AA级别）。对于较大和较重的字体，比率相对宽泛一些，原因是它们在较低对比度下也能容易阅读。 比如使用的字体为18pt或14pt粗体，则最小对比度将降至3比1。

有些工具可以帮你快速检查。 如果你使用的是 Mac，建议使用对比应用（https://usecontrast.com），使用此工具可以使用颜色选择器立即检查对比度。 如果您想获得更详细的分数，我建议您在 WebAIM 颜色对比检查器上输入颜色值。 此工具将计算常规和较大文本，得出级别（A，AA，AAA）的分数。你可以更改颜色值并实时查看结果。

2. 不能仅使用颜色来区分关键信息

当你在传达重要的事情、响应动作或提示时，不要把颜色作为唯一的视觉线索。弱视或色盲的人可能很难理解你的内容。

尝试使用颜色以外的符号，例如文本标签或图案。 在界面上显示错误时，不要太依赖颜色，添加图标或在消息中写上一个标题。 考虑为段落中的链接文本添加视觉提示（如字体加粗或增加下划线），以便链接能突出显示。

如果只使用颜色来区分数据，那么具有更复杂信息（如柱状图和曲线图）的元素就特别难阅读。使用其他视觉元素来传达信息，如形状、标签和大小。还可以尝试将多种模式进行组合，以使差异更明显。Trello 的色盲模式就是一个很好的例子。启用后，通过添加纹理标签能让网站变得更容易访问。

一个很好的技巧是将你设计的内容以黑白模式打印出来，看看你是否仍然可以理解其中的所有内容。 你还可以使用 Color Oracle 这样的应用，它可以实时显示具有常见色觉障碍的人看到的内容。 这些提示可帮助你确保站点中的信息障碍与颜色无关。

3. 设计可用焦点状态

你是否注意到有时会出现在链接，输入框和按钮周围的蓝色轮廓？ 这些蓝色轮廓称为焦点指示符。 默认情况下，浏览器使用 CSS 伪类在元素选中时显示这些轮廓。 你可能会发现这些默认焦点指示符不是很漂亮，然后一门心思的想要隐藏掉它们。 但是，如果你去掉了这些默认样式，请务必将其替换为其他内容。

焦点指示符可帮助人们了解哪个元素具有键盘焦点，并帮助他们在浏览站点时清楚自己的位置。 这些都是对盲人，需要屏幕阅读器，行动不便，受过腕管损伤以及喜欢这种导航的高级用户有用的技术。甚至我们中的一些人也会使用键盘作为他们浏览网页的主要方式。

应该可以聚焦的元素有：链接，表单字段，小部件，按钮和菜单项。 他们需要有一个焦点指示符，使它们看起来与周围的元素不同。

你可以设计一个符合你网站风格的焦点指示符，并与你的品牌保持风格一致。 创建一个高度可见的状态，并具有良好的对比度，使得它从其他内容中脱颖而出。

4. 在表单和输入项外添加标签和说明

仅使用占位符文本作为标签是设计表单时最大的错误之一。 当位置有限或想让设计更简单和现代时，我们可能会想要顺应这种趋势。 占位符文本通常是灰色的，对比度不高，所以很难阅读。 如果你像我一样，你通常会忘记你在写什么，所以一旦文本消失，很难知道这些字段是什么。

使用屏幕阅读器的人通常使用 Tab 键浏览表单以跳过表单控件。 依赖元素读取控件， 通常会跳过任何非标签文本（如占位符文本）。

始终帮助人们了解他们应该做什么，并以一种明确的形式给出。最好是标签不会消失，即使这个人正在输入信息；人们不应该失去他们的写作背景。当设计师在他们的表单中隐藏描述时，事实上，是牺牲了可用性而追求简洁。

这种做法并不意味着你必须用不必要的信息来混淆你的设计，只是确保提供必要的线索。太多的指导性文本可能和太少的问题一样。目标是确认每个人有足够的信息来完成他们的任务而没有障碍。

5. 为图片和其他非文本内容准备有用的替代文本

弱视的人经常利用屏幕阅读器来「听」网页。这些工具会将文本转换成语音，这样人们就可以在网站上听到单词。

有两种方法可以显示替代文本：在图片的属性中；在图片本身的背景或环境中。

尝试描述图片中发生的事情，以及它对故事的重要性，而不再仅限于是说「图片」。

如果图片纯粹是装饰性的，或者由于上下文已经解释了内容而变得多余。 尝试添加一个空的属性将使屏幕阅读器跳过它。 如果不写任何替代文字，一些屏幕阅读器将读取文件名，这样的用户体验会很糟糕。

谷歌正在分析一种图像字幕人工智能，它能以94%的准确度描述照片（https://petapixel.com/2016/09/23/谷歌s-image-captioning-ai-can-describe-photos-94-accuracy）。 这个模型是开源的，仍在分析中，希望我们能看到它在不同的产品中使用。 与此同时，我们应该在我们的内容中手动添加描述图像含义和功能的文本。

6. 在内容上使用正确的标记

标题，标记内容开始的地方。它们是给文本加上的标签，用来定义其风格和目的。标题还创建了页面内容的层次结构。

大字号的标题有助于读者更好地理解内容的顺序。 同样，屏幕阅读器也使用标题标签来阅读内容。 这样，弱视的人通过阅读内容中的每个标题来获得页面的大致内容。

在开发站点时使用适当的结构元素很重要。 HTML 元素向浏览器传达它们包含的内容类型，浏览器应如何呈现或处理这些内容。 页面的组件和结构形成内容树。 读取内容树是屏幕阅读器的强大功能，它们被盲人使用，使得他们可以「听」页面内容。

不正确使用标记会阻碍可访问性。不要仅将 HTML 标记用于样式效果，屏幕阅读器通过标题结构（真正的标题，而不再仅限于是大字号和粗体样式的文本）按层次结构浏览网页。 使用你网站的用户可以收听所有标题的列表，按标题类型跳转内容，或马上导航到顶级标题。

7. 支持键盘导航

键盘可访问性是 Web 可访问性的最关键方面之一。 有运动障碍的人，依赖于屏幕阅读器的盲人，没有精确肌肉控制的人，甚至高级用户都依赖键盘来导航内容。

如果你像我一样，经常使用键盘上的 Tab 键来浏览网页上的交互元素：链接，按钮或输入项。 我们前面讨论的焦点状态提供了当前选择的组件的可视化指示器。

当你浏览页面时，交互元素的顺序很重要，导航必须有逻辑且直观。 选项卡顺序应遵循页面的阅读顺序：从左到右，从上到下—— 标题，主导航，内容按钮和输入项，最后是页脚。

一个好的做法是仅使用键盘测试你的网站。 使用 Tab 键选择链接和表单。 使用 Enter 键测试以选择元素。 验证所有交互式组件是否可控且有序。 如果你可以在没有鼠标的情况下浏览所有网站，那么你的网站就做的很棒了！

最后一点，但并非不重要。请注意导航的大小——包括链接的数量和文本的长度。 对于有运动障碍的人来说，通过长菜单进行切换可能会很困难。 对于使用屏幕阅读器的人来说，听冗长的链接可能很麻烦——尽量保持简洁。 提供 ARIA Landmarks 或 HTML5结构元素将使导航更容易。