正文
全文共4867词，阅读大约需要15分钟
周日的时候去看了徐峥的电影《我不是药神》，电影很走心，很现实，反正我是看哭了。现在的人，安全感缺失，有一部分原因可能就是看不起病吧。现如今，很多人还没能享受到该有的社会福利，在阳光照不到的角落里，犹如被抛弃，冷的瑟瑟发抖。
还记得前段时间看到的一个苹果宣传片，《Apple不为多数人，也不为少数人》，感动了不少人。
《Apple不为多数人，也不为少数人》
看完电影后，不自觉的想到了苹果的这个宣传片，总觉得苹果所帮助的群体，跟《我不是药神》中所展现的小众群体，很是类似，所以今天的文章也算是应景吧。这篇文章，讲的就是要为所有人设计，让设计也能够照顾到容易被忽视的小众人群。
如何做到为所有人设计？
![]()
数字产品可访问性是指构建可供广泛人群使用的数字内容和应用的实践，包括具有视觉，运动，听觉，语言或认知障碍的个人。
使网站为所有人设计，被人过度神话了，认为那样做既困难成本也高，但实际上并非如此。从设计初期就开始考虑产品可访问性，其实并不会增加额外的功能或内容，因此也不应该会有额外的成本和努力。
但是，要修复一个已经无法访问的网站可能就需要费一番精力了。 我以前在Carbon Health工作时，我们使用AXE 插件来检查了网站的可访问性。 我们发现仅在主页上就28个违规行为需要解决。 虽然听起来很复杂，但我们发现这些问题并不难以纠正，只是需要花费一些时间和成本来研究这些问题，最后差不多几天功夫我们就全部解决了。
我想分享一些我们曾用过的简单步骤，来改善你的网站可访问性。这些原则将侧重于网站和移动端。
在开始之前，先来谈谈为什么做这些优化很重要。
为什么设计需要考虑可访问性？ 🤔
作为设计师，我们有能力和责任确保每个人都能访问我们设计的内容，无论其能力，背景或使用场景如何。 做好产品可访问性可以为每个人带来更好的体验。
美国有超过5600万人（近五分之一）和全世界超过10亿残疾人。 在2017年，有814起网站可访问性诉讼在联邦和州法院提起。仅这两项数据就可以让我们相信设计可用性的重要性。
可访问性还有一个很好的商业案例：研究表明，可访问的网站有更好的搜索结果，能够覆盖更多的受众，对SEO友好，下载时间更快，同时还鼓励使用更好的代码结构，他们也总是会有更好的可用性。
以下讲到的7个方面是很容易做到，可以帮助你的产品更接近满足Web内容可访问性规范（WCAG 2.0）AA级标准。同时建议最好也去研究下最常用的辅助功能——包括屏幕阅读器，屏幕放大器和语音识别工具。
1. 增加足够的颜色对比度 🖍
![]()
对Guadalupe来说，按钮具有更好的色彩对比度将更易阅读。
颜色对比是一个经常被忽视的Web可访问性问题。 如果对比度低，弱视的人很难从背景颜色中读取文本。 在关于视力损伤和失明的情况说明书中，世界卫生组织（WHO）估计有2.17亿人患有中度至重度视力障碍。 因此，考虑文本和背景之间的充分对比是至关重要的。
根据W3C规定，文本与其背景之间的对比度应该至少为4.5比1（符合AA级别）。对于较大和较重的字体，比率相对宽泛一些，因为它们在较低对比度下也能容易阅读。 比如使用的字体为18pt或14pt粗体，则最小对比度将降至3比1。
有些工具可以帮你快速检查。 如果你使用的是Mac，建议使用对比应用（https://usecontrast.com），使用此工具可以使用颜色选择器立即检查对比度。 如果您想获得更详细的分数，我建议您在WebAIM（https://webaim.org/resources/contrastchecker）颜色对比检查器上输入颜色值。 此工具将计算常规和较大文本，得出级别（A，AA，AAA）的分数。你可以更改颜色值并实时查看结果。
参考资料: WCAG Visual Contrast
2. 不能仅使用颜色来区分关键信息💈
![]()
对René来说，当图形对色盲患者友好时，他会感到很开心!
当你在传达重要的事情、响应动作或提示时，不要把颜色作为唯一的视觉线索。弱视或色盲的人可能很难理解你的内容。
尝试使用颜色以外的符号，例如文本标签或图案。 在界面上显示错误时，不要太依赖颜色，添加图标或在消息中写上一个标题。 考虑为段落中的链接文本添加视觉提示（如字体加粗或增加下划线），以便链接能突出显示。
如果只使用颜色来区分数据，那么具有更复杂信息(如柱状图和曲线图)的元素就特别难阅读。使用其他视觉元素来传达信息，如形状、标签和大小。还可以尝试将多种模式进行组合，以使差异更明显。Trello的色盲模式（https://twitter.com/trello/status/543420024166174721?lang=en）就是一个很好的例子。启用后，通过添加纹理标签能让网站变得更容易访问。
一个很好的技巧是将你设计的内容以黑白模式打印出来，看看你是否仍然可以理解其中的所有内容。 你还可以使用Color Oracle（下载链接：http://colororacle.org）这样的应用，它可以实时显示具有常见色觉障碍的人看到的内容。 这些提示可帮助你确保站点中的信息障碍与颜色无关。
参考资料: WCAG Visual Contrast Without Color
3.设计可用焦点状态 👀
![]()
Tyler 的假手可以轻松切换按钮焦点状态
你是否注意到有时会出现在链接，输入框和按钮周围的蓝色轮廓？ 这些蓝色轮廓称为焦点指示符。 默认情况下，浏览器使用CSS伪类在元素选中时显示这些轮廓。 你可能会发现这些默认焦点指示符不是很漂亮，然后一门心思的想要隐藏掉它们。 但是，如果你去掉了这些默认样式，请务必将其替换为其他内容。
焦点指示符可帮助人们了解哪个元素具有键盘焦点，并帮助他们在浏览站点时清楚自己的位置。 这些都是对盲人，需要屏幕阅读器，行动不便，受过腕管损伤以及喜欢这种导航的高级用户有用的技术。甚至 我们中的一些人也会使用键盘作为他们浏览网页的主要方式！
应该可以聚焦的元素有：链接，表单字段，小部件，按钮和菜单项。 他们需要有一个焦点指示符，使它们看起来与周围的元素不同。
你可以设计一个符合你网站风格的焦点指示符，并与你的品牌保持风格一致。 创建一个高度可见的状态，并具有良好的对比度，使得它从其他内容中脱颖而出。
参考资料: W3C Focus Visible
4. 在表单和输入项外添加标签和说明 ✏️
![]()
Mr. López 不断尝试将占位符文本转换为列表项标签
仅使用占位符文本作为标签是设计表单时最大的错误之一。 当位置有限或想让设计更简单和现代时，我们可能会想要顺应这种趋势。 占位符文本通常是灰色的，对比度不高，因此很难阅读。 如果你像我一样，你通常会忘记你在写什么，所以一旦文本消失，很难知道这些字段是什么。
使用屏幕阅读器的人通常使用Tab键浏览表单以跳过表单控件。 依赖<label>元素读取控件， 通常会跳过任何非标签文本（如占位符文本）。
![]()
始终帮助人们了解他们应该做什么，并以一种明确的形式给出。最好是标签不会消失，即使这个人正在输入信息;人们不应该失去他们的写作背景。当设计师在他们的表单中隐藏描述时，其实是牺牲了可用性而追求简洁。
这种做法并不意味着你必须用不必要的信息来混淆你的设计，只是确保提供必要的线索。太多的指导性文本可能和太少的问题一样。目标是确认每个人有足够的信息来完成他们的任务而没有障碍。
参考资料: WebAIM Creating Accessible Forms
5.为图片和其他非文本内容准备有用的替代文本 🖼
