From c3645af932b2d77b72b5f670c21d96dff5cd84d7 Mon Sep 17 00:00:00 2001 From: YuCheng Hu Date: Sun, 4 Apr 2021 10:45:50 -0400 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio/content/guide/accessibility.md | 100 +++++++++++++++++++++++++++-- aio/package.json | 2 +- aio/src/index.html | 2 +- 3 files changed, 97 insertions(+), 7 deletions(-) diff --git a/aio/content/guide/accessibility.md b/aio/content/guide/accessibility.md index 4e62070a42..8ad6f66db6 100644 --- a/aio/content/guide/accessibility.md +++ b/aio/content/guide/accessibility.md @@ -1,30 +1,46 @@ # Accessibility in Angular +# Angular 中的无障碍功能 + The web is used by a wide variety of people, including those who have visual or motor impairments. A variety of assistive technologies are available that make it much easier for these groups to interact with web-based software applications. In addition, designing an application to be more accessible generally improves the user experience for all users. +Web 会被各种各样的人使用，包括有视觉或运动障碍的人。有多种辅助技术能使这些人更轻松地和基于 Web 的软件应用进行交互。另外，将应用设计得更易于访问通常也能改善所有用户的体验。 + For an in-depth introduction to issues and techniques for designing accessible applications, see the [Accessibility](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility) section of the Google's [Web Fundamentals](https://developers.google.com/web/fundamentals/). +关于如何设计无障碍应用的问题和技术的深入介绍，请参阅 Google [网络基础知识](https://developers.google.com/web/fundamentals/)的[无障碍功能](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility)部分。 + This page discusses best practices for designing Angular applications that work well for all users, including those who rely on assistive technologies. +本页讨论了设计 Angular 应用的最佳实践，这些实践对所有用户（包括依赖辅助技术的用户）都适用。 +
For the sample app that this page describes, see the . + 本页所描述的范例程序，参阅。 +
## Accessibility attributes +## 无障碍属性（Attribute） + Building accessible web experience often involves setting [ARIA attributes](https://developers.google.com/web/fundamentals/accessibility/semantics-aria) to provide semantic meaning where it might otherwise be missing. Use [attribute binding](guide/attribute-binding) template syntax to control the values of accessibility-related attributes. +建立无障碍的 Web 体验通常会涉及设置 [ARIA 属性（Attribute）](https://developers.google.com/web/fundamentals/accessibility/semantics-aria) 以提供可能会丢失的语义。使用 [Attribute 绑定](guide/attribute-binding模板语法来控制与无障碍性相关的属性（Attribute）值。 + When binding to ARIA attributes in Angular, you must use the `attr.` prefix, as the ARIA specification depends specifically on HTML attributes rather than properties of DOM elements. +在 Angular 中绑定 ARIA 属性（Attribute）时，必须使用 `attr.` 前缀，因为 ARIA 规范针对的是 HTML 属性（Attribute），而不是 DOM 元素的属性（Property）。 + ```html @@ -33,45 +49,73 @@ specification depends specifically on HTML attributes rather than properties of Note that this syntax is only necessary for attribute _bindings_. Static ARIA attributes require no extra syntax. +注意，此语法仅对于属性（Attribute）*绑定*是必需的。静态 ARIA 属性（Attribute）不需要额外的语法。 + ```html ``` +NOTE: + +注意： +
By convention, HTML attributes use lowercase names (`tabindex`), while properties use camelCase names (`tabIndex`). + 按照约定，HTML 属性（Attribute）使用小写名称（ `tabindex` ），而 Property 使用 camelCase 名称（ `tabIndex` ）。 + See the [Binding syntax](guide/binding-syntax#html-attribute-vs-dom-property) guide for more background on the difference between attributes and properties. + 关于 Attribute 和 Property 之间差异的更多背景信息，请参阅[模板语法](guide/html-attribute-vs-dom-property一章。 +
- ## Angular UI components +## Angular UI 组件 + The [Angular Material](https://material.angular.io/) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible. The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility. For example: +由 Angular 团队维护的 [Angular Material](https://material.angular.io/) 库是旨在提供完全无障碍的一组可复用 UI 组件。[组件开发工具包（CDK）](https://material.angular.io/cdk/categories)中包括 `a11y` 软件包，该软件包提供了支持无障碍领域的各种工具。例如： + * `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region. See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live). + `LiveAnnouncer` 用于使用 `aria-live` 区域向屏幕阅读器用户朗读消息。关于 [aria-live 领域的](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live)更多信息，请参阅 W3C 文档。 + * The `cdkTrapFocus` directive traps Tab-key focus within an element. Use it to create accessible experience for components like modal dialogs, where focus must be constrained. + `cdkTrapFocus` 指令能将 Tab 键焦点捕获在元素内。使用它可为必须限制焦点的模态对话框之类的组件创建无障碍体验。 + For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview). +关于这些工具和其它工具的完整详细信息，请参阅 [Angular CDK 无障碍功能概述](https://material.angular.io/cdk/a11y/overview)。 ### Augmenting native elements +### 增强原生元素 + Native HTML elements capture a number of standard interaction patterns that are important to accessibility. When authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors. +原生 HTML 元素捕获了许多对无障碍性很重要的标准交互模式。在制作 Angular 组件时，应尽可能直接复用这些原生元素，而不是重新实现已获良好支持的行为。 + For example, instead of creating a custom element for a new variety of button, you can create a component that uses an attribute selector with a native `