可访问性

docs.scrimba.com

人们以多种方式访问网络。有些人看着屏幕并移动鼠标。有些人看不到屏幕，而是通过听它读出来的内容。有些人从不触摸鼠标，而是用键盘、语音或按下的开关来浏览页面。可访问性是构建所有人都能使用的页面的实践，其中大部分归结为以 HTML 应有的方式编写 HTML。

为什么可访问性很重要

**可访问性**意味着确保每个人都可以使用你的页面，无论他们的环境如何以及他们如何浏览。某个人可能看不到屏幕，而是通过大声朗读页面的软件来听。某个人可能不使用鼠标，而是用键盘浏览页面。某个人可能需要更大的文字或更强的颜色才能舒适地阅读。

想象一栋建筑，台阶旁边有一个坡道。坡道帮助无法爬楼梯的人，但对任何能够的人都没有任何影响。可访问的 HTML 是同样的想法：它为更多人打开了页面，而不会让任何人受到伤害。

令人欣慰的是 HTML 一开始就是可访问的。通过为每条内容使用正确的元素，你可以免费获得大部分。

可访问性，通常缩写为 a11y（一个"a"，然后是十一个字母，然后是"y"），是指你的页面能够在人们访问网络的全系列方式中工作：朗读页面的屏幕阅读器、仅使用键盘导航、语音控制、屏幕放大和减少颜色或高对比度显示模式。

最有帮助的实际框架是：HTML 将可访问性作为起始位置，而不是你在最后添加的东西。大部分工作是选择正确的元素，而不是撤销浏览器已经为你做的事情。失败往往来自一小组原因：从通用元素重建的自定义小部件、没有标签的表单字段、弱颜色对比度和仅响应鼠标的行为。

可访问性是使用 辅助技术（帮助某人操作计算机的软件或硬件，例如朗读页面的屏幕阅读器、按下的开关设备而不是点击或语音控制）的人是否可以感知、操作和理解你的页面。参考标准是 WCAG（Web 内容可访问性指南），围绕四项原则组织：内容应该是可感知、可操作、可理解和稳健的。

有两个值得记住的后果。首先，辅助技术依赖的相同格式良好的结构也是搜索引擎和其他机器从 DOM（浏览器的页面内存中模型）读取的内容，因此可访问性和 SEO 朝向同一方向而不是竞争你的时间。其次，在许多地方，可访问性对于面向公众的网站是法律要求，而不是一个很好的东西。思考所有这一切的有用方式：一个可访问的页面大多是一个构建正确的页面。这一章中的几乎所有内容都是按预期使用的标准 HTML。

Juno为什么可访问性很重要 可访问性意味着每个人都可以使用你的页面，无论他们是谁以及他们如何访问。好的部分是 HTML 在你为这项工作选择正确的元素的那一刻就给了你大部分。想象楼梯旁的坡道：更多人进来，没有人更糟。

Juno为什么可访问性很重要 可访问性是你的页面对屏幕阅读器、键盘、放大器和介于两者之间的每个人都有效。你从一个好的地方开始，因为 HTML 本来就可以访问，所以大多数失败来自使用自定义小部件和缺少标签来撤销这一点。使用正确的元素进行构建，你已经完成了大部分工作。

Juno为什么可访问性很重要 标准是 WCAG 及其四项原则：可感知、可操作、可理解、稳健。帮助屏幕阅读器的同一结构有助于搜索爬虫读取 DOM，所以这不是对你时间的单独税收。将本章的其余部分视为按预期使用的普通 HTML，因为大多数都是这样。

语义 HTML 作为基础

为可访问性能做的最有效的单一事情是使用与内容含义相匹配的元素，而不是通用的元素来对外观进行样式设置。

语义 HTML 意味着选择一个标签来表示内容 是什么，而不是它 看起来 像什么。标题使用 <h1> 到 <h6>。按钮使用 <button>。链接使用 <a>。列表使用 <ul> 或 <ol>。这些中的每一个都已经携带屏幕阅读器可以宣布的含义，因此听众知道"这是一个按钮"或"这是一个标题"而无需看到它。

这就像搬家时标记盒子。标有"厨房"的盒子有助于携带它的任何人，不仅是包装它的人。语义标签以同样的方式标记你的内容，所以浏览器和辅助技术知道每个部分是什么。

