101 个数字无障碍 (a11y) 技巧和窍门

嘿，朋友们，是的，我写了一篇清单文章。别担心，我没问题。我可以分享101个无障碍技巧和窍门吗？所以，如果你有时间（或者一个小时！好吧……68分钟！），请阅读一下。希望你觉得它有趣！

注意：这本书的设计初衷并非让你坐下来读，每天挑一个点（或一个章节）来读，然后慢慢加深理解。建议你每隔几天再读一遍，直到读完为止。然后把它收藏起来，作为参考！

哦，如果您不知道的话，无障碍意味着让您的产品、服务等可供残疾人使用。

因此，无论您对无障碍功能是完全陌生，还是略知一二，或者已经很了解...我希望这份清单中的内容对每个人都有启发，并且我真诚地希望您能喜欢它！

极客统计数据：

107,000+ 个字符（不包括小提琴）
16,750+ 个单词 - 或大约一本书的 55 页！
38个代码块
4个jsFiddles
19 张图片
115个链接
撰写和编辑时间超过 20 小时
一个疲惫的男孩

开发者提示（和一般提示）

让我们先来了解一些解决可访问性问题的一般开发人员技巧。

1. 思考人物角色会有所帮助

对于无障碍设计来说，最大的难题往往在于记住在开发过程中需要考虑哪些因素以及哪些人。需要记住的事情太多了（超过 100 种不同的障碍）！

图片来源：https://accessibility.blog.gov.uk

角色是记住人们可能具有的所有不同类型的缺陷以及如何避免在代码中为这些人制造障碍（或消除障碍）的好方法。

GOV.UK 写了一篇关于用户画像的很棒的文章，我强烈推荐大家读一读。它真的能帮你清晰地理解为什么你需要做某件事，以及你正在帮助谁！

2. 一些很棒的资源

这绝不是一个详尽的清单，只是足够大以包含有用的信息，足够小以致于不会让人不知所措！

Web 可访问性简介 - Web Aim - 非常适合理解我们的工作为何以及会影响谁！
Dennis Boudreau 的博客- 有点旧了，但几乎所有内容仍然适用，而且他们呈现信息的方式很容易理解。
a11y 项目- 如果他们只是将名称改为“无障碍项目”并停止使用数字缩写（因为数字缩写不太容易理解）那就完美了！

哦，显然我需要向您介绍关键的参考点：-

Web 内容可访问性指南 (WCAG) - 难以阅读，但它们是几乎每个国家都遵循的标准。
创作工具可访问性指南 (ATAG) - 如果您构建了内容管理系统 (CMS) 或所见即所得 (WYSIWYG) 编辑器，那么这些就是您应该遵循的指南。
Web 无障碍倡议 - 无障碍富互联网应用程序（WAI-ARIA 或简称“ARIA”） - 我们可以使用这些特殊属性为 HTML 代码添加额外含义。对于使用辅助技术 (AT)（例如屏幕阅读器）的用户来说尤其重要。

3. 坚固

WCAG 背后有 4 个原则，使用首字母缩略词 POUR（简化解释）：-

1. 可感知- 您可以通过一种感官获取信息，辅助技术 (AT) 可以在需要时理解并将信息传递给您。
2. 可操作——所有交互都可以通过任何适合您的输入方法进行。
3. 易于理解- 界面应该易于理解...可预测的行为，识别输入中的错误，简化语言等。
4. 健壮性——开发一个浏览器是不行的。你的应用程序应该能够优雅地运行或失败，而不会破坏可访问性。

在本文中，虽然我不会直接引用它们，但 POUR 原则将适用。

人们常常会忘记“R”（Robust），所以我想我应该特别注意它！

在开发时你应该思考。

当 JavaScript (JS) 失败时会发生什么（请注意，我说的是当，而不是如果。网络故障、JS 错误等都意味着你的代码永远不会 100% 可靠）
此层叠样式表 (CSS) 属性是否得到良好支持，如果没有，它是否会优雅地降级（缺乏对该属性的支持是否会破坏网站并使其无法使用）
当服务器端出现错误时，我是否向使用我的产品的人提供良好的反馈？

我强烈建议你收藏canwe.dev。它链接到一些有用的资源，可以检查你的代码，并且标记易于访问，并且兼容各种浏览器。

4. 学习使用屏幕阅读器

NVDA对 Windows 是免费的，VoiceOver 包含在 Apple 设备上，ORCA 几乎包含在所有 Linux 发行版中！

您只需花费 30 分钟的时间即可学习如何使用屏幕阅读器的基本功能。

一旦您学会了如何使用屏幕阅读器，您就会立即发现您的代码和标记有多糟糕。

97.4% 的网站主页都存在可自动检测的可访问性错误，您不认为自己属于前 2% 吗？

学习使用屏幕阅读器并测试您的网站和使用它构建的组件。

5. 准备一份清单

开发新组件？启动新项目？改造现有网站？

准备一份清单。

你不可能记住所有需要考虑的事情。

这里有一个可帮助您入门的可访问性清单，或者，当您习惯了可访问性原则后，您可以使用这个详细的 WCAG 清单！

6. 当心那些声称可以为您修复可访问性的内容覆盖！

这里有图书馆或服务机构，可以满足一切需求！

但可访问性是一个尚未完全赶上这个想法的领域！

许多公司，例如 AccessiBe、EqualWeb、UserWay 等，都声称能够使用人工智能 (AI) - 或者更准确地说是机器学习 (ML) - 仅用一行代码即可解决您网站的可访问性问题。

它们不起作用，事实上很多时候它们会使事情变得更糟！

不相信我？

如果您的浏览器中安装了辅助功能检查器（例如Chrome 的 Axe），请转到sprouts.com并运行测试。

然后向下滚动到页面底部，单击页脚左下方的“辅助功能”，并在弹出窗口中打开“盲人用户”模式。

Sprout 网站主页上的错误从 38 个增加到了 86 个！而这些错误都是我们可以自动发现的！

值得注意的是，我建议使用 neilpatel.com 进行检查，因为该网站直到最近才使用辅助功能覆盖。

不过，他似乎终于听取了大家的抱怨，因为据我所知，现在这个网站只支持改变颜色对比度！Neil，如果你看到这篇文章，就把文字背后的颜色改掉，在其他地方用你的品牌颜色吧。深灰色和橙色很搭，对比度也很好！

如果您仍然不相信我关于可访问性覆盖的说法，请阅读Adrian Roselli 在 AccessiBe 上发表的这篇博客文章。

或者观看以下来自哈本·吉尔玛 (Haben Girma)的视频，他是第一位从哈佛法学院毕业的聋盲人，也是一名残疾人权利活动家！

或者为什么不读一下@clearlythuydoan在 DEV 上发表的这篇批判性但又平衡的文章呢！

关于 AccessiBe 辩论你需要知道的一切

Thuy Doan ・ 21年7月25日

#a11y #webdev #frontend #discuss

我可以继续说下去，但我想你明白我的意思了！目前没有捷径。

7. 法律事务

在大多数国家，建立不符合残疾人/平等权利法要求的网站都是违法的。

如果你想查看不同国家/地区所有适用法律的列表（以及我对为什么无障碍问题仍未得到解决的看法），我建议你查看我最近关于理解无障碍问题为何被忽视的帖子的这一部分

哦，如果你在美国运营——无障碍诉讼将在 2021 年达到历史新高！在你敲下另一个键之前，先思考一下！

8. 无障碍设施的成本非常低。

你是产品经理/利益相关者/负责做决策吗？还是你像我一样是个喋喋不休、喋喋不休的人？

今天就把可访问性作为首要任务，并让整个团队参与进来。

设计一款从一开始就易于访问的产品几乎不需要花费太多的时间和精力。

尝试使现有产品易于访问非常耗时、昂贵，如果一开始就做错了，甚至可能需要完全重写应用程序的某些部分！

省去很多麻烦，从可访问性开始，而不是将其作为“以后再做”的事情，因为它将为您的公司节省一大笔钱并避免很多麻烦！

文档结构

无障碍访问的关键要素之一是网页的结构。它还有助于搜索引擎优化 (SEO) 和布局的组织。所以，别再用“<div>汤”了，学习如何正确使用 HTML！

9.标题非常重要

使用屏幕阅读器的人（比如您自己，您确实学习了如何使用屏幕阅读器，正如第 4 点所述，不是吗？😋）主要使用 1-6 键在页面上循环浏览标题（<h1>到）。<h6>

标题还使文档更容易被其他人理解，因为它提供了页面结构和层次结构。

因此不要使用<p class="h1">，在有意义的时候使用适当的标题元素。

另一方面，如果标题在设计中大小不合适，可以使用 CSS 进行修改。不要因为“看起来更好”就使用不同的标题。

这让我很顺利地想到了……

10. 不要跳过标题级别

还记得我告诉过你，使用屏幕阅读器的人倾向于使用 1-6 键导航来了解页面结构和内容吗？

好吧，如果你跳过标题级别，这可能会非常令人困惑，因为他们期望一个标题级别，发现它不存在，并且可能认为没有进一步的相关内容。

这是一个简单的 Chrome 插件，用于查找跳过的标题级别。

在发布之前，在您的文章、网站和产品上运行它，并尝试将标题级别纳入逻辑层次结构。

11. 有 7 个标题级别！

如果您有一个非常复杂的文档，您可能会发现需要第 7 级标题。

虽然这些在原生 HTML 中不存在，但它们确实作为 WAI-ARIA 属性存在。

这对于使用辅助技术 (AT) 的人来说很有用，因为它提供了有关复杂页面上的结构和关系的更多信息。

您可能不需要经常使用它，但在偶尔需要的时候将它放在您的后口袋里会很方便！

<h6>A deeply nested section</h6>
  <p>Some Text in heading level 6</p>
  <div role="heading" aria-level="7">
    This is effectively a <h7> even though they don't exist!
  </div>
    <p>[...content...]</p>

您甚至可以使用 CSS 选择器自动设置样式，而无需额外的类等，确保您不会忘记添加类等！

[aria-level="7"]{
  font-weight: bold;
  font-size: 1rem;
}

12.`<h1>`每页一个

我现在就结束这场争论。<h1>一个页面上包含多个内容或许是有效的 HTML……但这可不是什么好做法。

您<h1>应该描述当前页面位置以方便导航，以便人们知道他们在网站上的位置。

每个页面都应该有<h1>且只有一个<h1>。这是页面构建的预期方式，预期行为是可访问性的关键要素。

出于预期的行为和预期的设计模式，你往往会在移动设备上看到页面顶部的菜单按钮。尽管这在可用性方面是个噩梦，但这正是预期的位置！

