无障碍化设计并不难

数字化信息无障碍指构建能被广泛人群可以使用的数字化内容和应用程序的实践，目标人群也包括那些残障人士。

有很多人认为开发一个无障碍化网站十分困难，并且耗资巨大，但情况并非这样。从零设计一个满足无障碍要求的产品，不会增加额外的功能或者内容。所以不会产生额外的成本和精力。

但是，修复一个已经有障碍性问题的网站可能需要一些努力。曾经，我在Carbon Health 工作时，我们使用了 AXE Chrome 插件检测了我们网站的无障碍程度。我们发现仅仅在主页上，就有 28 个违背无障碍原则的地方需要我们去解决。情况看起来很复杂，但是我们发现这些问题并不难解决，仅仅需要花费些时间和研究。我们能够在几天时间内修复好所有的问题。

我想要和你们分享下我们之前采用的几个简单步骤，这样你也可以让你们的网站更加无障碍化。

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

颜色对比度一直都是网站信息无障碍化被忽视的问题。视力不太好的人很难在颜色对比度很低的背景下认字。世界卫生组织估计全球有近 2.17 亿人的视力轻微受损。因此确保文字和背景之间颜色有充分的对比度是很重要的。

根据 W3C 的规定，文字和其背景的对比度应该至少是 4.5 比 1（符合AA级）。随着现在字体越用越大，越用越粗，在低对比情况下也容易辨认，导致这个规定的比率要求变得更加宽松了。如果你输入的文字至少有 18pt 或者 14pt 粗体字大小，那么最小的对比度比率降至 3:1.

有软件会帮助你快速检测对比度比率。如果你使用的是 Mac电脑，我推荐使用 Contrast app, 这款软件只需要用取色器就能快速检查对比度。如果你想要得到更加详细的结果，我推荐你将色值输入到 WebAIM color contrast checker。这个工具会计算出在不同标准等级(A, AA, AAA)下的常规字号和大字号的值。你可以通过改变色值，看到实时的结果。

2. 不要仅靠颜色来让关键的信息易于理解

当你在传达一件重要的事、展示行为或者引起回应时，不要将颜色作为唯一的视觉提示。因为视力不好的人或者色盲会难以理解你的内容。

尝试使用颜色以外的提示，例如文本或者图案。当要在屏幕上显示出错提示时，不要仅仅使用带颜色的文字，还要加上图标或者一个标题。可以考虑增加一些视觉上的提示，例如文字字重的变化，或者是在段落中给链接的文本加上下划线，可以让链接更加突出。

当你只使用颜色来区分数据的时候，那些有很多复杂信息的表格和图形会变得更加难以阅读。可以使用其他的视觉形式来传达信息，比如形状、文本标签和尺寸大小。你也可以尝试将图案融入到你的信息中，让差异更加的明显。应用这个准则最好的例子是 Trello 的色盲模式。当开启这个功能后，有颜色的标签上会出现纹理，这样对于色盲来说标签的意思就会变得更加清楚。

一个好的技巧是将你的图形打印成黑白色，然后看你是否还能理解它的含义。你也可以使用像 Color Oracle 类的 App，它会向你实时展示色盲患者看到的是什么样子。

3. 设计可用的焦点状态

你曾经注意到出现在链接、输入框和按钮周围的蓝色线条吗? 这些线条叫做焦点指示符。默认情况下，当它们被选择后，浏览器通过 CSS 伪类来显示这些线条。 你可能会发现这些默认的焦点指示样式不是特别美观，并且想要隐藏它们。然而，如果你要去掉这个默认的样式话，确保用其他样式代替。

当用户在浏览你的网站时，焦点指示符帮助人们了解哪个元素被键盘选中了，了解他们在页面哪个位置。盲人会经常用到这些指示符，并且他们需要用到屏幕阅读器。那些行动有障碍的人、患有腕管综合症的人以及喜欢这种导航类型的超级用户都会使用到这些指示符。噢，甚至我们中的一些人也会用键盘作为浏览网页的主要方式。

这些应该能被聚焦的元素有链接、表单、工具、按钮和菜单栏。它们需要有个焦点指示符，来让它们和周围的元素看起来不同。