在实践中，这意味着当你想要一个按钮时使用 <button>，而不是一个你已经样式设置为看起来像一个的 <div>。<div> 可以看起来完全相同，但它没有说它是什么。语义 HTML 章节介绍了完整的集合。

语义元素附带已经附加的行为和含义。<button> 是可聚焦的，响应 Enter 和 Space，并被宣布为按钮。<nav> 标记一个导航区域。标题 <h1> 到 <h6> 形成一个轮廓，屏幕阅读器用户可以跳过，就像一个看得见的读者略过一个部分一样。

节省最多麻烦的规则是：在构建自己的元素之前使用原生元素。一个带有点击处理程序的 <div role="button" tabindex="0"> 可以被制作工作，但你正在手动重新实现焦点、键盘支持和角色，其中一个往往会遗漏。真正的 <button> 一次性给你所有这些。地标元素（<header>、<nav>、<main>、<aside>、<footer>）在页面规模上做同样的工作：它们让屏幕阅读器用户直接跳到一个区域，而不是听上面的所有内容。语义 HTML 章节涵盖了每一个。

语义 HTML 是基础，因为浏览器将每个语义元素映射到 可访问性树 中的一个角色（辅助技术读取的页面的剥离版本，在下面的 ARIA 部分中完整描述）。<button> 获得按钮角色、其焦点行为和其键盘处理，无需你的任何工作。从 <div> 重建它，你不继承任何这些：你现在拥有可聚焦性、关键处理和宣布的角色手动，每个间隙对某个人来说都是一个缺陷。

两个习惯承载大部分权重。给标题级别一个真实的结构：页面一个 <h1>，然后是嵌套的 <h2> 和 <h3> 而不跳过级别，因为屏幕阅读器用户按标题导航，从 <h2> 跳到 <h4> 读作一个丢失的部分。并使用地标元素（<main>、<nav>、<header>、<footer>、<aside>）来公开可导航的区域。认出的失败模式是"div 汤"，一个几乎完全由 <div> 和 <span> 组成的页面：它完美地呈现并向辅助技术公开几乎什么都没有，因为这两个元素根本不携带任何角色。

Juno语义 HTML 作为基础 为内容选择标签 *是什么*，而不是它 *看起来* 像什么：<button> 用于按钮，<h1> 用于标题，<a> 用于链接。每一个都已经告诉屏幕阅读器它是什么，所以你免费获得这个。样式化的 <div> 可以看起来相同，仍然什么都没说。

Juno语义 HTML 作为基础 原生元素带有已经连接的焦点、键盘支持和一个发言角色，所以 <button> 优于一个假装是一个的 <div>。在重建之前使用真正的元素，并依赖地标，如 <nav> 和 <main>，以便人们可以跳过。这就是大部分工作。

Juno语义 HTML 作为基础 每个语义元素在可访问性树中映射到一个角色，所以 <button> 为你提供角色、焦点和密钥一起，而 <div> 为你提供所有三个的账单。保持标题顺序，没有跳过的级别，因为人们按它们导航。Div 汤呈现良好并告诉辅助技术什么都没有，这是整个问题。

文本替代、标签、焦点和键盘

某些内容不能自己说话。图像对屏幕阅读器不可见，直到你描述它。表单字段是一个猜测，直到它被标记。只响应鼠标的页面排除了所有不使用鼠标的人。这四个区域是一点点关心就能走很长路的地方。

少数可靠的习惯涵盖了大部分内容：

• 图像需要替代文本。 alt 属性为任何看不到图片的人描述图片。如果图像仅用于装饰，空的 alt="" 告诉屏幕阅读器跳过它。

<img src="red-fox.jpg" alt="一只红色狐狸蜷缩在雪中睡觉">

• 表单字段需要标签。 <label> 告诉访问者和屏幕阅读器在字段中输入什么。

<label for="email">电子邮件地址</label>
<input id="email" type="email">

• 按钮和链接需要清晰的文本。 "阅读更多"本身在上下文中阅读时不清楚；"阅读有关票价的更多信息"自己理解。
• 键盘顺序应与阅读顺序匹配。 有人按 Tab 键通过页面按照元素在你的 HTML 中出现的顺序移动，所以保持该顺序合理。

图像和媒体和表单和输入章节更深入地介绍了替代文本和标签。