不过不用担心，尽管本文中的大部分观点都是“你必须”的，但如果你决定使用多个<h1>s，你仍然可以符合 WCAG（和法律）的要求，只是对于使用屏幕阅读器的人来说会很烦人！

13. 地标也很重要

要想全面解释地标，需要写一整篇文章。

但您应该了解并使用以下元素来组织您的内容：-

对于使用 AT 的人来说，这一点很重要，因为他们在浏览页面时也可能会按部分循环（而不仅仅是标题）。

这对于 SEO 来说非常有用，因为搜索引擎可以更好地理解页面上的关系。

作为开发人员，它对您来说也更好，因为它可以更轻松地维护页面层次结构并将页面拆分为可管理的部分。

14.标题和章节

如果您正确地构建了文档（请参阅上一点中的提示），那么您最终可能会使用<section>元素来分隔页面的不同区域。

为了使这些部分对于通过部分元素导航的用户有用，您应该使用 WAI-ARIA 将该部分的标题与部分本身关联起来。

执行此操作的正常（也可能是最简单的）方法是使用aria-labelledby指向该部分的标题（具有相应的 ID）。

<section aria-labelledby="sectionHeader1">
  <h2 id="sectionHeader1">A great section</h2>
</section>
<section aria-labelledby="sectionHeader2">
  <h2 id="sectionHeader2">An even better section</h2>
</section>

15. 为页面添加描述`<title>`

<title>当发生页面导航（加载新页面）时，该元素通常由 AT 读出。

因此，描述性内容<title>至关重要。如果您的网站有多个页面<title>内容相同，导航可能会变得混乱。请确保<title>整个网站的每个页面都是唯一的。

16. DOM 顺序应与视觉顺序一致

flex-direction: row-reverse如果您在 CSS 中使用，则可能导致您的网站出现可访问性问题。

DOM 中的顺序应该与页面上项目的逻辑顺序（流程以及您自然阅读它们的方式）相匹配。

这很重要，因为如果您有 3 个盒子 A、B 和 C，并且您使用它们flex-direction: row-reverse，或者float:right这不再成立。

它们在视觉上将显示为 C、B 和 A。

然后，您可能会反转 DOM 顺序，以便从视觉上读取“A，B，C”。

不幸的是，使用屏幕阅读器等 AT 的人会将内容读为“C、B、A”，而其他人则将页面读为“A、B、C”。

元素应按照您期望的视觉顺序添加到 DOM 中。您的 CSS 不应干扰此顺序。

17. 焦点顺序应与 DOM 顺序一致

类似地，当有人Tab浏览页面时，诸如链接、按钮等控件应该按照逻辑顺序集中显示。

这就是为什么使用tabindex具有正值的属性很少是一个好主意，它们会改变文档的焦点顺序。

<div tabindex="0">I am focused last!</div>
<div tabindex="2">I am focused second!</div>
<div tabindex="1">I am focused first!</div>
<a href="" tabindex="-1">I don't receive focus at all</a>

如果您需要在页面的焦点顺序内使某个元素可聚焦，请使用tabindex="0"。（注意：这通常意味着您没有使用正确的 HTML 元素。如果您正在使用将元素添加到页面焦点顺序中，请仔细检查是否没有更好的元素tabindex="0"）

添加tabindex="0"将允许元素处于 DOM 焦点顺序中的逻辑位置（记住第 16 点，确保您的 DOM 顺序是正确的！）。

18. 不要使用表格进行布局

你可能认为我在 2021 年就不必说这句话了，但它仍然会发生。

<table>s 用于表格数据而不是布局页面（我知道电子邮件是此规则的一个例外，不要@我！）。

而是使用 CSS 和相关的语义 HTML 元素。

您可能继承了一个完全无法删除表格的遗留应用程序。作为最后的手段，您可以使用role="presentation"on every single<tr>等<td>命令从表格中删除语义信息（带有的元素role="presentation"实际上变成了<div>）。

这并不是最理想的选择，但如果没有其他选择，这就是你的“免于牢狱之灾”卡。

19. 链接文本、按钮文本和标签应该是唯一的

页面上的所有链接都应具有执行不同操作的唯一链接文本。因此，如果您有大量“阅读更多”链接，则需要做一些工作。

有很多方法可以解决这个问题（对于像这样的文章来说太多了），但这里有一个典型的例子，用于aria-labelledby更改 AT 的链接文本。

<article>
  <h2 id="article1-title">My super duper article</h2>
  <img ...attributes etc. here>
  <p>Article brief description with truncation...</p>
  <a href="article1-url" aria-labelledby="article1-title">Read more</a> 
</article>
<article>
  <h2 id="article2-title">Your code sucks, lets fix that</h2>
  <img ...attributes etc. here>
  <p>Yes you, your code sucks, but we can help...</p>
  <a href="article2-url" aria-labelledby="article2-title">Read more</a> 
</article>

您可以将类似的技术应用于具有重复行的表格中的按钮、表单上的标签（如果页面上有两个具有相同标签文本的不同表单）等。

注意：在本技巧的开头，我提到过，如果链接、按钮等执行的是特定操作，则文本也应该是唯一的。如果两个超链接指向同一文档的同一位置，则链接文本可以（而且应该）相同。

表格

从简单的联系表单到在线考试，表单都很重要。所以，让我们确保每个人都能使用它们！

20. 标签

想到我仍然要说这个但还要为您的输入添加标签，这真是不真实。

没有placeholder属性是不够的，<label>与之相关的元素<input>才是必需的。

话虽如此，这并不完全是你的错，WCAG 确实让回答即使是简单的问题也变得困难……

文章已不再可用

21. 标签应始终可见

对于患有认知障碍或焦虑相关疾病的人来说，始终可见的标签至关重要。

如果没有这些功能，人们最终可能会不得不删除之前输入的信息以确保其正确无误，然后重新输入。如果表格很长，这可能意味着他们永远无法完成整个表格。

placeholder这就是属性不足以标记控件的原因之一。

22. 将标签与输入关联。

标签本身对屏幕阅读器来说没什么用。我们需要告诉屏幕阅读器这个标签属于哪个输入/控件。

虽然使用隐式标签是完全有效的：

<label>First Name
  <input name="first-name" placeholder="e.g. Toni">
</label>

某些听写/语音控制软件不适用于隐式标签！

因此，您应该使用明确的标签（或者我喜欢称之为“老式标签”）：

<label for="firstName">First Name</label>
<input name="first-name" placeholder="e.g. Toni" id="firstName">

使用将标签与输入关联起来for="IDofInput"。

正确关联标签（无论使用哪种方法）还有一个额外的好处：点击标签即可聚焦相应的输入。这增加了可点击区域，从而聚焦输入（稍后会详细介绍点击目标的大小！）

23. 标签应在视觉上靠近输入。

您的标签应该美观且接近输入标签。

标签与其链接的输入框之间如果留有大量空白，可能会给使用屏幕放大镜的用户带来麻烦。屏幕放大镜是一款可以放大屏幕特定区域，方便用户阅读的软件。

想知道这种感觉的一种方法就是“吸管测试”。握紧拳头，直到出现一根吸管宽度的缝隙。

现在将手放在一只眼睛上，通过微小的开口进行观察。

这将让您了解使用屏幕放大镜的人一次可以看到多少屏幕。

对于患有“管状视野”的人来说也是如此，他们视野中只有一小部分提供有用的视野。还有很多其他视力障碍也会限制视野，所以要把相关的物品摆放在靠近的地方。

24. 组相关字段

如果您有多个相关的输入，则应使用对其进行分组<fieldset>。然后，您可以使用元素标记这些分组的控件<legend>。

<fieldset>
  <legend>Shipping Address:</legend>
  <label for="shipping_name">
      Name
  </label>
  <input type="text" name="shipping_name" id="shipping_name">
  <label for="shipping_street">
    Street
  </label>
  <input type="text" name="shipping_street" id="shipping_street">
  [...]
</fieldset>
<fieldset>
  <legend>Billing Address:</legend>
  <label for="billing_name">
    Name
  </label>
  <input type="text" name="billing_name" id="billing_name">
  <label for="billing_street">
    Street
  </label>
  <input type="text" name="billing_street" id="billing_street">
  [...]
</fieldset>

请注意，您应该使用视觉隐藏文本或 WAI-ARIA 为标签添加额外信息。为了使示例更容易理解，我在上面的示例中没有包含这些内容。

虽然稍后会介绍一个强大的 CSS 类，用于在视觉上隐藏内容，但仍然可以让屏幕阅读器访问：

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

您可以在 w3.org 上找到有关分组输入的更多信息

25. 允许人们审查信息

如果您收集的不仅仅是基本信息，或者提交的信息无法逆转（一旦提交就无法编辑），您应该允许人们在最终提交之前查看该信息。

最简单的方法是，一旦有人提交表单，就将信息返回给他们。允许他们在提交之前选择编辑这些信息。

这对于诸如向他人转账等金融交易尤为重要。对于诸如同意买卖条款和条件等法律承诺也同样重要。

WCAG 技术 G98可以对此提供进一步的指导。

26. 错误应该正确关联

如果有人在您的表单上犯了错误，您应该确保任何错误消息都与他们填写错误的输入明确相关。

因此从视觉角度来看，错误应该直接位于相关输入的旁边。

或者，可以将所有错误显示在表单顶部，但应突出显示有错误的相关输入（不仅仅是颜色！确保图标或文本也可见，以指示错误的位置）。

最后，对于使用辅助技术 (AT) 的用户，我们也需要将错误与相关输入关联起来。

实现此目的的一种方法是使用aria-describedby。您还应该添加aria-invalid到输入中以指示存在错误。

<form>
  <label for="email-address">
    Your Email Address
  </label>
  <span id="email-error">
    Error: Your email address must contain an @ symbol
  </span>
  <input 
    id="email-address" 
    type="email" 
    aria-describedby="email-error"
    aria-invalid="true"
  >
</form>

27. 使用自动完成功能

自动完成功能对于有认知障碍的人非常有用，尤其是那些影响记忆力和信息保留的人。

这也使得其他人的生活变得更加轻松！

自动完成功能有很多选项，但每个浏览器的支持情况各不相同，但总体而言，对自动完成功能的支持相当不错！

例如，填写信用卡信息时，您的表格可能如下所示：

<label for="CCname">Name on card</label>
<input name="name" id="CCname" autocomplete="cc-name">

<label for="CCnumber">Card Number</label>
<input name="cardnumber" id="CCnumber" autocomplete="cc-number">

<label for="CCcvc">CVC (3 numbers on back)</label>
<input name="cvc" id="CCcvc" required autocomplete="cc-csc">

<label for="CCexpiry">Expiry</label>
<input name="cc-exp" id="CCexpiry" autocomplete="cc-exp">

尽量避免autocomplete="off"输入，除非您确定它们不会被正确填写。

