[自译]无障碍设计并不难

原文比较长，我简化翻译重点，七条原则，针对网页无障碍设计的干货类分享。

所有人.gif

为什么要为无障碍设计

在美国有5.6亿人口有残疾，而全世界更是有超过10亿的残疾人口。2017年，有814件关于网站无障碍性的诉讼案件在美国州际和国家法庭受理。

另外，商业上也有无障碍设计的需求。研究表面，有无障碍设计的网站拥有更好的搜索结果，他们的用户更多，下载速度更快，代码更适合学习，并且通常有更好的可用性。

符合下面七条原则，能够帮助你的网站更满足WCAG2.0的标准，并且能够广泛通用于辅助性的科技产品，比如屏幕阅读器，屏幕放大器，文字识别工具等。

1 保证足够的颜色对比

W3G推荐的对比度是4.5-1，如果使用更大或者更粗的字体，那么这个比例会更松泛一点。例如你用至少18pt的文字或者14pt的粗体，最小的推荐对比度是3-1。

两个工具推荐 Contrast app; [WebAIM color contrast checker]

2 重要信息不要单单使用颜色区分

传达重要信息的时候，不要只通过颜色进行区分，用一些指示类似于标签或图标等来突出它。例如，展示错误提示的时候，不要只是把文字标红，加个图标或者加个标题什么。

有个很不错的小技巧，把你的设计用黑白打印，看看还能不能分出主次来。

3 设计聚焦状态

设计聚焦.gif

当元素被选中的时候有个状态，能够指示用户他们现在在哪个元素上，或者哪个页面，这对于用屏幕阅读器和一些手腕受伤的人等是非常有必要。

4 在输入框外设计标签或者说明

输入框设计.gif

我们经常用占位符来设计表格，这是很大的错误，因为它的对比度对于视力有障碍的人是非常不友好的，根本不能读！

使用屏幕阅读器的人经常用Tab键来从一个表格跳到另一个表格，元素会对这些用户更友好。

即使对于普通用户，也应该让人们知道他们正在写什么在一个表格里，而占位符的设计会在输入状态消失。

5 为你的图片或者任何没有文字的内容写可替代的文字

视力障碍的人会用“听”来阅读网站，所以，设计的时候有两种方式可以让他们听到图片或者其他没有文字的内容

• 代码加入标签来描述图片
• 在图片的周围写上文字

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

标题代表了内容的开始——它们定义了内容的形式和目的。标题也同样建立了整个页面的层级。

在设计页面本身和代码里区分标题。听页面的人可能会按照标题类型跳过内容，比如

7 支持键盘方向键

测试看看你的网站能不能只用键盘阅读，很多行动障碍，视觉障碍，甚至肌肉无力的人都会使用键盘来阅读你的网站。

最后，别忘了把无障碍性也放在你的设计调研或者验证中，希望你的网站能更好的满足[ AA of the Web Content Accessibility Guidelines.]

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