将每个表单控制与 <label> 相关联。可靠的方式是将标签的 for 属性与输入的 id 匹配：

<label for="postcode">邮编</label>
<input id="postcode" type="text" name="postcode">

现在点击标签聚焦字段，屏幕阅读器在字段获得焦点时宣布标签。表单和输入章节涵盖了变化。

对于 替代文本，描述用途，而不是像素：alt="公司徽标" 优于颜色和形状的列表，装饰图像取一个空的 alt="" 以便它被跳过而不是作为文件名读取。

焦点顺序遵循 DOM 中元素的顺序，所以保持你的源顺序与视觉阅读顺序匹配。避免正 tabindex 值（tabindex="1" 及以上）；它们发明一个单独的制表符序列，很难保持正确。使用 tabindex="0" 将自定义控制添加到自然顺序，使用 tabindex="-1" 通过脚本使某些内容可聚焦但不通过 Tab。

对于键盘可操作性，规则很简单：你用鼠标可以做的一切必须使用键盘工作。如果点击打开菜单，Enter 也应该。并保持一个可见的焦点轮廓，以便键盘用户可以看到他们的位置。颜色对比在这里也很重要：WCAG 要求正常文本及其背景之间的对比率至少为 4.5:1，永远不要依赖颜色独自承载含义，因为不是每个人都区分相同的颜色。

这四个区域都是 DOM 必须承载含义的地方，对于一个看不见的鼠标用户来说，视觉布局承载这些含义。

标签。 一个 <label> 通过 for/id 或通过包装输入与控制相关联，给该控制它的 可访问名称（辅助技术为元素宣布的文本）。没有标签，屏幕阅读器读取字段的类型，什么都没有关于其目的。占位符文本不是标签：它在输入时消失，并且宣布不一致。

文本替代。 alt 是 <img> 的可访问名称。按目的而不是外观编写它。装饰图像取 alt="" （空，存在但空白），以便它从可访问性树中删除；完全省略 alt 是不同的，一些屏幕阅读器回退到读取文件名，这对任何人都没有帮助。

焦点。 焦点顺序是 DOM 顺序，除非你覆盖它，正 tabindex 几乎总是一个错误，因为它构建了一个你必须对抗视觉布局维护的第二个制表符序列。使用 tabindex="0" 将自定义控制折叠到自然顺序中，使用 tabindex="-1" 使元素仅通过脚本可聚焦，当你在操作后移动焦点时需要这个。保持一个可见的焦点指示器：永远不要设置 outline: none 而不提供替代品，或者键盘用户会失去他们的位置。也要注意键盘陷阱（键盘用户可以移入但不能移出的焦点），WCAG 特别指出这一点。

键盘和对比。 每个操作都应该可以通过键盘以逻辑顺序到达和操作。对于对比，WCAG AA 要求正文上 4.5:1，大文本和控制视觉边界上 3:1，意义应该永远不要只依赖颜色。仅用红色标记的必填字段对看不到这种差异的人是不可见的；将其与文本或图标配对。

Juno文本替代、标签、焦点和键盘 四个小习惯承载大部分内容：给图像一个 alt，给表单字段一个 <label>，写出自己有意义的按钮和链接文本，并保持制表符顺序与阅读顺序匹配。它们都不需要很长时间。装饰图像获得一个空的 alt="" 以便它们被跳过。

Juno文本替代、标签、焦点和键盘 将每个输入与带有匹配 for 和 id 的 <label> 连接，并按目的写 alt，为装饰性留空。保持焦点顺序为 DOM 顺序并跳过正 tabindex。要记住的线条：鼠标可以做的任何事情，键盘也必须做，并检查你的对比达到 4.5:1。

Juno文本替代、标签、焦点和键盘 标签和 alt 设置元素的可访问名称，所以占位符不是标签，缺少 alt 也不是空的。将焦点保留在 DOM 顺序中，避免正 tabindex，永远不要剥离焦点轮廓而不替换它。在文本上达到 4.5:1，永远不要让颜色是唯一的信号，否则仅红色的必填标记到达任何看不到红色的人。

ARIA，以及为什么不首先求助于它

有一组 HTML 属性是专门为可访问性制作的，称为 ARIA。它在正确的地方很有用，它是平台中最被滥用的部分之一，因此值得理解它的作用和何时置之不理。

