想让您的 Angular 网站对所有人无障碍访问吗？这里就是您要找的地方！
让您的应用实现无障碍功能意味着所有用户（包括有特殊需求的用户）都可以使用它并理解内容。根据世界卫生报告，超过十亿人（约占世界人口的 15%）患有某种形式的残疾。因此，无障碍功能是任何开发项目的优先事项。
在这篇文章中，您将学习如何将 codelyzer 的无障碍功能检查添加到 Angular 应用的构建流程中。这种方法让您可以在编码时直接在文本编辑器中捕获无障碍功能错误。
使用 codelyzer 检测不可访问的元素
codelyzer 是一个位于 TSLint 之上的工具，用于检查 Angular TypeScript 项目是否遵循一组 lint 规则。使用 Angular 命令行界面 (CLI) 设置的项目默认包含 codelyzer。
codelyzer 具有 50 多个规则，用于检查 Angular 应用程序是否遵循最佳实践。其中，大约有 10 个规则用于强制执行无障碍功能标准。要了解 codelyzer 提供的各种无障碍功能检查及其原理，请参阅Codelyzer 中的新无障碍功能规则文章。
目前，所有无障碍功能规则都处于实验阶段，默认情况下处于禁用状态。您可以通过将它们添加到 TSLint 配置文件 (tslint.json) 来启用它们
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
...,
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true,
"template-click-events-have-key-events": true,
"template-mouse-events-have-key-events": true,
"template-no-autofocus": true,
"template-no-distracting-elements": true
}
}
TSLint 可与所有流行的文本编辑器和 IDE 配合使用。要在 VSCode 中使用它，请安装 TSLint 插件。在 WebStorm 中，TSLint 默认启用。对于其他编辑器，请查看 TSLint README。
设置好 codelyzer 的无障碍功能检查后，您将在编码时获得一个弹出窗口，显示 TypeScript 文件或内联模板中的无障碍功能错误
要对整个项目（包括外部模板）执行 lint，请使用 ng lint 命令
补充 codelyzer
Lighthouse 是另一个可用于在 Angular 应用程序中强制执行无障碍功能实践的工具。codelyzer 和 Lighthouse 之间的主要区别在于执行检查的时间。Codelyzer 在开发时静态分析应用程序，而无需运行它。这意味着在开发期间，您可以在文本编辑器或终端中获得直接反馈。相比之下，Lighthouse 实际上会运行您的应用程序并使用动态分析执行一系列检查。
这两种工具都可以成为您的开发流程的有用组成部分。Lighthouse 具有更好的覆盖率（考虑到它执行的检查），而 codelyzer 则允许您通过在文本编辑器中获得持续反馈来更快地迭代。
在持续集成中强制执行无障碍功能检查
在持续集成 (CI) 中引入静态无障碍功能检查可以极大地增强您的开发流程。借助 codelyzer，您可以通过在每次代码修改时（例如，对于每个新的拉取请求）运行 ng lint 来轻松强制执行某些无障碍功能规则或其他实践。
这样，即使在您进行代码审查之前，您的 CI 也可以告诉您是否存在任何无障碍功能违规行为。
结论
为了提高 Angular 应用的无障碍功能
- 在 codelyzer 中启用实验性无障碍功能规则。
- 使用 Angular CLI 对您的整个项目执行无障碍功能 lint。
- 修复 codelyzer 报告的所有无障碍功能问题。
- 考虑在运行时使用 Lighthouse 进行无障碍功能审核。