首先，让我们快速总结一下网页可访问性的相关内容。

简单来说，网页可访问性是指确保没有障碍阻止残障人士与网站及其内容进行交互或访问。这些残障可能包括：

• 视力障碍（包括失明）
• 运动功能障碍、手部使用困难或无法使用手部，例如帕金森病
• 听力障碍（如耳聋或听力受损）
• 癫痫发作，例如由视觉闪烁或闪光效果引发的光敏性癫痫
• 认知障碍

---

为什么它很重要

根据世界卫生组织（WHO）的数据，全球有15%的人口患有某种形式的残疾；这意味着超过 10亿人 可能会遇到访问和使用您网站的问题。

拥有一个可访问的网站不仅有助于残障人士，还能提升您的SEO排名，从而在业务上带来帮助。总体而言，它对多个方面都有积极影响。

---

提升可访问性

剩下的唯一问题是：我们该如何提升可访问性？这时就轮到 WAI-ARIA（可访问性富互联网应用程序套件） 登场了。它通过引入一组新的HTML属性，定义了一种使网页对残障人士更易访问的方法。这些属性可以应用于元素，以提供额外的语义信息，并在可访问性不足的地方加以改善。该规范定义了三个主要特性：

Roles

这些定义了元素的类型或功能。其中许多角色与元素本身的语义重复。例如：

1<nav role="navigation"></nav>

我们有一个导航元素。它本身已经描述了其用途，因此添加 role 属性只是重复了语义。

Properties

属性可用于为元素赋予额外的意义或语义。以 aria-labelledby 属性为例：

1<span id="contact-info">联系信息</span>
2
3<span id="email">电子邮件：</span> <input type="email" aria-labelledby="contact-info email" />
4<span id="name">姓名：</span> <input type="text" aria-labelledby="contact-info name" />

与 <label> 标签不同，我们可以为 aria-labelledby 属性指定多个ID，并用它替代 <label>。

States

这些是特殊的属性，用于定义元素的状态。以 aria-disabled="true" 为例。它告诉屏幕阅读器，该输入当前处于禁用状态。属性 和 状态 的区别在于，状态可以在应用程序的生命周期中发生变化，而属性则保持不变。

需要强调的是，aria 属性不会以任何方式影响页面结构。它们仅向辅助技术、浏览器以及爬取页面的搜索引擎提供有关网站的附加信息。

---

设置 Axe

Axe 是一个用于自动化网页UI测试的可访问性引擎。Axe 拥有不同的规则类型，适用于不同的 WCAG 等级，以及一系列最佳实践，可以帮助您识别常见的可访问性问题。

我们可以将其集成到 DevTools 中，作为 Chrome 插件来调试网站的可访问性问题，或者将其接入开发流程，在问题发生前就提前发现违规。

在本课中，我们将了解如何将其集成到 Cypress 中，以检测任何可访问性问题。

---

如何设置

幸运的是，我们身处 JavaScript 世界，几乎什么都有现成的包。Cypress 的 Axe 也不例外。在继续之前，我们需要安装 cypress-axe 包以及 Axe 的核心库 (axe-core)：

1npm install --save-dev axe-core cypress-axe

如果您使用 TypeScript，请确保在 tsconfig.json 的 types 属性中添加 cypress-axe 类型，同时也要包含 cypress：

1{
2    "compilerOptions": {
3        ...
4        "types": ["cypress", "cypress-axe"]
5    },
6    ...
7}

要在 Cypress 中使用 Axe，我们需要在 support 文件夹中的 index.js 文件里导入库以包含 Axe 命令：

1// 在导入自定义命令之后，确保也导入 `cypress-axe`。
2import './commands'
3import 'cypress-axe'

最后，要真正开始使用 Axe，我们需要通过 cy.injectAxe 命令将其注入到适当的测试中：

1beforeEach(() => {
2    cy.visit('https://webtips.dev');
3    cy.injectAxe();
4});

请务必在使用 cy.visit 命令访问 URL 之后再注入 Axe。只要在 cy.visit 命令之后，我们也可以在任何测试用例中注入 Axe。