ARIA 代表可访问的富互联网应用程序。它是一组额外的属性，你可以添加到元素中，以告诉辅助技术更多关于它的信息。这个名字让它听起来像第一个要使用的工具，它通常是最后一个。

原因很简单：ARIA 可以描述的大部分内容，HTML 已经自行说出。<button> 已经被宣布为按钮。将 role="button" 添加到它不会改变任何内容。如果你发现自己为一个元素添加 ARIA 来解释它 是什么，那通常是一个信号，可以交换已经说出它的纯 HTML 元素。

想象一个粘贴到移动盒子上的便签。如果盒子已经印有"厨房"，阅读"厨房"的粘贴便签只会增加混乱。为没有自己标签的盒子保存便签。ARIA 用于 HTML 没有元素的页面部分，这比听起来要少见。

ARIA 向元素添加三种信息：角色（它是什么，如 role="dialog"）、状态（其当前状况，如 aria-expanded="false"）和属性（额外关系，如 aria-describedby 指向一些帮助文本）。屏幕阅读器使用这些来宣布自定义小部件，这些小部件没有原生 HTML 等价物，如制表符面板或滑块。

要领导的指导是 ARIA 的第一条规则：如果原生元素已经完成工作，请不要使用 ARIA。原生 <button> 每次都优于 <div role="button">，因为原生元素带来行为而 ARIA 属性只带来标签。更糟的是，一个错误或陈旧的 ARIA 属性比没有更差，因为它覆盖了浏览器本来会说的内容。在错误的元素上放置 aria-hidden="true" 并且你隐藏了屏幕阅读器用户的真实内容，而它坐在屏幕上可见。当你构建 HTML 没有元素的小部件时，请求助 ARIA，然后遵循已建立的模式而不是发明属性。

从 ARIA 编辑的东西开始。可访问性树 是浏览器在 DOM 旁边建立的平行结构。对于每个元素，它记录一个 角色（元素是什么：按钮、链接、标题）、它的 状态和属性（条件和关系，如 aria-expanded、aria-checked 或 disabled）和它的 可访问名称和描述（被宣布的文本）。辅助技术读取这棵树，而不是你的 CSS 和不是原始 HTML。

ARIA 是直接编辑该树的词汇：角色（role="tablist"）、随时间变化的状态（aria-selected="true"）和描述更稳定关系的属性（aria-labelledby、aria-controls）。**ARIA 的第一条规则**是如果原生 HTML 元素或属性已经给你所需的角色、状态或属性，使用它并且不添加 ARIA。原因是 ARIA 仅改变可访问性树，自己不添加任何行为。<div> 上的 role="button" 使屏幕阅读器称之为按钮，但它不授予可聚焦性、Enter 或 Space 处理和禁用支持。你会自己添加这些中的每一个，你忘记一个那一天，你有一个宣布为按钮但不像一个的控制，这比诚实的 <div> 更糟。

几条规则使 ARIA 不会造成它旨在防止的伤害。更倾向于原生元素。不要覆盖原生语义（没有 role="heading" 在 <button> 上）。不要在标有 aria-hidden="true" 的子树内放置交互元素，否则你会使屏幕阅读器看不到的可聚焦控制。并保持状态与你的 JavaScript 同步，因为陈旧的 aria-expanded 向用户撒谎。当你确实需要 ARIA 时，从 WAI-ARIA 编写实践中建立，常见小部件的已发布模式，而不是从头开始组成属性。为了测试任何这一点，浏览器的可访问性检查器显示给定元素的计算角色、名称和状态，这正是辅助技术将接收的。

JunoARIA，以及为什么不首先求助于它 ARIA 是一组额外的属性，向辅助技术描述元素。它听起来像第一件要做的事，通常是最后的事，因为真正的 <button> 已经说它是一个按钮。为 HTML 没有元素的页面的罕见部分保存 ARIA，并保持其他一切普通。

JunoARIA，以及为什么不首先求助于它 ARIA 为 HTML 没有元素的自定义小部件添加角色、状态和属性。ARIA 的第一条规则是在原生元素已经完成工作时跳过它，因为错误或陈旧的属性比没有更糟。如果你将 <button> 标记为按钮，停止并使用按钮。

