构建更方便的Angular应用程序

GoogleIO2021期间,我们发布了一个新的Angular codelab。本文将介绍用于构建更多无障碍应用程序的十个工具,然后通过代码实验室进行实践,提升技能。

构建更易于访问的Angular应用程序

可访问性是网络开发的一个重要部分——确保用户能够感知、理解、导航并与应用程序互动。开发可访问的应用程序从构思开始一直到部署,所以让我们来看看你如何开始将a11y纳入你的应用程序吧!

1.学习测试无障碍性的工具

在目前的网络状态下,手动测试无障碍性是强制性的。从学习使用电脑内置的屏幕阅读器进行导航开始。

我们还可以使用Lighthouseaxe和linting等自动化工具来抽查特定的问题,如缺失的alt文本、标签和颜色对比。

我们建议在你的.eslintrc.json中添加以下规则,这些规则适用于可访问性。

medium.com/media/b7179…

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混合函数,用于产生以无障碍方式隐藏元素的样式,针对高对比度用户等。

medium.com/media/5a610…

8.用FocusTrap控制焦点

在Angular中,FocusTrap的cdkTrapFocus指令可以捕获元素中的tab键焦点。这旨在为像模态对话框这样的组件创造无障碍的体验,在那里焦点必须受到限制。

一个需要限制焦点的自定义颜色选择对话框

9.用LiveAnnouncer宣布变化

当页面上的东西发生变化时,屏幕阅读器需要得到通知。想象一下,当你试图提交一个表格或完成一次购买时,却不知道弹出了一个错误阻止了表格的提交。那是令人沮丧的!

LiveAnnouncer用于为屏幕阅读器用户宣布信息,使用的是aria-live区域,以确保屏幕阅读器得到通知,了解通知和实时页面变化。

medium.com/media/494ce…

10.启用高对比度模式

使用@angular/cdk/a11y中提供的cdk-high-contrast @mixin,在高对比度模式下给你的按钮添加一个轮廓,以尊重用户的偏好,并大幅提高对比度。

饺子店演示,购买按钮的高对比度模式打开。

就这样吧!

十种开始建立更方便的应用程序的方法。到代码实验室去测试一下你的Angular技能吧!

Chrome Lighthouse的诊断报告,无障碍程度为100%。


原文链接:blog.angular.io/build-more-…