From 0843a0608efb249a5811565cc2384e9f7381bd49 Mon Sep 17 00:00:00 2001 From: YuCheng Hu Date: Mon, 5 Apr 2021 13:53:36 -0400 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=99=E8=AF=AF=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio/content/guide/accessibility.md | 100 ++--------------------------- aio/content/guide/glossary.md | 2 +- 2 files changed, 6 insertions(+), 96 deletions(-) diff --git a/aio/content/guide/accessibility.md b/aio/content/guide/accessibility.md index 8ad6f66db6..4e62070a42 100644 --- a/aio/content/guide/accessibility.md +++ b/aio/content/guide/accessibility.md @@ -1,46 +1,30 @@ # 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 @@ -49,73 +33,45 @@ 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 组件 +## Angular UI components 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 `