JunoARIA，以及为什么不首先求助于它 ARIA 编辑可访问性树：角色、状态和属性，仅此而已，所以它永远不会添加行为。这就是 ARIA 第一条规则的全部原因，因为 <div> 上的 role="button" 宣布一个按钮，没有键也没有焦点，直到你构建它们。保持状态与你的 JavaScript 同步，当你确实需要一个小部件时，复制一个已发布的模式而不是发明属性。

快速自我审计

你不需要专家软件来捕捉最常见的问题。使用机器上已有的工具进行一些检查可以找到大多数，它们只需要几分钟运行。

这是你可以在任何页面上运行的简短检查清单：

• 放弃鼠标并按 Tab。你可以以有意义的顺序到达每个链接和按钮吗？你可以用 Enter 激活它们吗？
• 每个图像都有 alt 属性吗？
• 每个表单字段都有 <label> 吗？
• 你的按钮和链接在自己阅读时仍然有意义吗？
• 文本是否清晰地抵抗背景阅读？

在你自己的页面上运行这些是快速的，并且捕捉人们最经常遇到的问题。如果 Tab 键卡在某个地方，或者图像没有 alt，你找到了值得修复的东西。

将一个可重复的传递构建到你的工作流中：

1. 键盘。 Tab 浏览整个页面。每个交互元素都应该可以到达，按合理的顺序，有一个可见的焦点指示器，并且可以用 Enter 或 Space 操作。如果焦点消失或卡住，在任何其他事情之前修复这个。
2. 标题和地标。 确认有一个 <h1>，标题不跳过级别，主要区域使用 <main>、<nav> 和其他地标。
3. 名称。 每个图像都有一个 alt，每个控制都有一个标签，每个链接和按钮在上下文中清晰地阅读。
4. 对比。 在你的浏览器开发工具中检查文本与其背景，这报告比率并标记任何失败的内容。

自动化检查器，如 Chrome 开发工具中的 Lighthouse 面板或 axe 浏览器扩展，捕捉问题的有用份额，但只是份额。它们无法判断替代文本是否有意义或制表符顺序是否有意义，因此手动键盘传递保持必要。

一个有效的审计结合了自动和手动传递，因为自动化只涵盖部分地面：工具可靠地找到缺少 alt、缺少标签和对比失败（大约三分之一的 WCAG 标准），它无法判断替代文本是否准确或制表符顺序是否逻辑。

• 自动化。 首先运行 axe 或 Lighthouse 来清除机械失败。
• 键盘。 放弃鼠标并 Tab 通过，确认可达性、逻辑顺序、可见焦点环、完全可操作性以及焦点无法出来的地方。这个传递单独使大多数自定义小部件缺陷出现。
• 屏幕阅读器。 打开一个（VoiceOver 通过 Cmd+F5 与 macOS 一起提供，NVDA 是 Windows 上的免费下载，TalkBack 内置于 Android 中）并听通过几个关键流程。你在检查名称是否被宣布，角色是否正确，以及状态更改是否被实际发言。
• 可访问性树。 浏览器的开发工具显示任何元素的计算角色、名称和状态，这告诉你辅助技术将真正接收什么，独立于元素的外观。

即使自动化工具报告绿色，也要运行键盘和屏幕阅读器传递，因为他们无法检查的东西是最影响真实人使用页面的东西。

Juno快速自我审计 放弃鼠标并 Tab 通过你的页面：你可以以合理的顺序到达和使用所有内容吗？然后检查每个图像是否有 alt，每个字段是否有 <label>，文本是否清晰地针对背景阅读。几分钟就能捕捉人们最遇到的问题。

Juno快速自我审计 将其作为常规：Tab 通过可达性和顺序，检查一个 <h1> 和没有跳过的标题，确认图像和控制上的名称，并在开发工具中读取对比。自动化工具，如 axe 和 Lighthouse，有帮助，但它们只捕捉部分，所以继续手动进行键盘传递。

Juno快速自我审计 自动化找到缺少的 alt、缺少的标签和对比，大约三分之一的 WCAG，并判断没有关于意义或顺序的东西。所以将其与键盘传递配对、通过屏幕阅读器听、并查看可访问性检查器以查看计算角色和名称。工具无法运行的检查是最重要的，所以即使报告是绿色的，也自己运行它们。