28. 不要禁用粘贴功能

我想我可以在最近对 DEV.to 上的一篇文章发表的评论中总结这一点。

地狱里有一个专门为禁用粘贴功能的人准备的圈子。

这是一个巨大的安全问题，因为它使人们选择更简单的密码等，甚至是一个更大的可访问性问题，因为有认知障碍的人可能会依赖复制和粘贴信息来填写表格、进行身份验证等。

幸运的是，WCAG 2.2 解决了这个问题，所以现在意味着您的网站不符合 WCAG 标准，因此在大约 80% 的国家/地区都是非法的。

https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication

因此最好不要在输入上这样做，或者根本不要这样做。

原评论：https://dev.to/inhuofficial/comment/1gdoo

图片

让图片变得易于访问其实并不难。但对于大多数网站来说，在提升可访问性方面，这是最快见效的方法之一。

29.`alt`属性

我感觉自己就像一张破唱片……现在已经 2021 年了，为什么人们还没有意识到这一点。

每张图片（赋予页面意义的图片）都应该有一个alt属性。这不仅对使用 AT 的用户有用，而且对那些需要禁用设备上图片（例如为了节省数据）的用户也很有用。

而且在大多数情况下，写出好的alt描述并不难。想象一下，你正在电话里给别人读文档，并向他们描述图片。这样做，你就能写出很棒的alt描述。

哦，alt属性与SEO 无关- 出于对所有强大事物的热爱，请停止尝试关键字优化您的图像alt属性（如果您确实添加了它们）。

30. 不要`alt`在图片中添加文字

等一下...但是你...我不明白？！

有时图片仅用于演示。例如，它们可以用作背景图片。它们对页面、使用 AT 或关闭图片的用户没有任何价值。

在这种情况下，您应该添加一个空 alt属性（alt=""）。

这意味着 AT 将忽略此图像。alt完全关闭此属性可能会导致某些屏幕阅读器尝试读取文件名……您可以想象，这绝对不是一个好的体验！

重要提示：对于装饰性图片role="presentation"也请添加。这样您就可以在网站上搜索alt属性为空或缺失的图片（以便您可以填写）。如果role="presentation"您知道图片有属性，您可以跳过，因为它们纯粹是装饰性的。

31. 不要在`alt`属性中使用“图片”

辅助技术 (AT) 已经知道他们当前位于一张图片上，并且他们会假设这是某物的图片。

所以不要写alt="picture of a flower"...它没有任何意义，只需写alt="a flower"。

话虽如此，如果图像是插图/图形等，那么添加它就是很好的信息。

因此，如果您有一个灯泡的插图，alt="a light bulb"则不如alt="line drawing of a light bulb"或alt="light bulb graphic"）。

即使那样也不要使用“图片”......alt="a picture of a line drawing of a light bulb"因为您会发现它会增加大量不必要的噪音。

如果您从字面上理解，alt="a woman smiling while looking at a picture of her children"这是可以的，因为图片是您所描述的图像的一部分。

32.`<figure>`适时使用

如果图像具有对读者有用的额外含义（例如图像的拍摄地点、图像中的人物、图像的来源等），则为图像添加标题（通常位于下方）会很有用。

该<figure>元素允许我们轻松地将标题与图像关联起来（<figure>还有其他一些用途，但这是主要用途）。

对于标题，我们还可以使用语义正确的 HTML 元素，<figcaption>即元素。

通过结合这两者，AT 可以理解标题和图像之间的关系，并将该信息显示给使用辅助技术的人。

<figure>

  <img src=”img.jpg” alt=”squirrel”>

  <figcaption>
     A Grey squirrel eating nuts in the Woods.
  </figcaption>

</figure>

33. 对于复杂的图形、图表等，可以使用其他方法

有时，让所有人都能理解复杂的图形或图表是不可能的（或极其困难）。

解决此问题的一种方法是提供替代文本。

通常，图表和图形都是从表格数据中得出的，因此包含数据表。

如果您的设计无法容纳表格（即空间有限的仪表板），我们将在此列表的后面介绍“视觉上隐藏内容”。

处理信息图表时，您可以提供正确标记且可访问的 PDF 作为替代方案。

更好的是，可以创建一个包含所有相同信息的、可访问的 HTML 页面。创建 HTML 等效页面或信息图是很好的 SEO 实践，我认为这是最好的选择。

34. 内联 SVG 没有`alt`属性

可缩放矢量图形 (SVG)对网站非常有用。这是因为 SVG 可以缩放到任意大小而不会损失质量，而且文件通常较小。

它们还可以内联在 HTML 中，从而节省网络请求！

但是，如果您内联 SVG，则无法alt向其添加属性。

相反，您<title>在 SVG 本身内添加一个！

是<title>SVG 的可访问名称，相当于元素alt上的属性<img>。

对于输入<title>标准图像的内容适用相同的规则，想象一下您正在通过电话向某人描述图像。

值得注意的是，还有一个元素。如果你的 SVG 图像特别复杂，需要更长的描述，这个元素就很有用。这与图像的<desc>描述大致相同。<figcaption>

<svg width="100" height="75">
  <title>Dark rectangle</title>
  <desc>A grey rectangle with rounded corners and a dark green border</desc>
  <rect width="75" height="50" rx="20" ry="20" fill="#666" stroke="#229b23" stroke-fill="1" />
</svg>

语言

设置正确的语言和使用正确的语言是实现无障碍的关键！

35. 使用`lang`文档中的属性

设置页面语言对于使用 AT 的人来说很重要，这也是为了让 Google 等可以轻松提供页面翻译。

<html lang="en">

语言代码列表可在此处找到

36. 使用`lang`语言改变的属性。

也许您的主要文档是英文的，但您喜欢“混合使用”并在其中添加偶尔的法语短语。

对于使用辅助技术 (AT) 的用户来说，如果标记不正确，这可能会非常麻烦。屏幕阅读器会尝试使用英语词典和规则集来读取法语文本（并且可能会失败！）

因此，如果您在文档中更改语言，请确保使用lang元素上的属性来以不同的语言包装文本。

您不需要“切换回”原始语言，只有具有该lang属性的任何元素内的文本才会被区别对待！

<html lang="en">
<!---skipped a load of HTML -->
<p>
  The only German I can remember from school is 
  <span lang = “de”>
     ist sehr gut
  </span>
  , which is shocking. I am afraid my French is no better 
  <span lang=”fr”>
    mon ami
  </span>
  , I am a typical Brit when it comes to languages I am afraid.
</p>
<!---skipped a load of HTML -->
</html>

37 避免使用行话和复杂的词语

也许你是一位内容创作者，恰好正在读这篇文章。这里有一条建议，我希望你首先记住。

五分之一的成年人的阅读年龄相当于12岁儿童的阅读年龄。

所以，虽然你用专业术语和复杂的词汇来让自己听起来很聪明，但你并没有做到这一点，你只会疏远大约五分之一的人。尽量使用简洁的语言。

38. 缩写和首字母缩略词

在科技和数字领域，我们喜欢使用首字母缩略词和缩写。例如 HTML、CSS、JS、URL、AWS、S3 等等。

黄金法则是永远不要假设阅读您文章的人默认知道首字母缩略词或缩写的含义，即使您认为这很明显。

为了说明这一点，HTML 具有<abbr>元素，用于指示单词或短语是缩写或首字母缩略词。

遗憾的是，<abbr>元素指南建议我们应该使用title属性来完整解释缩写/首字母缩略词。这不太容易理解。

我将在将来写一篇关于如何解决这个问题的文章，因为它并不像你想象的那么简单！

同时，我们可以按照建议使用<abbr>带有title属性的元素。

<p>Using the correct <abbr title="HyperText Markup Language">HTML</abbr> in your articles will make them more accessible. HTML consists of many semantic elements such as....</p>

或者更好的是，您可以在第一次使用该术语时将其完整拼写出来，然后将缩写版本放在括号中。

<p>Using the correct HyperText Markup Language (<abbr>HTML</abbr>) in your articles will make them more accessible. HTML consists of many semantic elements such as....</p>

在这两种情况下，您只应解释一次缩写（第一次使用时），或者如果文章特别长（就像这篇！），则应在整个文档中定期解释缩写作为提醒，只要不是太频繁即可！

39. 提供签名选项

您可以将远程视频手语翻译服务添加到您的网站或网页应用中。这样您就可以与使用手语的人交流（没错，“说”这个词用得没错，而且它是一种完全不同的语言！）。

许多远程手语公司注册费很低甚至为零。许多公司还提供“按分钟付费”服务，您可以自行判断需求，因此，将这项服务添加到您的网站所需的成本比您想象的要低！

如果您从事医生、律师等专业服务工作，了解这一点尤其有用。

其中一些口译服务甚至可以通过API访问，因此您可以将它们直接集成到您的网站中！（很多口译服务都有一个按钮，可以将您重定向到另一个网站，作为其解决方案的一部分，但这并不总是令人满意的）。

文章已不再可用

或者，提供一个指向页脚（或其他部分，例如，<aside>如果有的话）的跳过链接可能会很有用。如果页脚中有很多重要信息，这很有用。

在我给出的以下 Stack Overflow 答案的末尾可以找到多个跳过链接的简单示例：

2020年7月6日

不，这不是问题。他们会在任何屏幕阅读器中使用导航键（阅读下一个）。

在 NVDA 中，这通常是 NVDA 键和向下箭头。

这是预期的行为。（假设您的页面使用正确的标记并且没有问题，在没有看到页面的情况下......

打开完整答案

45. 添加内容部分

如果您的页面相当大，强烈建议添加目录/内容部分，详细说明文章/页面中的标题/部分（或至少是顶级标题）。

这再次简化了使用键盘的用户的操作。它还能帮助其他人，因为文档结构现在更容易理解，并且可以轻松跳转到相关章节！

46.处理多个导航区域

我们之前提到过，你的网站导航应该包含在一个<nav>元素中。这样可以让辅助技术知道这是网站的主导航。

但是如果页脚或页脚中<aside>也有导航链接怎么办？

答案很简单——只需标记<nav>元素即可。

我们可以用它aria-label来做到这一点并给每个部分一个相关的名称！

<header>
  <nav aria-label="main navigation">
    <ul>
      <li><a href="a-link">link</a>
    </ul>
  </nav>
<header>

<main>
   [...]
</main>

<footer>
  <nav aria-label="footer navigation">
    <ul>
      <li><a href="a-different-link">new link</a>
    </ul>
  </nav>
</footer>

47. 面包屑

面包屑导航是告诉用户当前网站位置的绝佳方式。它还能帮助那些再次使用键盘的朋友，提供另一种快速浏览网站的方式！

