在GoogleIO2021期间，我们发布了一个新的Angular codelab。本文将介绍用于构建更多无障碍应用程序的十个工具，然后通过代码实验室进行实践，提升技能。
构建更易于访问的Angular应用程序
可访问性是网络开发的一个重要部分——确保用户能够感知、理解、导航并与应用程序互动。开发可访问的应用程序从构思开始一直到部署，所以让我们来看看你如何开始将a11y纳入你的应用程序吧！
1.学习测试无障碍性的工具
在目前的网络状态下，手动测试无障碍性是强制性的。从学习使用电脑内置的屏幕阅读器进行导航开始。
我们还可以使用Lighthouse、axe和linting等自动化工具来抽查特定的问题，如缺失的alt文本、标签和颜色对比。
我们建议在你的.eslintrc.json中添加以下规则，这些规则适用于可访问性。
2.定义独特的页面标题
提供独特、简洁的页面标题有助于使用a11y服务的用户快速了解网页的内容和目的。为了解决这个问题，你可以使用Angular的Title服务来为你的每个页面定义独特的标题。
改进前。一个应用程序打开了三个不同的页面，页面标题完全相同
改进后。一个具有独特页面标题的应用程序
3.确保足够的色彩对比
你的设计可能看起来很酷，但如果有色盲等视觉障碍的人无法阅读你的内容，那就不是了。使用材料主题指南和检查工具，确保你符合《网络内容可及性指南》（WCAG 2.0）的色彩对比度准则。
Chrome开发工具检查工具检查图标按钮的对比度
4.使用语义化HTML
原生的HTML元素捕捉了一些对无障碍性很重要的标准交互模式。
在编写Angular组件时，你应该尽可能直接重用这些本地元素，而不是重新实现支持良好的行为。
5.用Angular Material创建可选择的控件
尽可能地简化菜单和控件，通过简化控件来创建可导航的组件。
之前。不可选择的嵌套控件
改进后。简化的复选框允许导航
6.用ARIA提供控件标签
网络无障碍倡议的可访问的富互联网应用规范（WAI-ARIA或ARIA）有助于解决无法用本地HTML管理的问题。
指定aria-label和其他ARIA属性，修改元素被翻译成可访问性树的方式。
Chrome Lighthouse的诊断报告强调了ARIA标签如何确保滑块在可访问性树中的地位
7.增加@angular/cdk/a11y的力量
添加Angular CDK的a11y模块，以帮助解决更复杂和Angular特有的问题。导入该模块包可以访问一些工具，开发人员可以利用这些工具来提高可访问性。
ListKeyManager：根据键盘交互来管理项目列表中的活动选项。
FocusTrap：在一个元素中捕获Tab键的焦点，用于像模态对话框这样的组件，焦点必须受到限制。
InteractivityChecker：检查一个元素的交互性，为可访问性目的捕获禁用、可见、Tabbable和可聚焦状态。
LiveAnnouncer：使用aria-live区域为读屏用户宣布信息。
FocusMonitor：用于监听元素的焦点状态的变化。
样式设计工具。Sass混合函数，用于产生以无障碍方式隐藏元素的样式，针对高对比度用户等。
8.用FocusTrap控制焦点
在Angular中，FocusTrap的cdkTrapFocus指令可以捕获元素中的tab键焦点。这旨在为像模态对话框这样的组件创造无障碍的体验，在那里焦点必须受到限制。
一个需要限制焦点的自定义颜色选择对话框
9.用LiveAnnouncer宣布变化
当页面上的东西发生变化时，屏幕阅读器需要得到通知。想象一下，当你试图提交一个表格或完成一次购买时，却不知道弹出了一个错误阻止了表格的提交。那是令人沮丧的!
LiveAnnouncer用于为屏幕阅读器用户宣布信息，使用的是aria-live区域，以确保屏幕阅读器得到通知，了解通知和实时页面变化。
10.启用高对比度模式
使用@angular/cdk/a11y中提供的cdk-high-contrast @mixin，在高对比度模式下给你的按钮添加一个轮廓，以尊重用户的偏好，并大幅提高对比度。
饺子店演示，购买按钮的高对比度模式打开。
就这样吧!
十种开始建立更方便的应用程序的方法。到代码实验室去测试一下你的Angular技能吧!
Chrome Lighthouse的诊断报告，无障碍程度为100%。
