https://medium.com/user-experience-design-1/designing-for-accessibility-is-not-that-hard-c04cc4779d94

七个易于实施的指南来设计更易于访问的网络❤️

数字可访问性是指构建可供广泛人群使用的数字内容和应用程序的实践，包括有视觉、运动、听觉、言语或认知障碍的个人。
有一种说法认为使网站易于访问既困难又昂贵，但并非必须如此。从头开始设计满足可访问性要求的产品不会添加额外的功能或内容；因此不应该有额外的成本和努力。
不过，修复一个已经无法访问的网站可能需要一些努力。当我以前在 Carbon Health 工作时，我们使用AX Chrome 扩展程序检查了我们网站的可访问性。我们仅在主页上就发现了 28 项需要解决的违规问题。听起来很复杂，但我们发现这些问题并不难纠正；只需投入时间和研究来解决这些问题。我们能够在几天内实现零错误。
我想与您分享我们采取的一些简单步骤，以便您还可以使您的网站更易于访问。这些原则侧重于 Web 和移动可访问性。
但在我们开始之前，让我们先谈谈为什么这很重要。

为什么要设计可访问性？🤔

作为设计师，我们有权力和责任确保每个人都可以访问我们创造的东西，无论能力、背景或情况如何。使我们的工作易于访问的好处在于它为每个人带来了更好的体验。
美国有超过 5600 万人（接近五分之一），全世界有超过 10 亿人患有残疾。2017 年，联邦和州法院共提起了814 起网站可访问性诉讼。仅这两条数据就应该让我们相信设计可访问性的重要性。
可访问性还有一个强大的商业案例：研究表明，可访问的网站具有更好的搜索结果，它们可以覆盖更多的受众，它们对 SEO 友好，下载时间更快，它们鼓励良好的编码实践，并且它们总是具有更好的可用性。
这七项指南相对容易实施，可以帮助您的产品更接近Web 内容可访问性指南(WCAG 2.0) 的 AA 级，并使用最常用的辅助技术——包括屏幕阅读器、屏幕放大器和语音识别工具。

1.添加足够的色彩对比🖍

对于 Guadalupe，具有良好颜色对比度的按钮更易于阅读。
颜色对比是一个经常被忽视的网络可访问性问题。如果背景颜色对比度低，视力低下的人可能会发现很难从背景颜色中读取文本。在一份关于视力障碍和失明的情况说明书中，世界卫生组织 (WHO) 估计有 2.17 亿人患有中度至重度视力障碍。因此，考虑文本和背景之间的充分对比至关重要。
根据W3C的规定，文本与其背景之间的对比度至少应为 4.5 比 1（一致性级别 AA）。对于较大和较重的字体，该比率变得更加宽容，因为它们在较低对比度下更易于阅读。如果您的字体至少为 18 pt 或 14 pt 粗体，则最小对比度降至 3 比 1。
一些工具将帮助您快速检查这一点。如果您使用 Mac，我建议您获取对比度应用程序，使用此工具您可以使用颜色选择器立即检查对比度。如果您想获得更详细的分数，我建议您将颜色值输入WebAIM 颜色对比度检查器。此工具将计算不同一致性级别（A、AA、AAA）下常规和较大文本大小的分数。您可以更改颜色值并实时查看结果。
资料来源：WCAG 视觉对比

2. 不要单独使用颜色来使关键信息易于理解💈

当图表对色盲友好时，René 会很高兴！
当您在传达重要信息、显示动作或提示响应时，不要使用颜色作为唯一的视觉提示。视力低下或色盲的人将很难理解您的内容。
尝试使用颜色以外的指示符，例如文本标签或图案。在屏幕上显示错误时，不要仅依赖彩色文本，添加图标或在消息中包含标题。考虑为段落中的链接文本添加视觉提示，例如字体粗细或下划线文本样式，以使链接脱颖而出。
当您仅使用颜色来区分数据时，具有更复杂信息（如图表和图形）的元素可能特别难以阅读。使用其他视觉方面来传达形状、标签和大小等信息。您还可以尝试将图案合并到填充中，以使差异更加明显。该指南的一个很好的例子是Trello 的色盲模式。打开后，通过添加纹理，标签变得更容易访问。
一个好的技巧是用黑白打印你的图表，看看你是否还能理解其中的所有内容。您还可以使用Color Oracle之类的应用程序，它可以实时向您显示有常见色觉障碍的人所看到的内容。这些提示可帮助您确保网站中的信息与颜色无关。
资料来源：WCAG 无颜色视觉对比

3. 设计可用的焦点状态👀