我们将重复使用上一点的技巧，将面包屑包装在一个<nav>元素中并用标签标记它aria-label（因为这可以帮助使用屏幕阅读器的朋友！）。

<nav aria-label="Breadcrumbs">
  <ol>
    <li>
      <a href="https://example.com/">
        Home
      </a>
    </li>
    <li>
      <a href="https://example.com/products">
        Products
      </a>
    </li>
    <li>
      <a href="https://example.com/products/childrens-clothing">
        Children's clothing
      </a>
    </li>
    <li>
      <a href="https://example.com/products/childrens-clothing/shoes" aria-current="page">
        Shoes
      </a>
    </li>
  </ol>
</nav>

注意，我在当前页面上添加了另一个 WAI-ARIA 属性aria-current。这可以让使用屏幕阅读器的用户知道他们现在所在的位置。

就我个人而言，我倾向于不将当前页面作为面包屑中的链接，如果页面很容易从页面中识别出来，那就没问题，<h1>正如<title>前面所讨论的那样！

还要注意，我使用有序列表（<ol>）来包含面包屑，以反映面包屑部分有顺序的事实。

48.这是陷阱！

抱歉我无法抗拒！

但键盘陷阱可不是闹着玩的。

键盘陷阱意味着使用键盘的人可以进入页面的一部分，然后陷入焦点循环，除了重新加载整个页面外没有其他办法摆脱它。

这种情况在模态框中经常发生，开发人员忘记添加适当的关闭按钮（他们使用<div>和点击处理程序而不是<button>来关闭模态框，因此无法通过键盘访问）。

因此，尽管您应该已经在第 41 点键盘导航中检查过您的网站是否完全可以使用键盘，但在设计模态窗口/在自定义控件中捕获焦点等时，这一点需要特别牢记。

确保您可以使用可<button>通过键盘访问的按钮关闭模态窗口，同时确保该Esc键可以关闭任何模态窗口或让您退出任何捕获焦点的控制。

演示和设计

如果您是平面设计师或专注于 CSS 的开发者？那么本节内容值得您特别关注！我们来聊聊视觉呈现和可访问性！

49. 文本颜色对比

网上已经有上百篇关于这方面的文章了。所以我推荐你看看这篇WebAim 文章，它解释了颜色对比度。

至少链接到那个文档可以让这篇文章不再冗长。（顺便说一句，写得真好，都快写到一半了，我印象深刻🤣）

不过，我确实有几个小技巧可以让检查颜色对比度变得更容易！

快速提示 1 - 开发工具

使用位于开发工具窗口最左上角的“选择元素来检查工具”。

将鼠标悬停在页面上的某个元素上，就会出现一个大工具提示。

如果可以计算，工具提示将显示：

对比度（如果可以则打勾，如果不可以则打叉）
可访问名称 - 本质上是使用 AT 的人将收到的文本。
角色 - 这是什么类型的内容（如果该项目是交互式的，则会向使用 AT 的人员公布，以便他们知道如何与其交互）
Tab键盘可聚焦 -例如让您知道此项是否可以使用来聚焦。

值得注意的是，如果您单击元素并color在样式面板中找到相关属性，您会发现更多与颜色对比相关的工具。

快速提示 2 - 检查任意位置的对比度

有时开发工具不会显示对比度，因为它无法确定前景色或背景色来进行比较。

或者有时您可能不在浏览器中工作，但想要检查设计对比度等。

幸运的是，Paciello Group 推出了一款名为“色彩对比度分析器”的免费软件，您可以下载。它适用于 Windows 和 Mac！

有了它，您可以检查屏幕上任意两种颜色的对比度！如果您想在图像上放置文字，这非常有用，这样您就可以检查对比度最低的部分是否仍在可接受的范围内！

50. 控件对比

诸如<input>s 等控件也应与周围环境有足够的对比度。

在这一点上有很多细微差别（<button>例如，只要文本具有足够的对比度，元素根本不需要有背景！）。

理解成功标准1.4.11：W3 中的非文本对比页面虽然相当冗长，但却详细介绍了这一点，因为这个主题太大，无法在此涵盖！

51. 可见的焦点指示器

使用键盘的人依靠可见的焦点指示器来知道自己在页面上的位置。

通常这将是围绕焦点控制、链接等的轮廓。

有些人会删除这些……千万别，它们很重要！没有它们，使用键盘的人就无法确定他们当前关注的是什么。

还建议您在 CSS 中自行设置这些，而不是依赖浏览器默认值，以使它们更加突出。

然而，WCAG 中再次提供了有关焦点指示器颜色对比度要求的指南，涵盖了这一点。

然而，新规则和指导很复杂，所以我想说一般规则是：

选择与网站背景对比度为 4.5:1 的轮廓颜色
使其厚度至少为 2 个像素（等效）。

这将轻松让你超越最低要求，实际上将使你达到对比度要求的“AAA”级别

52. 字体大小

让我们把这个问题说得简短些。

您网站上的任何字体都不应小于 16px (14pt) 或等效大小。

如果您发现需要将字体缩小，请更改您的设计。

就是这样，我告诉过你这很快！

53. 字体单位（`rem`和`em`单位）

保持事情简单（为了让你在这么长的文章中休息一下，因为我是一个如此好的人！）不要使用px字体大小的单位。

rem单位和em单位根据人们在浏览器中设置的字体大小进行缩放。

这意味着，如果他们将字体大小偏好设置为“超大”，您网站上的文本将变大并满足他们的需求（如果您使用rem或em单位）。

我个人建议只使用rem单位，因为它们总是由文档根大小设置，em如果不小心，单位可能会令人困惑。

哦，现在您正在使用rem和或em字体大小的单位，最小字体大小是1rem或1em您应该使用的。

54. 行高

为了提高可读性，line-height文本块（超过一个句子）的长度应为 1.5（line-height: 1.5）。

单个句子不受此规则的限制（例如，<h1>跨越<h6>多行的 s 不必为line-height1.5）。

line-height只需设置小于 1即可确保文本不会自行运行！

55. 段落间距

与要求类似，line-height段落之间的空间对于提高可读性很重要。

段落之间的间距至少应为字体大小的两倍。

要获得“金星”（WCAG“AAA”），段落间距应为行高的 1.5 倍（因此至少为 2.25 rem）。实际上比这更复杂，但这样更容易理解。

56. 行高、段落间距等

WCAG 2.2（刚刚发布的最新版本）增加了一条新指南，让您作为设计师的工作更加有趣 -成功标准 1.4.12：文本间距

要获得“AAA”评级，您的设计应该能够支持自定义样式表。这样一来，用户就可以根据自己的需求调整您的网站。

最低要求是，一个人应该能够同时设置所有这些，而不会破坏您的网站设计、内容溢出等：

行高（行距）至少为字体大小的1.5倍；
段落之间的间距至少为字体大小的 2 倍；
字母间距（字距）至少为字体大小的 0.12 倍；
字距至少为字体大小的0.16倍。

我只能说，如果你用德语建立网站...考虑到你们都使用了一些非常长的单词，祝你好运。

57. 行长度

对于文本块，尤其是文章或主页内容，每行应包含大约 50-60 个字符。

这有助于提高可读性，尤其对访问您网站的患有诵读困难的人有用，因为长行可能意味着他们很容易忘记所读的内容。

这也使得其他人读起来更加愉快！

58. 不要让文字两端对齐

您并不经常看到这种情况，但有时网站会使用完全对齐的文本（文本在父容器的左侧和右侧排列）。

然而，对于某些人来说，这可能是一个真正的问题，例如再次患有阅读障碍的人。

为什么不使用对齐文本很重要？

对齐文本会在文本块中产生“空白”。这些空白是大片垂直排列的空白。阅读时，这会将视线向下拉，导致难以跟上！

This   text    simulates    justified
text    taken    to    the   extreme!
Look   how   a   large   white   void
has    appeared   after   the   first
word   on   each    line   of   text!
Some   may   find    this    vertical
gap    in    the   text   distracting

59. 不要使用大写字母

现在你可能会觉得是，因为我要说的是，这看起来就像你在冲别人吼叫。如果你在一大段文字上全部使用大写字母，它就会像在冲别人吼叫，而你（可能）不应该这样做！

但这更适用于短标题、按钮文本等，其中所有大写字母可能看起来美观而不像喊叫。

我实际上的意思是，底层 HTML 不应该全部大写！如果你想让按钮或标题全部大写，那就用 CSS 来实现吧！

这对于使用屏幕阅读器的用户来说非常重要。否则，他们的屏幕阅读器很可能会尝试将文本解释为首字母缩略词……这可能会产生一些相当有趣的结果！

text-transform您可以使用值为“大写”的属性通过 CSS 将单词大写。

<!--don't do this-->
<h1>WELCOME TO OUR SITE</h1>

<!--do this instead-->
<style>
  h1{
    `text-transform: uppercase;`
  }
</style>

<h1>Welcome to our site</h1>

60. 屏幕阅读器仅显示文本

在我们讨论文本的同时，让我们来讨论一下作为一名致力于提高可访问性的开发人员可以使用的一个绝妙技巧，即“视觉隐藏文本”。

本质上，这是仅用于辅助技术的文本，并且根本不会在视觉上显示。

虽然aria-label可能更简洁，但您可能会感到惊讶，就像 CSS 支持一样，不同的屏幕阅读器和浏览器组合对 WAI-ARIA 的支持程度也不同。

视觉上隐藏的文本更加健壮，如果你能忍受<span class="visually-hidden">Screen Reader Only</span>HTML 标记中的怪异之处，就应该使用它！（哦，别再做一个纯粹的标记主义者了，WAI-ARIA 无论如何都会让你的 HTML 变得丑陋！😋）

这是我在第 24 点提到的一个类，它已经过破坏性测试！用它来隐藏一些内容，同时确保屏幕阅读器仍然可以访问它们：

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px;  
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

那么我们什么时候使用视觉隐藏文本？

虽然有很多用例，但通常它用于以视觉方式描绘某些东西（例如使用图标），但浏览器/屏幕阅读器无法确定任何可访问的信息。

例如，如果您使用 Font Awesome 或其他基于字体的图标，您可能会有这样的标记：

<a href="https://twitter.com/InHuOfficial">
   <i class="fa fa-twitter"></i>
</a>

为了使其可访问，我们需要在链接中添加一些文本以供读出（否则它会显示“链接，空”或“链接，https://twitter.com/InHuOfficial ”，这是一种糟糕的体验！）。

因此，使用视觉隐藏的文本，我们可以按如下方式修复该问题：

<a href="https://twitter.com/InHuOfficial">
   <i class="fa fa-twitter" aria-hidden="true"></i>
   <span class="visually-hidden">Follow InHu on Twitter</span>
</a>

现在，它不再是一个空链接，而是显示“链接，在 Twitter 上关注 InHu”或类似内容。

