创新互联Angular教程：Angular无障碍性

你可以在 Angular Material 中看到此模式的范例：MatButton，MatTabNav，MatTable。

将容器用于原生元素

有时要使用的原生元素需要一个容器元素。比如，原生 ​​ 元素不能有子元素，因此任何自定义的文本输入组件都需要用其它元素来包装 ​​。尽管你可能只在自定义组件的模板中包含 ​​，但这将使该组件的用户无法为 ​input ​元素设置任意 Property 和 Attribute。相反，你可以创建一个使用内容投影的容器组件，以将原生控件包含在组件的 API 中。

你可以把 MatFormField 作为该模式的例子。

案例研究：构建自定义进度条

以下范例显示如何通过使用宿主（host）绑定来控制与无障碍性相关的属性（Attribute），来把进度条无障碍化。

• 该组件使用标准的 HTML 属性（Attribute）​role ​和 ARIA 属性（Attribute）来定义要启用无障碍支持的元素。ARIA 属性（Attribute）​aria-valuenow​ 绑定到用户的输入。

import { Component, Input } from '@angular/core';

/**
 * Example progressbar component.
 */
@Component({
  selector: 'app-example-progressbar',
  template: '
',
  styleUrls: ['./progress-bar.component.css'],
  host: {
    // Sets the role for this component to "progressbar"
    role: 'progressbar',

    // Sets the minimum and maximum values for the progressbar role.
    'aria-valuemin': '0',
    'aria-valuemax': '100',

    // Binding that updates the current value of the progressbar.
    '[attr.aria-valuenow]': 'value',
  }
})
export class ExampleProgressbarComponent  {
  /** Current value of the progressbar. */
  @Input() value = 0;
}

• 在模板中，​aria-label​ 属性（Attribute）可以确保屏幕阅读器能访问该控件。

  Enter an example progress value
  

路由

导航后的焦点管理

在设计无障碍性时，在 UI 中跟踪和控制焦点是很重要的考虑因素。使用 Angular 路由时，你需要确定页面焦点在导航上的位置。

为了避免仅仅依靠视觉提示，你需要确保路由代码会在页面导航之后更新焦点。使用 ​Router ​服务中的 ​NavigationEnd ​事件可以知道何时该更新焦点。

以下范例显示了导航后如何在 DOM 中查找并把焦点移动到主体内容的头部。

router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
  const mainHeader = document.querySelector('#main-content-header')
  if (mainHeader) {
    mainHeader.focus();
  }
});

在实际的应用程序中，哪些元素获得焦点将取决于该应用特有的结构和布局。获得焦点的元素应使用户能够立即移动到刚刚进入视野的主要内容。你应该避免当路由变化后焦点重新回到 ​body ​元素的情况。

活动链接标识

用在活跃 ​RouterLink ​元素上的 CSS 类（一般通过 ​RouterLinkActive ​来指定）提供了有关哪个链接正处于活跃状态的视觉指示。此类指示不适用于盲人或视障用户，为了提供此类信息，还要将 ​aria-current​ 属性应用于此元素（有关更多信息，参阅MDN aria-current）。

​RouterLinkActive ​指令提供了 ​ariaCurrentWhenActive ​输入属性，该输入属性会在链接变为活跃状态时将 ​aria-current​ 设置为指定的值。

以下示例展示了如何将 ​active-page​ 类应用于活跃链接，以及如何在它们处于活跃状态时将它们的 ​aria-current​ 属性设置为 ​"page"​ ：