使用 Tyler 的假手可以轻松导航焦点状态。
您是否注意到有时会出现在链接、输入和按钮周围的蓝色轮廓？这些轮廓称为焦点指示器。默认情况下，浏览器使用 CSS 伪类在元素被选中时在元素上显示这些轮廓。您可能会发现这些默认的焦点指示器不是很漂亮，并且很想将它们隐藏起来。但是，如果您摆脱了这种默认样式，请务必将其替换为其他样式。
焦点指示器可帮助人们了解哪个元素具有键盘焦点，并帮助他们了解他们在浏览您的网站时所处的位置。这些适用于需要屏幕阅读器的盲人、行动不便的人、遭受腕管等损伤的人以及喜欢这种导航的高级用户。哦，我们中的一些人使用键盘作为他们浏览网络的主要方式！
应该具有焦点的元素是链接、表单域、小部件、按钮和菜单项。他们需要有一个焦点指示器，使他们看起来与周围的元素不同。
您可以设计适合您网站风格并与您的品牌相匹配的焦点指标。创建一个高度可见的状态，具有良好的对比度，因此它从其他内容中脱颖而出。
资料来源：W3C 焦点可见

4. 使用带有表单字段和输入的标签或说明✏️

López 先生一直试图将占位符文本转换为标签。
使用占位符文本作为标签是设计表单时最大的错误之一。当房地产有限或想让我们的设计更简单和现代时，我们可能会倾向于顺应这种趋势——不要。占位符文本通常为灰色且对比度低，因此难以阅读。如果你像我一样，你通常会忘记你在写什么，所以一旦标签消失就很难知道这些字段是关于什么的。
使用屏幕阅读器的人通常使用 Tab 键浏览表单以跳过表单控件。为每个

5.为您的图像和其他非文本内容编写有用的替代文本🖼

罗宾在一张照片中找到了一位新朋友。
视力低下的人经常使用屏幕阅读器来“听”网络。这些工具将文本转换为语音，以便人们可以听到网站上的文字。
有两种方法可以显示替代文本。

  • 在 图像元素的属性内。
  • 在图像本身的上下文或环境中。

尝试描述图像中正在发生的事情，以及它对故事的重要性，而不是仅仅说“图片”之类的东西，上下文就是一切。
如果图像纯粹是装饰性的，或者它会因为周围的上下文已经解释了内容而造成冗余。然后添加一个空属性将使屏幕阅读器跳过它。如果您不编写任何替代文本，某些屏幕阅读器会将文件名朗读给个人。这是你能提供的最糟糕的体验。
谷歌正在开发一种图像字幕 AI，它可以以 94% 的准确率描述照片。这个模型是开源的，仍在研究中——希望我们会开始看到它在不同的产品中使用。同时，我们应该手动提供文本来描述我们内容中图像的含义和功能。
资料来源：W3C 使用 Alt 属性

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

诺亚一直想成为一名建筑师。
标题标记内容开始的位置——它们是赋予文本以定义其风格和目的的标签。标题还建立了页面内容的层次结构。
大字体的标题有助于读者更好地理解内容的顺序。同样，屏幕阅读器也使用标题标签来阅读内容。这样，视力不佳的人通过阅读层次流中的每个标题来获得页面的概览。
开发网站时使用适当的结构元素很重要。HTML 元素向浏览器传达它们包含的内容类型以及浏览器应如何呈现或处理该内容。页面的组件和结构构成了可访问性树。这棵树是盲人使用的屏幕阅读器的动力，因此他们可以“收听”页面。
不正确使用标记会影响可访问性。不要仅将 HTML 标记用于样式效果。屏幕阅读器通过标题结构（真正的标题，而不仅仅是大而粗体的文本）分层导航网页。使用您网站的人可以收听所有标题的列表，按标题类型跳转内容，或直接导航到顶级标题

。
来源：WebAIM 语义结构

7.支持键盘导航⌨️

Gael 在“听”网络的同时使用键盘导航。
键盘可访问性是 Web 可访问性的最关键方面之一。有运动障碍的人、依赖屏幕阅读器的盲人、没有精确肌肉控制的人，甚至高级用户都依赖键盘来浏览内容。
如果您像我一样，通常会使用键盘上的Tab键来浏览网页上的交互元素：链接、按钮或输入字段。我们之前讨论的焦点状态提供了当前选择的组件的视觉指示器。
当您浏览一个页面时，交互元素的顺序是必不可少的，并且导航必须是合乎逻辑和直观的。选项卡顺序应遵循页面的视觉流程：从左到右、从上到下——页眉、主导航、内容按钮和输入，最后是页脚。
一个好的做法是仅使用键盘测试您的网站。使用Tab键在链接和表单之间移动。使用Enter键选择元素进行测试。验证所有交互组件是否可预测且有序。如果您可以在没有鼠标的情况下浏览您的所有网站，那么您来对地方了！
最后但并非最不重要的。注意导航的大小——这包括链接的数量和文本的长度。对于有运动障碍的人来说，浏览长菜单可能要求很高。对于使用屏幕阅读器的人来说，收听冗长的链接可能会很麻烦——尽量简洁。提供ARIA 地标或 HTML5 结构元素，例如

或