61.`aria-hidden`

在最后一点，我偷偷添加了另一个 WAI-ARIA 属性。你发现了吗？

我添加了aria-hidden图标。

此属性（设置为“true”时）将对屏幕阅读器隐藏元素及其内容。

从技术上讲，它将隐藏一个元素，并且所有非交互式内容对于屏幕阅读器、<input>s、<button>s、<a href="link">s 等来说仍然是可访问的，只要它们能够获得焦点。

无论如何，aria-hidden可能不会立即让您想到“演示和设计”，因为它不会在视觉上影响任何东西......但您不会从使用屏幕阅读器的人的角度来考虑它。

他们对页面的外观有一个心理印象，但您仍然需要确保页面的设计和呈现方式合乎逻辑！

那么我们什么时候使用`aria-hidden`？

通常我们使用它来隐藏使用“视觉隐藏”文本提供文本替代的项目。

你会发现它经常应用于复杂的项目或“纯视觉”项目（因为缺乏更好的术语）。这些项目我们无法使用其他技术很好地描述，也无法使用 WAI-ARIA 添加语义含义。

不要用它来隐藏大段文字或无法完全访问的内容。无障碍设计的核心理念是为每个人提供尽可能相似的体验！

<table>另一个例子可能是复杂的图形或图表，我们以相关数据的形式提供了替代方案。

如果图表/图形无法访问，可能会造成很多混乱。因此，我们会将其隐藏aria-hidden="true"，以便使用屏幕阅读器的用户访问我们提供的信息<table>。

`aria-hidden`并且“视觉隐藏”往往会粘在一起。

在我刚刚给出的例子中，我们还可以采用另一个技巧。

我们可以将数据作为<table>HTML 代码添加到页面中。然后使用 JavaScript 获取表格数据并将其转换为图表来替换表格！

在我们的 JS 中，当它成功创建图表后，我们可以：

添加添加aria-hidden="true"到图表的JS
向元素添加“visually-hidden”类<table>。

现在我们有一个图表来直观地显示信息，还有一个表格来向依赖辅助技术的人们呈现信息。

这并非一个完美的无障碍示例（因为有些使用屏幕阅读器的人用它来辅助理解，而不是作为视觉辅助），因为图表本身就应该无障碍。但这总比没有强，而且是一个合理可接受的解决方案！

一个更常见的例子是使用图标字体（就像我们之前做的那样）。我们隐藏图标，这样它就不会干扰屏幕阅读器，并通过 visually hidden 类为屏幕阅读器提供文本。

62.图标字体可能不是一个好主意

看来这方面的争论还在继续，但实际上 99% 的情况下 SVG 图标都更好。这篇关于字体与 SVG 的文章可能是 2017 年的，所以情况略有不同，但总体结果是一样的。

我不想费力地阐述这个观点并开始争论，我只想说 SVG 图标更容易被理解。

还记得我们之前说过 SVG 具有一个<title>属性，其作用类似于alt图像上的文本吗？

我们不用在视觉上隐藏所有文本和aria-hidden内容，而是可以这样做：

<a href="https://twitter.com/InHuOfficial">
  <svg viewBox="0 0 32 32">
    <title>Follow InHu on Twitter</title>
    <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
   </svg>
</a>

当使用屏幕阅读器的人访问该链接时，它会像以前一样显示“链接，在 Twitter 上关注 InHu”。

当然，这看起来像是一堆 HTML（我们可以通过来整理它们<use>），但 SVG 可以复制粘贴到我们的文档中。<title>如果它还没有，我们可以给它一个！

为了更容易理解，我们基本上做的是：

<a href="https://twitter.com/InHuOfficial">
  <svg>
    <title>Follow InHu on Twitter</title>
  </svg>
</a>

哦，别忘了自定义样式表

这不再是以前的问题，但残疾人士可能会使用自定义样式表来替换网站上的字体。

如今大多数支持此功能的插件都知道要忽略图标字体。如果它们不忽略图标字体，最终会得到很多损坏的图标！而使用 SVG 则不会遇到这样的问题。

63. 不要只用颜色来传达信息

有些人是色盲（大约每12个男性中就有1人，每200个女性中就有1人患有色觉缺陷（CVD））！全球共有4.5%的人患有某种形式的CVD！）。

因此，如果您使用绿色表示好或开启，使用红色表示坏或关闭，则需要提供另一种方式来传达该信息。

保存完成后，按钮会变成绿色吗？请确保按钮上出现一个小勾号图标，或者将按钮文字改为“已保存”。

正在构建或设计一个显示支持工单的仪表板吗？不要仅仅使用红色、黄色和绿色来指示工单的时长或紧急程度。另外，黄色的对比度可能不太好，所以你最好不要使用这些颜色！

哦，再说一遍，如果你只是用颜色来传达信息，那么使用屏幕阅读器的人能听到什么呢？确保有一些可以通过编程确定的状态信息（屏幕阅读器可以解析和理解的信息）。

虽然不是“可访问性理想”，但一种选择是创建一种“CVD 友好模式”（色盲模式），将颜色切换为图案。

但是，只有在修复遗留产品的可访问性时才应该这样做，如果从头开始开发，那么从一开始就考虑 CVD。

64. 别忘了`::selection`

此列表中最快的提示之一！

确保您的文本选择颜色与其适用的文本具有足够的颜色对比度（与其他文本相同的规则）。

在黑色文本上使用黑色选择颜色是没有意义的（尽管大多数浏览器都会进行干预并阻止您这样做）。

65.考虑动画

一个不再像以前那么常用的术语是“渐进增强”。

我喜欢将动画视为一种“渐进式增强”。

您会发现，对于大多数人来说，它们都会给您的页面增添一些光彩、魅力和兴趣。

但对于某些人来说，运动会引起头晕，甚至感到恶心（通常归类为/由前庭疾病引起）。

其他人可能患有一些疾病，导致高度焦虑或偏执。对他们来说，页面上的动作可能会令人不安、分心、不安，并可能引起极大的不适。

这就是为什么我喜欢把动画看作是一种渐进式的增强。我建了一个没有动画的网站（但会记住它们），然后再添加它们。

这样，您就可以自然地将动画与网站上的其他样式分开。

这意味着对于那些不喜欢动画的人来说，关闭网站上的动画是一项简单的任务。

为此，我们可以将动画相关的 CSS 添加到单独的样式表中。然后，我们可以根据偏好设置删除/添加该样式表（这可以使用 JS 完成，甚至可以使用 Cookie 等在页面服务器端添加/删除）。

哦，如果你做得对，这对于动画密集型网站的加载速度/性能有很大帮助，因为我们可以发送不太重要的 CSS！

显然，在网站或设置页面上有一个按钮，人们可以关闭动画是理想的情况，但还有其他事情需要考虑，而一些不那么激烈的措施是一个很好的开始！

`prefers-reduced-motion`

媒体prefers-reduced-motion查询允许您了解访问您的网站/网络应用程序的人是否希望使用微妙/无动画。

这样，您可以根据媒体查询是否匹配来打开或关闭动画。

/* animate the height by default */
.animation {
  transition: height 1s ease;
}

/* we switch off the height animation for people who do not want animations */
@media (prefers-reduced-motion) {
  .animation {
    transition: none;
  }
}

语义

我们之前讨论过分段元素及其语义。这次我们来谈谈语义元素，它们在文档、文章等内容中传达含义，从而真正提升页面的清晰度。

66（6）.`<summary>`魔鬼`<detail>`在

啊，双关语开始了，你看得出来我现在写这个已经很累了！😋🤣

但说真的，如果你建造了一个手风琴，却没有使用任何元素<summary>，<detail>那么事情就会变得很困难！

<summary>并<detail>内置了所有魔法（或大部分魔法）！

我认为一个例子是最简单的证明方法：

无需任何 JavaScript 或 CSS 即可在所有现代浏览器中使用（但我们显然想添加一些 CSS 使其更漂亮！）

您甚至可以通过添加或删除元素open上的属性来打开和关闭它<detail>！

它还具备几乎所有浏览器内置的所有可访问性优点

总而言之🙄，<summary>和<detail>是一对顶级元素！

67.`<time>`振作起来

双关语较多，抱歉！

该<time>元素允许您解释日期和时间的多种呈现/书写方式。

这对于SEO来说非常有利，因为计算机可以理解该<time>元素。对于使用AT的用户来说，这也非常有利，因为他们的AT可以理解该<time>元素，并知道如何正确地报时。

总的来说，我认为这个<time>元素...很棒！

一个典型的例子可能是：

<p>You are cordially invited to my swanky dinner on <time datetime="2021-08-07">August 7th</time> at my lake house.</p>

<p>We have hired a professional chef so food will be at <time datetime="19:00">7pm</time> and then the string quartet are scheduled for <time datetime="20:00">8pm</time>. Don't forget that it takes <time datetime="PT1H20M">1hr 20min</time> to get here by helicopter darlings. Kisses</p>

你不觉得这只是一个普通的周六晚上吗？😉

68. A`<button>`是一个按钮。

我写的这篇文章完美地涵盖了这一点，如果你读了它，请做好被咆哮的准备！

文章已不再可用

69. `<dl>`、`<dt>`和`<dd>`元素组成了很棒的三重奏（giggidy）

是的，我很不成熟，但是来吧，我们已经写了 69 篇了，感觉我已经写了好几天了！

无论如何，让我向您介绍描述列表、（<dl>元素）及其子元素<dt>和<dd>。

这些元素非常适合显示具有相应定义或相关数据的项目列表。

大多数人都会忘记这些元素，因为这些例子相当无聊：

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

但如果你需要向别人展示分组数据，它们实际上非常有用。如果你正在练习第25点（允许人们查看信息）中描述的步骤，它们尤其有用。

我们可以使用描述列表来重复人们输入以供检查的信息！

<h1>Review your data</h1>
<p>Please review the data you entered in the previous step to ensure it is correct:</p>
<dl>
    <dt>First name</dt>
    <dd>Marc</dd>

    <dt>Last name</dt>
    <dd>Simmons</dd>

    <dt>Date of Birth</dt>
    <dd><time datetime="1990-05-15">May 15 1990</time></dd>

</dl>

社交媒体

让我们确保我们对社交媒体的贡献尽可能地被人们所接受！

`alt`70.为图像添加属性

我知道，似曾相识！

但并非所有社交媒体都是平等的。

显然，如果您发布的社交媒体平台支持添加alt属性，那么您应该这样做，而且必须这样做！

但是有些平台（看看你的 LinkedIn，你的应用程序上缺少alt描述，而你可以在主网站上添加它们……除非他们在过去几个月里修复了这个问题，而我错过了！）不允许您添加它们。

