数字产品访问性指的是建立数字内容和应用程序的实践，这些内容和应用可以被有视觉、运动、听觉、言语或认知障碍的人所使用。
如果我们在设计产品时，从一开始就按照可访问性要求的规范来定制规则，后续在产品添加额外的功能或内容时并不会增加我们额外的成本和精力。
以前我在Carbon Health工作时，我们使用了AX Chrome扩展程序检查了网站的可访问性。我们在主页上发现了28个需要解决的违规行为。听起来感觉很多，但是我们发现这些问题并不难纠正。只需花点时间研究就能解决这些问题。我们在几天内就把错误降到零。
我想和你分享一些我们曾经采取的简单步骤，也能让你的网站更容易被访问。这些原则更侧重于Web和移动端的可访问性。
但是在开始之前，让我们来谈谈为什么这很重要。
为什么要设计可访问性？
作为设计师，我们有权力和责任确保每个人都能接触到我们创建的内容。让我们的工作变得无障碍化的伟大之处在于它给每个人带来了更好的体验。
美国有超过5600多万人（近五分之一），全世界有超过10亿残疾人。2017，联邦法院和州法院共受理了814起网站无障碍诉讼案。仅这两个数据就应该使我们相信设计可访问性的重要性。
关于可访问性也有一个很强的商业案例：研究表明，可访问的网站有更好的搜索结果，它们可以吸引更多的受众，它们对搜索引擎SEO友好，下载时间更快，它们鼓励良好的编码习惯，并且始终具有更好的可用性。
这七个指南相对容易实现，可以帮助你的产品更接近Web内容可访问性指南（WCAG 2）的AA级标准，并致力于最常用的辅助技术—包括屏幕阅读器、屏幕放大镜和语音识别工具。
1.添加足够的颜色对比度
颜色对比度是一个经常被忽视的网页可访问性问题。低视力的人会发现，如果文本对比度低，则很难从背景色读取文本。世界卫生组织（WHO）在一份关于视力损伤和失明的事实表中估计有2亿1700万人患有中度至重度视力损害。因此，考虑文本和背景之间的充分对比是至关重要的。
根据W3C的规定，文本与其背景之间的对比度应至少为4.5：1（符合级别AA标准）。对于更大和更重的字体时，这种对比度变得更容易阅读。如果你的字体是至少为18 pt或14 pt粗体，则最小对比度可下降到3：1。
一些工具可以帮助您快速检查。如果您使用的是Mac，我建议您使用Contrast App（https://usecontrast.com/），通过这个工具，你可以立即使用颜色选择器检查对比度。如果你想得到更详细的分数，我建议你在webaim颜色对比度检查器（https://webaim.org/resources/contrastchecker/）中输入你的颜色值。这个工具将计算在不同的一致性级别（A，AA，AAA）中的常规文本和较大文本大小的分数，可以更改颜色值并实时查看结果。
2.不要只使用颜色来展示关键信息
当你传达重要信息、显示操作或提示反应时，不要用颜色作为唯一的视觉线索。视力低下或色盲的人将很难理解你的内容。
尝试使用除颜色以外的指示器，如文本标签或图案。在屏幕上显示错误时，不要只依赖彩色文本，可以添加图标或在消息中包含标题。考虑向段落中的链接文本添加视觉提示（如字体粗细或下划线文本样式），以便使链接突出。
当你只使用颜色来区分数据时，具有更复杂信息的元素（如图表和图形）可能难以阅读。使用其他视觉元素来传达信息（如形状、标签和尺寸）。你还可以尝试将图案合并到填充中，让差异更加明显。Trello的色盲模式就是一个很好的例子。启用后，通过添加纹理可以更轻松地访问标签。
还有一个不错的技巧就是用黑白打印图形，看看你是否还能理解其中的所有内容。你也可以使用诸如Color Oracle之类的应用程序（[Color Oracle](http://colororacle.org/)），它能实时向你显示常见色觉障碍人士所见。这些提示可帮助您确保站点中的信息与颜色无关。
3.设计可用的焦点状态
你是否注意到在链接、输入和按钮周围出现的蓝色轮廓？这些轮廓称为焦点指示器。默认情况下，浏览器使用CSS伪类在选定元素时在元素上显示这些轮廓。你可能会发现这些默认的焦点指示器不太漂亮，并且很想隐藏它们。如果你改变了这种默认样式，请确保用其他样式替换它。
焦点指示器可帮助人们了解哪个元素具有键盘焦点，并帮助他们了解在浏览网站时所处的位置。这些设备供盲人和需要屏幕阅读器的人，行动不便的人，遭受腕管伤害的人以及喜欢此类导航的超级用户使用。我们中一部分人会使用键盘作为浏览网页的主要方式！
应成为焦点的元素是链接、表单字段、小部件、按钮和菜单项。他们需要有一个焦点指示器，使他们看起来不同于周围的元素。
你可以设计与你的网站风格相适应的焦点指标，并与你的品牌相吻合。创建一个高度可见的状态，具有良好的对比度，因此它从其他内容中脱颖而出。
你可以设计适合你网站风格并与你的品牌相吻合的焦点指示器。创建一个高度可见的状态，并具有良好的对比度，从而让它在其他内容中脱颖而出。
4.在表单和输入框中使用标签或提示说明
在设计表单时，使用占位符文本作为标签是最大的错误之一。当空间位置有限或想让我们的设计更简单、更现代时，我们可能会倾向于顺应这一趋势。占位符文本通常为灰色且对比度较低，因此很难阅读。如果你像我一样，通常会忘记自己在写什么，所以一旦标签消失了，就很难知道字段的含义。
使用屏幕阅读器的人通常使用Tab键在表单中导航，以跳过表单控件。
要一直帮助人们理解他们应该做什么，并以什么形式来填写。最好的是即使当人正在填充输入，标签也不会消失。人们不应该失去他们填写内容的语境。当设计师在他们的表单中隐藏描述或方向时，他们在追求简单性的同时牺牲了可用性。
这种做法并不意味着你必须用不必要的信息来分散你的设计，只需确保提供必要的提示即可。太多的说明文字可能是一个大问题，也可能是一个小问题。目标是确认个人是否有足够的信息来顺利完成任务。
5.为图像和非文本内容编写有用的替代文本
视力低下的人经常使用屏幕阅读器来“收听”网络。这些工具将文本转换为语音，以便人们可以在网站上听到单词。
你有两种方法可以呈现替代文本。
在图像元素的
在图像本身的上下文或环境中。
尝试描述图像中发生的事情及其对故事的重要性，而不是仅仅说“图片”之类的内容。
如果图像是纯装饰性的，或者由于周围的环境已经解释了内容，那么它会造成冗余。然后添加一个空的
谷歌正在开发一种图像字幕的人工智能，它能够以94%的准确率描述照片。这个模型是开源的，还在研究中——希望我们能看到它在不同的产品中的应用。同时，我们应该手动提供描述内容的图像的含义和功能的文本。
6.在内容上使用正确的标记
标题标记内容的开始位置，它们是给文本的标签来定义它的风格和目的。标题还建立了页面内容的层次结构。
字体大的标题有助于读者更好地理解内容的顺序。同样，屏幕阅读器也使用标题标签来读取内容。这样，低视力的人可以通过阅读层次流中的每个标题来获得页面的概述。
页面开发时，使用适当的结构元素很重要。HTML元素向浏览器传达它们包含的内容类型以及浏览器应如何呈现或处理该内容。页面的组件和结构是排列可访问性树型导航的基础。树型导航为盲人使用的屏幕阅读器提供了强大的动力，让他们可以快速“收听”页面。
未正确使用标记会影响可访问性。不要只将html标记用于样式效果。屏幕阅读器通过标题结构（真正的标题，而不仅仅是大而粗体的文本）分层浏览网页。让你网站的用户可以查找到所有标题的列表，按标题类型跳转内容。
7.支持键盘导航
键盘可访问性是Web可访问性的最关键使用方法之一。行动不便的人，依靠屏幕阅读器的盲人，没有精确的肌肉控制的人，甚至是超级用户都依赖键盘来浏览内容。
如果你和我一样，通常会使用键盘上的tab键浏览网页上的交互元素：链接、按钮或输入字段。我们之前讨论过的焦点状态提供了当前所选组件的可视指示器。
当你浏览页面时，交互元素的顺序至关重要，导航必须符合用户逻辑且是直观易懂。选项卡顺序应遵循页面的视觉流：从左到右、从上到下-页眉、主导航、内容按钮和输入、最后是页脚。
一个好的做法是只使用键盘来测试你的网站。使用Tab键在链接和表单中移动。使用Enter键选择一个元素进行测试。验证所有交互组件都是可预测的且有序正确的。如果你不用鼠标就可以浏览你的网站，那么你就来对地方了！
最后请注意导航的大小-包括链接的数量和文本的长度。长时间浏览菜单可能对行动不便的人会很困难。对于那些使用屏幕阅读器的人来说，收听冗长的链接可能会很麻烦-尽量简洁。提供ARIA标志或HTML5结构元素（如
