数字可访问性是指创建数字内容和应用程序的实践，适用于广泛的人们，包括视觉，运动，听觉，语言或认知障碍的人们。
有一个错误的信念，那就是您只能通过投入大量的精力和金钱才能使站点可访问，但这不是必须的。 如果您从一开始就设计项目，并考虑到相关要求，则无需添加任何特殊功能和内容，这意味着不会有任何额外费用。
如果是纠正现有站点上的错误的问题，则必须在此处做出一些努力。 当我在Carbon Health工作时，我们曾经使用
Chrome中的
特殊扩展程序测试了网站的可访问性。 在主页上已经发现了28个需要消除的违规行为。 乍一看，这似乎是一个非常费力的过程，但是很快就变得很明显，进行更改并不那么困难-您只需要花费时间并了解基本知识即可。 我们仅在短短几天内就将违规次数减少到零。
我想分享一些我们已经采取的简单步骤，这些步骤可能会对您有所帮助。 这些原则主要是为移动和Web应用程序设计的。 但是在开始之前，让我们先找出为什么这样做是必要的。
为什么要争取无障碍环境？
作为设计师，我们有能力并有义务尽我们所能，从而使我们创造的所有产品都能供所有人使用，无论其功能，环境或情况如何。 好东西是对可访问性的渴望-它最终为每个人提供了更积极的体验。
在美国，残疾人的数量达到5600万（即略少于总人口的五分之一），在全世界范围内大约有10亿。 2017年，
针对网站可访问性的
诉讼有
814起 。 这两个事实已经令人信服地向我们表明了这一问题的重要性。
此外，
从业务角度来看 ，可访问性证明是有益
的 ：研究表明，可访问性站点在搜索结果中占据较高的位置，具有良好的SEO指标，加载速度更快，刺激了编写更好代码的实践，并始终以出色的可用性而著称。
这七个规则相对容易遵循，将使您能够通过
Web Content Accessibility Guidelines （WCAG 2.0）系统将产品提升到AA级，从而使其与基本辅助设备兼容，包括屏幕阅读器，屏幕放大器和语音识别工具。
1.使色彩足够鲜明
颜色对比度是经常被遗忘的网站可访问性问题之一。 视障人士如果与背景的对比不够好，可能会难以阅读。 根据世界卫生组织（WHO）
在其关于视力障碍和失明的文档中的估计，文本的亮度与背景的比率应至少为4.5：1（以匹配AA级别）。 对于较大的粗体字体，允许使用余量-即使对比度低，也更容易区分。 如果您的文字大小为14-18pt或更大，则阈值将减小为3：1。
有一些工具可以帮助您快速检查对比度。 那些在Mac上工作的人，建议您使用
Contrast应用程序-它使您可以使用移液器即时计算比率。 如果你想有一个更详细的评估，我建议保持进入的所需值
工具检查WebAIM的对比度。 它将计算不同字体大小的比率，并建立与
不同级别 （A，AA，AAA）的对应关系。 通过更改值，您可以实时获得结果。
资料来源：
WCAG视觉对比2.不要仅仅依靠颜色来传达关键信息
当您试图告诉用户一些重要的信息时，例如要显示动作示例或引起反应，请不要使颜色成为唯一的视觉标记。 有视力或色盲的人很难理解您的内容。
尝试用其他指示符来补充颜色-例如，签名或纹理。 当在屏幕上显示错误消息时，不要只用彩色突出显示文本-在窗口中添加图标或标题。 还可以考虑使用粗体或带下划线的字体，以使文本中的链接立即醒目。
当数据类型仅由颜色分开时，具有更复杂信息结构的元素（例如图形）尤其难以阅读。 使用其他视觉方面传达信息-形状，大小和说明性文字。 您可以将图案添加到填充中，以使差异更加明显。
Trello色盲版是应用此规则的一个很好的例子。 如果切换到此模式，则通过添加纹理，快捷键将变得可以普遍理解。
有一个好方法：在黑白打印机上打印图形，然后看一切是否清晰。 您还可以利用一些特殊的应用，如
颜色甲骨文 ，这显示在实时内容如何将寻找人的色彩感觉最常见的疾病。 所有这些都将帮助您确保您网站上的信息与颜色的联系不是太紧密。
资料来源：
无颜色的WCAG视觉对比3.突出显示活动元素
是否注意到有时在链接，字段和按钮周围出现蓝框？ 这样的框架称为聚焦指示器。 浏览器默认情况下使用CSS伪类在单击元素时将其显示在元素上。 在您看来，它似乎不太漂亮，您希望将其删除。 但是，如果您决定放弃默认样式，请确保提供某种替换。
焦点指示器可帮助人们了解您可以与键盘进行交互的元素以及它们在页面结构中的位置。 它们对于使用屏幕阅读器的盲人，肢体残疾或腕管综合症患者以及喜欢此类导航的高级用户非常有用。 好吧，加上，原则上，我们许多人更喜欢使用键盘进行互联网冲浪！
在视觉上应强调活动状态的元素包括：链接，表单字段，小部件，按钮和菜单项。 所有这些都需要将其与周围元素区分开的指标。
您可以设计指标，使它们看起来像您的网站样式，并与品牌形象结合在一起。 使活动状态标记易于查看，并具有高对比度，以便在其他内容中清晰可见。
资料来源：
W3C Focus Visible4.在输入字段中添加标题和说明
创建表单时最严重的错误之一是将说明性签名留在字段本身中，以使它们在输入数据时消失。 如果屏幕上的空间很小，或者您想为设计提供简约的现代外观，那么诱惑很大-但不要这样做。 表单字段中的文本通常为灰色，对比度不足，难以阅读。 而且，像我这样的人会半途忘了他们根本不会打字，因此消失的签名使我们失去了解决它的所有机会。
使用屏幕阅读器的人通常使用Tab键移动形状，从一个控制器移动到另一个控制器。 标签元素将针对每个元素进行计数。 通常会跳过不适用于它们的其余文本（字段中的解释标签相同）。
始终确保人们了解如何处理表单以及在表单中写些什么。 最好即使在输入过程中仍能看到签名-填写字段时，人在眼前应该有上下文。 通过隐藏表单的签名和说明，设计师在追求简单性的同时
牺牲了可用性 。
这并不意味着您需要在屏幕上堆满无用的信息-只需确保提供最关键的提示即可。 过多的数据所带来的问题总比缺少它们少。 您的目标是提供一定数量的信息，使用户可以毫不费力地执行操作。
来源：
WebAIM创建可访问表单5.为图像和其他非文字元素写出翔实的替代性描述
视障人士经常使用屏幕阅读器“收听”互联网。 他们将文本转换为语音，从而可以收听网站上编写的所有内容。
可以用两种方式表示替代描述：
- 在图片元素的alt属性中
- 在即时上下文中或在图像的随附文本中
尝试描述图像上发生的事情以及它与一般含义之间的关系，而不仅要像“图片”这样的注释下车。 上下文至关重要。
如果仅出于美观目的添加图像，或者在文本中复制了所表示的图像，则可以添加属性并将其保留为空白-在这种情况下，屏幕阅读器将跳过该属性。 如果根本没有写替代文本，则某些屏幕阅读器将读取文件名。 您无法想象会给用户带来更糟糕的体验。
Google目前正在研究一种
基于人工智能的解决方案 ，该
解决方案可以产生94％的图像字幕。 该代码处于公共领域，并且仍在定稿过程中。 我希望很快我们将看到该解决方案将如何应用于各种产品。 在此之前，您应该在其余内容的上下文中手动注册图片的含义和目的。
来源：
W3C的解决方案：使用Alt属性6.正确使用标记
标题标记了内容块的开始-这些是确定文本样式和目的的某种标记。 另外，标题定义页面上内容的层次结构。
标题中的大字体使用户可以更好地理解信息的结构。 屏幕阅读器在读取内容时也依赖标题。 因此，视力低下的人可以通过听听标题顺序来了解页面的总体外观。
开发网站时，您必须使用正确的结构元素HTML元素将有关它们携带的内容类型以及要执行的操作的信息传输到浏览器。 页面的组件和结构构成了浏览器可访问性树，通过屏幕阅读器可用于视障者。
错误的标记会严重影响可访问性。 不要将HTML标记的使用限于样式效果。 屏幕阅读器由基于标题（真实标题）的层次结构的页面引导，而不仅限于变大和变胖的文本。 在他们的帮助下，用户可以收听完整的标题列表，在标题类型的指导下跳过内容块，或导航到第一级标题（h1）。
来源：
WebAIM语义结构7.支持按键控制
使用键盘执行操作的能力是网页设计中辅助功能的主要组成部分之一。 运动和肌肉协调性受损的人们，盲人，使用屏幕阅读器的人，甚至是一些高级用户，在浏览网站时都依赖键盘。
也许您和我一样，使用Tab键导航到所需的交互式页面元素：链接，按钮，输入字段。 上面我们讨论了活动状态的指示器，它使您可以直观地强调当前选中的元素。
在页面上移动时，用户与元素进行交互的顺序非常重要，因此导航应合乎逻辑且直观。 过渡顺序应与注视移动的方向相对应：从左到右，从上到下，首先是主导航，然后是隐藏内容的按钮，表单以及最后的页脚。
最好仅使用键盘来测试网站。 使用Tab键可从链接到链接以及从一个字段到另一个字段。 通过按Enter检查是否方便选择元素。 确保以正确的顺序对齐所有组件，并且其外观是可预测的。 如果您可以不用触摸鼠标就可以浏览所有页面，则说明一切都很好！
还有一件事。 请注意导航系统中的音量-这是指链接数和文本大小。 遍历长列表中的所有项目可能会使运动能力有限的人感到疲倦，并且使用屏幕阅读器的人会很快厌倦了听长链接文本。 尽量简明扼要。 添加
ARIA标记或HTML 5结构元素（例如main或nav）也将使浏览页面更加容易。
资料来源：
W3C键盘还有什么可以做的
这些规则是一个很好的起点，但是如果您想做其他事情来增加可访问性，我建议：
- 进行可用性审核。 使用特殊服务来查找您的产品是否与辅助设备冲突，以及它是否符合AA级要求。 根据结果进行必要的更改，然后重复测试。
- 任命一名审核员。 您可以指示一名员工定期进行此类审核，例如，对测试团队的人员进行审核。 如果没有必要的经验的人，您可以联系第三方专家。
- 收集信息时请考虑可访问性因素。 在进行研究时，请检查您对可访问性的假设是否得到确认，并寻找机会改进某些内容。 让残疾人参与进来要困难一些。 随时联系协会和社区 -通常乐于提供帮助。
结论
好，仅此而已。 这些都是七个规则，这将有助于您带来现场约相当于AA级
根据辅助功能准则内容的Web 。
我仍然继续努力使设计更易于访问，并且尝试遵守我向他人宣扬的原则。 以前，在我看来，这太复杂了，仍然没有关系。 但是我错了。 我建议您使用这些规则开始该过程，并继续讨论为什么可访问性很重要。
推广可访问性做法是设计者的责任。 在他们的帮助下，我们为所有人打开了通往技术之路，无论他们的能力，生活水平，年龄，教育程度和居住地点如何。 设计时要承担责任。 谢谢你
参考文献
WebAIM-有关Web设计中可访问性的文章，资源和
案例研究“
设计师需要了解有关可访问性的7件事 ”是Salesforce的一篇很棒的文章，内容准确
加州大学洛杉矶分校残疾人与计算计划 -该网站当然不是最美丽，最现代的网站，但它的资源非常丰富
UX神话 -包含反驳的UX设计中的大量误解； 其中一些涉及可访问性问题
该辅助工作流程的颜色 -在这里
杰瑞哈莉科迪演示了如何去点与色彩的选择
W3C-网页设计中可访问性的圣经，您甚至会对大量的材料感到困惑。 但是，当您了解其结构时，会发现很好的示例，技巧和资源。
有用的工具
WebAIM颜色对比度检查器 -一种用于检查对比度的智能工具，可在输入后立即针对不同的文本大小生成结果
包含组件 -设计为博客的纹理库。 特别注意可负担设计的问题。 每篇文章都分析了一些常见的接口组件，并提供了更可靠，更实惠的设计版本。
Color Oracle是一款适用于Windows，Mac和Linux的免费色盲模拟器。 它实时显示患有广泛色觉障碍的人的视线。
Vox产品辅助功能指南 -设计人员，开发人员和项目经理的要求的完整列表
谷歌Chrome扩展AX -检查违反无障碍的原则，任何网站对Google Chrome浏览检查员的帮助
Contrast是Mac应用程序，可立即访问WGAG亮度比率。