你可以设计一个适合你网站风格的焦点指示符样式，并且和你的品牌相搭。创建一个十分显眼，并且有很好对比度的一个状态， 这样它会从其他内容中脱颖而出。

4. 在表单和输入框填写时，要带上标签或提示

在设计表单时，使用占位符文字作为标签是十分错误的设计。当空间有限，或者我们想让自己的设计更加简约现代，我们会不由自主地去迎合这个潮流。但是，请不要这样做。占位符文字通常颜色很灰，并且对比度很低，所以很难去认读这个文字。如果你像我一样，在输入表格时，占位符文字标签消失后，你会经常忘记你正在输入的是什么内容。

使用屏幕阅读器的人经常使用 Tab 键浏览表单。在每个表单控件里读取 标签的内容。任何像占位符那样没有 标签的文本，通常都会被跳过，不会被读到。

标签文本帮助用户理解他们应该做什么、应该在表单里填写什么内容。提示标签最好不要消失，甚至当用户在输入文字时也不要消失。用户在输入文字的时候，不应该失去语境背景。当设计师去掉表格里的描述或者指引时，他们只是为了一个看起来简约的设计而牺牲了可用性。

这个设计准则并不是让你在你的设计里堆满不必要的信息，它只是让你提供一些基本的提示。太多的说明文字和太少的说明文字一样，都是一个问题。我们的目的是为了保证用户通过足够的信息顺利完成任务。

5. 给你的图片和非文本内容注明备选文字

视力不好的人经常要通过屏幕阅读器来 “听” 网站的内容。这种阅读工具将文字转化成语音，让用户听到网站上文字内容。

有两种方式可以放上替代文字。一个是在图片元素的属性内；另一个地方是在图片周围。

尽量描述清楚图片里的内容、图片和文章的关系，而不仅仅描述成 “图片” 之类的词。

如果这张图片纯粹是为了装饰用的，或者上下文已经解释了内容，那这图片会变成多余的。添加一个空的 属性后，屏幕阅读器会跳过这张图片。如果你不写任何替代文本，某些屏幕阅读器会给用户读文件名。这无疑会造成糟糕的用户体验。

谷歌正在开发一种图像字幕 AI，可以以 94% 的准确率描述图片。这个模型是开源的，并且正在研究阶段，希望我们在不久的将来可以看到这个技术被应用到不同的产品上。同时，我们应该手动给内容里图片的含义和功能添加描述性文字。

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

标记了内容的开始位置，它是一种给文本定义样式和目的的标签。标题同样给内容构建了层级。

大字号标题帮助读者更好的理解内容的顺序。同样，屏幕阅读器利用标题标签阅读内容。这样，视力不好的人可以在清晰的层级关系中，阅读每个标题来了解文章的大概内容。

当你在开发一个网站时，使用合适的结构元素是很重要的。HTML 元素向浏览器传达了它们包含的内容类型，以及浏览器应该如何呈现或处理该内容。页面的组件和结构有序排列，构成了一颗无障碍树。这颗树为盲人使用屏幕阅读器提供了帮助，使他们能够 “听见” 页面里的内容。

不按正确规范使用标记会影响到可用性。不要仅将 HTML 标签用于样式效果。屏幕阅读器通过标题结构层级浏览网页，使用你网站的用户可以听到所有的标题，按标题类型跳转内容，或者直接跳转到最大层级的标题

。

7. 支持键盘导航

键盘无障碍性是网站无障碍性中最重要的一部分。有运动障碍的人和盲人，依赖屏幕阅读器。不能很好控制肌肉的用户、甚至高级用户都会依靠键盘来浏览内容。

如果你像我一样，使用键盘上的 tab 键，在网页上的可交互元素之间来回切换：链接、按钮或者输入框。我们之前讨论过的焦点状态，提供了当前被选择组件的视觉指示状态。

当你在浏览网页时，那些交互元素的顺序至关重要，并且导航一定要有逻辑和直观。Tab 键顺序要符合页面的视觉流程：从左往右，从上往下。

测试你网站的一个好的方法是只使用键盘。使用 tab 键在链接和表单之间移动。使用 enter 键来测试能否选择某个元素。验证所有的可交互组件都是可预测的，并且顺序正确。如果你能不用鼠标，就能浏览所有的网页，那你的网站处在一个很好的状态。

原文链接：https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
作者：Pablo Stanley