因此，如果您发现无法添加适当的alt描述，这里有一个重要提示。

在你的帖子/更新/推文/任何内容的末尾，留出足够的空间

[image: my super alt description I would have added if the platform allowed it]

简单又好用的方法，让你的社交媒体贡献重新变得包容（或者无尽的猫咪图片……我不会评判！）

71. 你也可以让你的标签更容易被访问！

嘿，DEV 的其他人还在阅读吗？

请密切注意，这个非常简单，您一定会喜欢它（但恐怕这意味着开发团队需要做一些工作来修复！）

骆驼命名法（CamelCaseYourHashtags）。

不幸的是，有些平台不允许您这样做（仍然指向您 DEV 😉）。

为什么它很重要？

首先，它能防止混淆。我的意思是，我至今最喜欢的误读标签仍然是#susanalbumparty。

我的意思是，人们怎么可能不把它读作“苏的肛交派对”呢？

但如果他们使用了 CamelCase，那么我们现在就不会遇到这个问题了 (#SusanAlbumParty)。

但还有一个更重要的原因。一个与可访问性相关的原因（这正是我所要写的！）。

如果标签包含多个单词，使用屏幕阅读器的人将能够理解该标签！

如果您尝试在#devbugsmash 上使用屏幕阅读器，它会完全弄乱单词，但#DevBugSmash 可以在大多数屏幕阅读器中正确读取！

72. 限制使用表情符号😲🤯💪🧨💥

我并不是说不要使用表情符号，但有两个原因说明你应该限制它们的使用。

第一个问题可能比较明显，AT 和屏幕阅读器无法很好地兼容表情符号。太多表情符号会让帖子难以阅读。

但第二个人们往往忽略的一点是，对于有认知障碍的人来说，尤其是那些无法进行抽象联想的认知障碍者，表情符号可能会让他们感到困惑。

如果在推文中放入足够多的表情符号，人们就会对这些对他们来说毫无意义的图片感到不知所措和沮丧。

因此，请使用表情符号，尤其是在发布文章等时吸引注意力。

只是不要在每个单词中都使用表情符号，也不要用表情符号代替单词来回复你不认识的人。

即使能够联想图像的人也会对某些表情符号的含义感到困惑！

“🍆 喝茶？🍑 吃甜点”对某些人来说可能有非常不同的含义！

73. 不要使用代码图像

现在这个会有争议，但请听我说完！

如果网站支持代码块，那就用吧。别找借口，这意味着它们可以被 AT 访问。这也意味着人们可以复制你的代码并使用它。

但是，如果您无法使用适当的代码块，那么社交媒体渠道该怎么办呢？

我并不是说完全不要分享文本图像，而是说不要像现在这样分享代码图像。

当分享使用https://carbon.now.sh/或类似服务创建的代码图片时，请将您的代码放入GitHub Gist、CodePen等。然后链接到代码。

这样，每个人都可以访问您的代码，并且每个人也可以享受复制和粘贴您的代码的好处！

如果您需要社交媒体帖子中的链接指向您的文章，那么...请将代码放入文章本身！

如果你无法做到以上任何一点……那就重新考虑你的帖子吧。其实有一种方法可以确保你也能分享实际的代码！你只需要找到一个适合自己的解决方法！

表格

我们已经讨论过不使用表格进行布局，但我们还需要知道什么？

74.了解基础知识

您会惊奇地发现有多少个表没有<th>元素。

它用于表示单元格是表头，在简单表中默认为列。

以下是最简单形式的表格：

<table>
  <tr>
    <th>Col Header 1</th>
    <th>Col Header 2</th>
    <th>Col Header 3</th>
  </tr>
  <tr>
    <td>Row 1 Col 1</td>
    <td>Row 1 Col 2</td>
    <td>Row 1 Col 3</td>
  </tr>
  <tr>
    <td>Row 2 Col 1</td>
    <td>Row 2 Col 2</td>
    <td>Row 2 Col 3</td>
  </tr>
</table>

但我们可以做得更好……

属性`scope`

为了改进前面的例子，如果我们想让一行中的第一个单元格成为该行的标题，该怎么办？

scope好吧，如果我们在正确的位置添加属性，我们就可以实现这一点，并且仍然有一个可访问的表（几乎！）。

<table>
  <tr>
    <th scope="col">Col Header 1</th>
    <th scope="col">Col Header 2</th>
    <th scope="col">Col Header 3</th>
  </tr>
  <tr>
    <th scope="row">Row Header 1</th>
    <td>Row 1 Col 2</td>
    <td>Row 1 Col 3</td>
  </tr>
  <tr>
    <th scope="row">Row Header 2</th>
    <td>Row 2 Col 2</td>
    <td>Row 2 Col 3</td>
  </tr>
</table>

别忘了`<caption>`

我们几乎已经完成了一个基本的无障碍表格。我们只需要<caption>在表格中添加一个，以便它能够充分地描述辅助技术 (AT)。

那么让我们看看它是什么样子的（带有一些非常基本的样式）

太棒了！我们有了一张可以继续构建的基础表格。

75. `<thead>`，`<tbody>`和`<tfoot>`

现在我们有了一个基本的表格，是时候添加更多的语义信息了！

我们有<thead>元素，允许我们定义表头（就像<header>在文档中一样）。

我们还有<tbody>元素，它指示所有表格数据的位置（类似于<main>在文档中）。

最后我们有<tfoot>元素，它指示表格行摘要的位置<tbody>（如果适用 - 该<tfoot>元素类似于<footer>文档中的元素）。

<table>
  <thead>
    <tr>
      <th scope="col">Col Header 1</th>
      <th scope="col">Col Header 2</th>
      <th scope="col">Col Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row Header 1</th>
      <td>Row 1 Col 2</td>
      <td>Row 1 Col 3</td>
    </tr>
    <tr>
    <th scope="row">Row Header 2</th>
      <td>Row 2 Col 2</td>
      <td>Row 2 Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Summary</th>
      <td>Col 2 summary</td>
      <td>Col 3 summary</td>
    </tr>
  </tfoot>
</table>

为了清楚起见，该<tfoot>元素是可选的。

哦，如果您听说过 a<tfoot>应该在之前<tbody>，那是错误的，这是 HTML 4 的做法。

在 HTML5 中顺序始终相同！

76. `<colgroup>`（和`<col>`）

现在我们来谈谈有趣的事情。

如果您有一个复杂的表格，可能需要根据多个标准比较产品 A、产品 B 和产品 C，那么该<colgroup>元素就非常有用！

它的作用是允许我们将列组合在一起，从而在两列之间建立关联。

假设我们正在比较 JB toys、ZA games 和 DD kids 销售的产品。

我们想比较几种产品的价格和交货时间。

通常这会很困难，但有了<col>元素（在设置列分组时代表单个列）和<colgroup>元素（我们用来对列进行分组），这实际上是可能的！

77.如果需要使表格行可点击怎么办？

表格中的数据通常不仅仅是显示，有时您需要能够单击某一行来编辑、删除它等。

我给出的这个 Stack Overflow 答案应该涵盖了大多数用例，即使它确实需要重写（列表中还有另一篇文章！）：

2020年11月11日

前言

向 OP 致歉，如果此行的目的是将人们带到另一个页面，那么这个答案中的一些内容可能会产生误导。

首先，将下面的选项 1 和 2<button>中的s替换为<a>。无需事件监听器或onclick……

打开完整答案

测试

无障碍测试目前还无法完全自动化。但这并不意味着自动化测试不是一个好的开始！

78.自动化测试

在设计组件或整个页面时很容易忽略某些东西。

自动化可访问性测试和可访问性检查是生产可访问产品的重要第一步。

我就不拐弯抹角了，下面是我使用的工具：

axe DevTools - Web 可访问性测试- 非常适合对页面进行快速而粗略的测试。
eslint-plugin-jsx-a11y - 如果我必须使用 React，它至少可以尽早发现问题。
Accessibility Insights for Web - 毫无疑问是你能用到的最好的无障碍测试插件，学习起来有点费劲。我用它来做我的最终“自动化”测试。

就是这样。我有很多情景化的功能，比如标题地图，或者干脆在 DevTools 中运行 Lighthouse（如果我也需要性能方面的改进，Lighthouse 报告中的可访问性部分和 Axe DevTools 基本一样，只是没那么容易用）。

但老实说，如果您只使用一种自动化工具，那么Accessibility Insights for Web就非常棒了……而且这还是来自一个不太喜欢微软的人！

但是，我有一个不幸的消息......自动化辅助工具最多只能自动发现大约 40％的错误！

所以...

79. 仍然需要手动测试和知识

抱歉，各位，你们必须学习这些东西，在团队中配备一名可访问性测试员/质量保证人员，或者付钱请像我这样的人来指导你们。

最大的技巧是准备一份清单...您可以先将这篇文章添加到您的书签中，因为它涵盖了很多需要查找的内容！

我将会写几篇有关测试技术的文章，所以现在就到此为止。

可用性

让您的网站更易于所有人使用的技巧！

80. 空白

在为移动设备或触摸屏进行设计时，“空白空间”或“安静空间”非常重要。

不要创建屏幕大小的可点击卡片，这意味着没有“非交互”区域可以放置手指进行滚动。

这对于患有帕金森病或脑瘫等运动障碍的人来说尤其重要。

如果您没有在页面上留出安静的空间，精细运动控制能力的下降会导致意外点击，从而带来非常令人沮丧的体验！

81.点击目标尺寸

出于类似的原因，按钮、控件等的点击目标大小也非常重要。

目前（由于 WCAG 正在尝试降低此要求……感觉像是倒退了一步），要求点击目标至少为 44 CSS 像素 x 44 CSS 像素。CSS像素相当复杂，因此在 PC 上通常使用 44 像素，在移动设备上则略小，大约使用 0.8 * 44（约 35）像素。

请记住，这些是最低限度，因此我只是在所有设备上说“45px x 45px”作为一般（且简化得多）的规则。

由于空间限制，在进行移动设计时，较大的最小点击目标尺寸可以极大地激发创造力！

82. 不要禁用缩放！

您是否曾经将类似内容放入<head>您的页面部分？

<meta 
  name="viewport" 
  content="width=device-width, 
  initial-scale=1.0, 
  maximum-scale=1.0, 
  user-scalable=no" 
/>

好吧，不要再这样做了，好吗（这次我会轻轻地打你一下手腕……）。

禁用缩放功能是极其不可行的。

许多人都喜欢放大页面的某些部分，以便更清晰地查看它们。许多人发现缩放功能对于在移动设备上阅读页面至关重要。

别管它，不要试图阻止人们缩放。

83. 如果可以避免，就不要使用超时或计时器

您是否曾经开始填写多页表格，这时电话响了，您返回表格，然后当您提交当前阶段时，它告诉您会话已结束，您必须重新开始？

事情可能不会完全按照这样的方式发生，但我确信您之前曾遇到过网页超时的情况。

对于某些人来说，这可能是一个真正的问题。

他们可能需要时间来仔细检查信息，或者他们可能通过吸气和喘气来输入信息。

哦，您还没有听说过 sip and puff 吗？...观看 YouTube 上关于 Jared 以及他如何与计算机互动的精彩视频！

如果必须为某件事设定时间限制，务必将其设得足够长，以免将人排除在外。同时，也要提供另一种不受时间限制的完成任务的方法。

84.让人们了解链接行为。

如果您要在新窗口中打开链接，target="frameName"请告诉人们。

哦，如果这让您感到惊讶，是的，您可以使用除之外的其他内容在新窗口中打开链接target="_blank"，这甚至是有益的……但我离题了。

无论如何，在我分心之前（我已经写了好几个小时了！）我正在谈论当链接在新窗口或选项卡中打开时告诉人们。

最简单的方法就是说出来！

<a href="https://example.com" target="_blank">Go to another site (opens in new window)</a>

显然，对于大多数人来说，这是一个大错误，因为您不希望所有这些括号弄乱您的设计。

那么如何使用我们之前学到的一些技巧和一点 CSS 来让人们知道呢？

我们所做的是使用 SVG 来指示外部链接（顺便说一下，这没有标准，但使用的图标相当容易理解）并将其放置在使用 CSS 的链接之后。

然后我们添加一些视觉上隐藏的文本，以便使用屏幕阅读器的人可以获得相同的信息。

最好在当前窗口中打开所有内容。这样用户仍然可以使用返回按钮，但就连我本人也更喜欢在新标签页中打开外部网站，这样用户就不会过早离开我的网站！请自行判断链接打开行为，并尽可能保持一致！

85. 不要忘记`:visited`国家

这很容易被忽视。:visited选择器允许你设置已访问链接的样式。

从可访问性的角度来看，这非常有用，因为它可以帮助有记忆障碍的人记住他们以前去过的地方。

这对于其他人来说也是一个简单的提示，这样他们就不会查看他们已经看过的东西（或者找到他们以前看过的东西！）。

您可以使用与新窗口指示器类似的技术在链接后添加眼睛图标或类似图标。

没有要求对:visited状态进行样式化，这只是一种很好的做法（我承认我也忘记了...由于写了这篇文章，我今天才将它添加到我的清单中！）

86. 情态动词很复杂

情态动词（对话框）是最难正确处理的事情之一。

让我们从语义开始，正确使用的 HTML 元素通常是一个<dialog>元素！

接下来要注意的是，真正的模态框在打开时应该将焦点锁定在其中。

希望您现在已经从本文中了解到，屏幕阅读器遵循自己的一套规则并具有独特的导航方式。

因此，简单地拦截Tab按键（99% 的模态示例和库都是这么做的）不足以吸引屏幕阅读器的焦点。

我们面临的最大挑战是，我们必须对屏幕阅读器隐藏除模式之外的所有其他内容。

为了实现这一点，通常最好将模态窗口放在页面主要内容之外（从技术上讲这是不正确的，但在我看来是最好的选择）。

这样，隐藏所有其他页面内容的大部分工作都可以通过aria-hidden="true"、、<main>元素等完成。<aside><footer>

这样就隐藏了大部分内容。然而，我们仍然面临一个问题：任何可以接收焦点的元素（按钮、超链接等）仍然可以获得焦点，因此会被忽略aria-hidden。

为此，我们需要添加tabindex="-1"到页面上的每个可聚焦元素，除了我们的模式内的元素。

这可能是一个有趣的挑战，因为您必须考虑contenteditable等等tabindex。

一旦我们完成了排序，模态框也应该可以通过Esc键关闭，所以不要忘记它的处理程序。

最后，当模式关闭时，焦点应该返回到打开它的按钮。

如果通过按键关闭模态框，这一点尤其重要Esc。如果我们不完成此步骤，文档焦点将丢失并返回到页面顶部。

哦，别忘了，tabindex="-1"在完成之前，我们需要撤消对所有可聚焦元素的设置。

正如您所想象的，这需要解释的事情非常多，所以这是我将来会写的另一篇文章！

目前，我在 Stack Overflow 上找到了一个旧的部分答案，其中涵盖了这些要点，但针对的是菜单（原理相同）。

我不会在生产中使用它，但希望代码可以给你一些关于如何实现上述一些要求的启发！

2021年2月7日

问题 2：如何让“关闭”按钮忽略制表符并仅使用空格键或回车键？

从这个问题开始，因为它更复杂，我认为它与“如何在菜单中捕获焦点”相同，因为其余的......

打开完整答案

视频

如今，视频是营销中最重要的元素之一。作为一名数字领域的从业者，你几乎不可避免地会以各种方式与视频打交道。所以，让我们看看能否让我们的视频尽可能地触达大众！

87. 为视频添加字幕

这不仅仅帮助了残疾人。

它还可以帮助说不同语言的人观看视频。

现在这也很重要，当人们在做其他事情时，很大比例的视频都是静音观看的（多注意力时代！）！

隐藏式字幕有多种格式，但几乎普遍接受的格式是SubRip（.srt 格式）文件。

88. 手动创建.srt 文件！

.srt 文件的格式非常直观。实际上，您可以用记事本轻松创建它们！

有更好的方法来为较长的视频创建隐藏式字幕，但对于 1-2 分钟的短视频，您最好手动完成！

格式

每套指令由3个部分组成：-

字幕编号（从1开始按顺序编号）
字幕出现在屏幕上的开始和结束时间
屏幕上显示的文本
每 3 个部分后面都有一个空白行

唯一需要一点时间来适应的是时间的格式：

hrs:mins:secs,ms

因此，要在视频的 1 小时 28 分 12 秒 115 毫秒处显示字幕，持续时间为 3.127 秒，操作如下：

01:28:15,115 -> 01:28:18,242

更完整的例子

因此文件的前几秒可能如下所示：

1
00:00:00,500 --> 00:00:03,172
InHu are amazing, they really know their stuff!

2
00:00:03,173 --> 00:00:06,494
They helped train our whole team on "accessibility first" thinking

3
00:00:06,495 --> 00:00:11,771
We reckon that we have saved a total of 18,000 GBP in staff time just from one training session

完成后，只需将文件保存为“.srt”文件并将其与视频一起上传。

不会太痛苦吧？（哦，时间不必精确到毫秒，对于大多数事情来说，最接近的 500 毫秒就可以了。

89. 不要手动操作

如果您的视频长度超过 1-2 分钟，那么 YouTube 可能是个不错的起点。

当你上传视频时，他们会自动为你处理字幕。良好的音频质量将大大提高自动生成结果的质量。

然后，您可以下载 .srt 文件并手动编辑，也可以使用 YouTube Studio 以更人性化的方式编辑字幕。例如，您可以浏览视频并实时查看更改。

可惜我没找到一篇关于 YouTube Studio 和 Closed Captions 的最新且写得好的文章。看来我得再写一篇了！

话虽如此，一旦你找到了隐藏式字幕编辑器，它使用起来就相当简单，所以希望你不需要教程就能上手！🤞

90. 现在你也有成绩单了！

如果您将视频发布到博客，那么一旦您创建了隐藏式字幕文件，您就可以快速创建 HTML 中的成绩单并将其添加到视频下方（或作为可访问的 PDF，或在单独的页面上...您选择！）。

对于有多个参与者的对话记录，<dl>前面的元素是一个很好的选择（使用<dt>表示说话者，使用表示<dd>他们所说的内容）。

91. 音频描述

虽然字幕为有听力障碍的人提供了更好的体验，但对于有视力障碍的人来说，字幕的帮助却不大（并不是说只有他们才喜欢有音频描述的视频）。

因此，当您制作视频时，请留出一些时间并花些心思来制作视频的音频描述版本！

解释音频描述的最简单方法是，在人们交谈之间有一个叙述者来描述场景。

有时人们说话之间没有足够的时间进行音频描述，这就是我建议从一开始就考虑这一点的原因。

你可以设计剧本，延长自然停顿。你也可以设计视频，让镜头更长，以便提供填充场景信息等的机会。

因此，有时你需要对同一视频片段制作两个不同的剪辑版本。这样，即使需要额外的台词，你也能在无音频描述的版本和有音频描述的版本中保持自然的节奏。

举个例子，《冰雪奇缘》预告片有音频描述怎么样？

我不想破坏你的兴致，但是最后 10 秒音频描述员的说话方式让我笑了！

92. 癫痫警告

还有一件事经常被忽视。如果你的视频包含闪烁的图像，请在视频开头添加癫痫警告。

在 YouTube 等网站上的视频描述或置顶评论中，添加任何可能引发癫痫发作的片段的时间戳也是一个好习惯。这样，那些可能受到快速闪光影响的人仍然可以欣赏视频，并跳过潜在的危险部分。

另一种选择是，您可以删除任何快速闪烁并上传替代版本。

最简单的方法就是打开黑屏，并显示“快速闪烁的图像已移除”或类似的文字。这样就能保持声音的同步和连贯。

怀阿里亚

93. WAI-ARIA 是最后手段！

Web 无障碍倡议 - 无障碍富互联网应用程序套件 ( WAI-ARIA ) 允许开发人员向 HTML 标记添加额外的语义信息。

WAI-ARIA 的黄金法则是它是最后的手段。

首先尝试所有能想到的语义化 HTML 元素。不可避免地，有时会遇到相关元素不存在，或者受到其他人设计决策的限制等等。WAI-ARIA 可以解决这些情况。

WAI-ARIA 还允许实现一些 HTML 本身无法实现的功能，尤其是在动态内容和复杂应用程序方面。

94. 了解你的`role`。

该role属性<div>允许我们为没有语义含义的元素（a或 a ）提供角色<span>，或者允许我们更改现有元素的角色。

role现代页面实际上并不需要许多属性，因为它们有直接的 HTML5 等效项。

但万一您继承了一个写得很差的项目，而无法更改元素，那么了解这些内容仍然是有用的。

HTML 5 元素	等效 ARIA 角色
`<article>`	`role="article"`
`<aside>`	`role="complementary"`
`<footer>`	`role="contentinfo"`
`<form>`	`role="form"`
`<header>`	`role="banner"`
`<main>`	`role="main"`
`<nav>`	`role="navigation"`
`<section>`	`role="region"`

因此，根据上表，优先考虑 HTML5 元素，如果无法使用相关的 HTML5 元素，则回退到 WAI-ARIA 角色。

95.`role="presentation"`是值得记住的。

可以将其视为重置。使用它role="presentation"可以从元素中删除语义含义。

我之前提到过几次使用方法role="presentation"，例如非常古老的遗留项目使用<table>s 进行布局或<img>纯粹用于装饰的元素。

还有其他用例，例如构建选项卡组件、应用程序菜单等。

应当注意的role="none"是是的替代品/同义词role="presentation"。

然而目前支持情况不佳。如果您想将其纳入您的标记中，建议的用法如下role="none presentation"。

在实现对 role="none" 有足够的支持之前，建议 Web 作者单独使用演示角色 role="presentation" 或冗余地使用无角色 role="none presentation" 作为后备。

来源：https ://www.w3.org/TR/wai-aria-1.1/#none

我现在只会坚持下去role="presentation"，即使在大型项目中，以后进行搜索和替换也是一件容易的事情。

96. 小部件和控件

在上一点中，您可能已经注意到，它role倾向于映射到 HTML5 标准中的部分/布局元素。

WAI-ARIA 也具有控制作用。

如果您正在设计一个非常复杂的自定义组件并且不可能使用本机元素，那么这些特别有用。

一个典型的例子可能是自定义多选控件（因为这是非常差且难以使用的少数原生 HTML5 元素之一），其中您使用标签来选择项目。

24a11y 的文章“选择你的毒药”是一个很好的例子，说明了设计自定义组件需要花多少心思。

事实上，由于内容太多，它最终分为两部分，因此这里是“选择你的毒药第 2 部分”。

您可以使用以下一些role来创建小部件和自定义控件：

role="button"
role="checkbox"
role="gridcell"
role="link"
role="menuitem"
role="menuitemcheckbox"
role="menuitemradio"
role="option"
role="progressbar"
role="radio"
role="scrollbar"
role="searchbox"
role="separator (when focusable)"
role="slider"
role="spinbutton"
role="switch"
role="tab"
role="tabpanel"
role="textbox"
role="treeitem"

我会让你去研究它们...或者也许我会在未来的文章列表中再添加一篇文章！

我觉得仅凭这篇文章，我的内容日历就已经排满了，一直到年底了😋🤣

97. 小心——`role="application"`适合喜欢痛苦的人！

这一点值得特别提一下。你可能会想：“我正在开发一个 Web 应用程序，所以这个角色说得通吧？”

哦不，事情并不是看上去的那样。

它的作用role="application"是将全部控制权交给您（开发人员）。

听起来不错吧？哦不，你不知道浏览器自动为我们提供了多少支持。

键盘、触摸和鼠标输入全部由您掌控。每个按键都需要重新映射到您想要的行为。Tab除非您指定，否则将不再在可聚焦项目之间循环，并且Enter不会提交表单等。

老实说，除非您是一位拥有多年经验且背后有优秀团队的超级明星无障碍专家......否则最好不要管这件事！

98.`aria-live`

实时区域是 WAI-ARIA 具有而 HTML 所不具备的功能之一。

它们允许我们通知屏幕阅读器页面的变化、重要信息等。

我们为此使用该aria-live属性。

尽管建议各不相同，并且（再次）对于像这样的列表来说，建议太宽泛了，但最重要的建议是aria-live在大多数情况下每页只包含一个区域。

然后使用应用程序范围的消息队列向数组添加更新。将这些消息添加到标记的元素，aria-live每个消息之间略有延迟。

由于没有冲突的活跃区域，维护起来更加轻松。它还能提供更强大的体验（因为多个活跃区域同时尝试发布通常效果不佳）。

最后需要注意的是，它aria-live有几个不同的设置。它们会影响该aria-live地区公告的“力度”。

aria-live="polite"意味着屏幕阅读器将尝试等待，直到使用屏幕阅读器的人不再阅读任何内容。

aria-live="assertive"更具攻击性。它会尽可能中断当前正在读出的内容。请谨慎使用！

99.`aria-expanded`

aria-expanded是另一个常见属性。

你可以使用它来让辅助技术 (AT) 知道某个区域是折叠还是展开。它位于控制展开元素的项目上。

这听起来很复杂，但其实不然。如果你有一个可以<button>打开菜单的，那么它<button>应该有一个aria-expanded属性来指示菜单是展开还是折叠。

因此，如果菜单当前处于打开状态（展开），则按钮将具有aria-expanded="true"。

如果您单击按钮并且菜单关闭，您将使用 JavaScript 将属性更改为aria-expanded="false"（或完全删除属性）以让 AT 知道状态的变化。

一般来说，如果一个元素控制另一个元素的打开和关闭，它应该具有aria-expanded属性来指示当前状态。

100.`aria-controls`

100！哇，你根本不知道花了多长时间才到这里！

使用时，aria-expanded您几乎总是希望将它与一起使用aria-controls。

这向屏幕阅读器发出信号：“当我与它交互时，我将影响页面上的另一个元素”。它建立了两个元素之间的关系，而这种关系无法仅由 DOM 结构来确定。

对于使用 AT 的人来说，好处是他们的 AT 通常具有快捷方式，可以让他们直接跳转到受影响的目标元素aria-controls。

101. 最后的最佳建议 - 我的第一条无障碍建议。

人不是用户。

您是否注意到，在整篇文章中我从来没有使用过“用户”这个词来描述某人。

16,800 多个单词，我总是说“残疾人”而不是“残疾用户”，或者说“使用屏幕阅读器的人”而不是“屏幕阅读器用户”。

从你的词汇表中删除“用户”这个词。

是的，我知道这很难。

但是“用户”这个词会把你和使用你产品的人区分开来。用“人”这个词会在你的脑海里植入一个信息：你的工作影响着人们。

您不认为我在这篇文章的开头谈论“角色”，最后却谈论“以人为本的思维”是巧合吗？

意识到您的设计、代码等会直接影响数百、数千甚至数百万人，这会对您进行开发的方式产生真正的影响。

如果你认为自己的行为不会影响那么多人，那么，每六人中就有一人是残障人士。每十人中就有一人残障，这会影响他们与电脑和数码产品的互动方式。也就是说，每十人中就有一人受到无障碍设施不完善的影响。

残疾人是世界上最大的“少数群体”……但他们却被忽视了。

97.4％的网站存在我们可以自动检测到的可访问性错误（请记住，这仅占所有错误的 40％！）。

这意味着至少97.4% 的网站都存在一些障碍，使得它们比实际需要的更难使用。

继续吧，帮助别人的同时，也帮助自己

为什么不加入那2.6%打造高质量、包容性产品的队伍呢？为什么不成为你所在领域的领导者呢？

别忘了，无障碍知识和技能在工作岗位上正变得越来越重要。尤其是如果你申请的公司想要承接政府合同的话。

总之：通过学习如何创建可访问的网站和网络应用程序，您可以提高您的工作前景和收入潜力……并且您将在此过程中对世界产生积极的影响。

继续，学习如何构建可访问的产品，在帮助自己的同时帮助他人。

这不就是双赢的定义吗？

文章来源：https://dev.to/grahamthedev/101-digital-accessibility-tips-and-tricks-4728

101 个数字无障碍 (a11y) 技巧和窍门

101 个数字无障碍 (a11y) 技巧和窍门

极客统计数据：

内容

开发者提示（和一般提示）

1. 思考人物角色会有所帮助

2. 一些很棒的资源

3. 坚固

4. 学习使用屏幕阅读器

5. 准备一份清单

6. 当心那些声称可以为您修复可访问性的内容覆盖！

关于 AccessiBe 辩论你需要知道的一切

Thuy Doan ・ 21年7月25日

7. 法律事务

8. 无障碍设施的成本非常低。

文档结构

9.标题非常重要

10. 不要跳过标题级别

11. 有 7 个标题级别！

12.<h1>每页一个

13. 地标也很重要

14.标题和章节

15. 为页面添加描述<title>

16. DOM 顺序应与视觉顺序一致

17. 焦点顺序应与 DOM 顺序一致

18. 不要使用表格进行布局

19. 链接文本、按钮文本和标签应该是唯一的

表格

20. 标签

文章已不再可用

21. 标签应始终可见

22. 将标签与输入关联。

23. 标签应在视觉上靠近输入。

24. 组相关字段

25. 允许人们审查信息

26. 错误应该正确关联

27. 使用自动完成功能

28. 不要禁用粘贴功能

图片

29.alt属性

30. 不要alt在图片中添加文字

31. 不要在alt属性中使用“图片”

32.<figure>适时使用

33. 对于复杂的图形、图表等，可以使用其他方法

34. 内联 SVG 没有alt属性

语言

35. 使用lang文档中的属性

36. 使用lang语言改变的属性。

37 避免使用行话和复杂的词语

38. 缩写和首字母缩略词

39. 提供签名选项

导航

40. 拥有 HTML 站点地图

41.键盘导航

42.减少制表位

43. 添加跳过链接以绕过网站导航

44.您可以拥有多个跳过链接！

文章已不再可用

45. 添加内容部分

46.处理多个导航区域

47. 面包屑

48.这是陷阱！

演示和设计

49. 文本颜色对比

快速提示 1 - 开发工具

快速提示 2 - 检查任意位置的对比度

50. 控件对比

51. 可见的焦点指示器

52. 字体大小

53. 字体单位（rem和em单位）

54. 行高

55. 段落间距

56. 行高、段落间距等

57. 行长度

58. 不要让文字两端对齐

59. 不要使用大写字母

60. 屏幕阅读器仅显示文本

那么我们什么时候使用视觉隐藏文本？

61.aria-hidden

那么我们什么时候使用aria-hidden？

12.`<h1>`每页一个

15. 为页面添加描述`<title>`

29.`alt`属性

30. 不要`alt`在图片中添加文字

31. 不要在`alt`属性中使用“图片”

32.`<figure>`适时使用

34. 内联 SVG 没有`alt`属性

35. 使用`lang`文档中的属性

36. 使用`lang`语言改变的属性。

53. 字体单位（`rem`和`em`单位）

61.`aria-hidden`

那么我们什么时候使用`aria-hidden`？

`aria-hidden`并且“视觉隐藏”往往会粘在一起。

64. 别忘了`::selection`

`prefers-reduced-motion`

66（6）.`<summary>`魔鬼`<detail>`在

67.`<time>`振作起来

68. A`<button>`是一个按钮。

69. `<dl>`、`<dt>`和`<dd>`元素组成了很棒的三重奏（giggidy）

`alt`70.为图像添加属性

属性`scope`

别忘了`<caption>`

75. `<thead>`，`<tbody>`和`<tfoot>`

76. `<colgroup>`（和`<col>`）

85. 不要忘记`:visited`国家

94. 了解你的`role`。

95.`role="presentation"`是值得记住的。

97. 小心——`role="application"`适合喜欢痛苦的人！

98.`aria-live`

99.`aria-expanded`

100.`aria-controls`