# 无障碍 (a11y)

> Flutter 的无障碍支持。



## Background

## 背景

Ensuring that apps are accessible to a broad range of users is an essential
part of building a high-quality app. Applications that are poorly
designed create barriers to people of all ages. The [UN Convention on
the Rights of Persons with Disabilities][CRPD] states the moral and legal
imperative to ensure universal access to information systems; countries
around the world enforce accessibility as a requirement; and companies
recognize the business advantages of maximizing access to their services.

确保你的应用能够被广泛的用户使用是构建高质量应用程序至关重要的一点。
如果你的应用设计不佳，可能会无法覆盖到所有年龄段的人。
[联合国关于残疾人权利][CRPD] 规定了道德和法律必须确保信息系统能够普遍使用。
世界各地也都要求提供无障碍的环境；
同样，公司也认识到了最大限度覆盖服务的优势所在。

We strongly encourage you to include an accessibility checklist
as a key criteria before shipping your app. Flutter is committed to
supporting developers in making their apps more accessible, and includes
first-class framework support for accessibility in addition to that
provided by the underlying operating system, including:

我们强烈建议你将无障碍清单作为发布应用前的关键标准之一。
Flutter 始终致力于帮助开发者让应用更易于访问，
除了底层操作系统提供的无障碍支持外，Flutter 还提供了一流的框架级无障碍支持，包括：

[UI Design and styling][]

[UI 设计与样式][UI Design and styling]

[Assistive Technologies (Screen Reader) supports][]

[辅助技术（屏幕阅读器）支持][Assistive Technologies (Screen Reader) supports]

[UI Design and styling]: /ui/accessibility/ui-design-and-styling
[Assistive Technologies (Screen Reader) supports]:/ui/accessibility/assistive-technologies

## Accessibility regulations

## 无障碍法规

Accessibility standards and regulations help ensure that products are
accessible to people with disabilities. Many of these have been enacted into
laws and policies, making them requirements for products and services.

无障碍标准与法规有助于确保产品能够被残障人士访问。
其中许多已被纳入法律和政策，成为对产品和服务的强制性要求。

*   **WCAG 2**: [Web Content Accessibility Guidelines (WCAG) 2][] is an
internationally recognized standard for making web content more accessible
to people with disabilities. It is a stable, technical standard developed
by the World Wide Web Consortium (W3C).

    **WCAG 2**：[Web Content Accessibility Guidelines (WCAG) 2][]
    是一项国际公认的标准，用于让 Web 内容对残障人士更易于访问。
    它是由万维网联盟 (W3C) 制定的一项稳定的技术标准。

*   **EN 301 549**: [EN 301 549][] is the European harmonized standard for
accessibility requirements for Information and Communication Technology (ICT)
products and services.

    **EN 301 549**：[EN 301 549][]
    是欧洲针对信息通信技术 (ICT) 产品和服务无障碍要求的统一标准。

*   **VPAT**: The [Voluntary Product Accessibility Template (VPAT)][] is a
free template that translates accessibility requirements and standards into
 actionable testing criteria for products and services.

    **VPAT**：[Voluntary Product Accessibility Template (VPAT)][]
    是一个免费模板，可将无障碍要求和标准转化为针对产品和服务的可执行测试准则。

Laws around the world require digital content and services to be accessible
to people with disabilities.
In the U.S., the [Americans with Disabilities Act (ADA)][] prohibits
discrimination in public accommodations.
[Section 508 of the Rehabilitation Act ][] requires federal agencies and their
contractors to meet WCAG standards for all ICT.

世界各地的法律都要求数字内容和服务能够被残障人士访问。
在美国，[Americans with Disabilities Act (ADA)][] 禁止在公共设施中实施歧视。
[Section 508 of the Rehabilitation Act ][] 要求联邦机构及其承包商的所有 ICT 均符合 WCAG 标准。

In the EU, the [European Accessibility Act (EAA)][] requires a wide range of
public and private sector services to be accessible, primarily using
the [EN 301 549][] as its technical basis.

在欧盟，[European Accessibility Act (EAA)][] 要求广泛的公共和私营部门服务
都具备无障碍能力，并主要以 [EN 301 549][] 作为其技术基础。



[Web Content Accessibility Guidelines (WCAG) 2]: https://www.w3.org/WAI/standards-guidelines/wcag/
[EN 301 549]: https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf
[Voluntary Product Accessibility Template (VPAT)]: https://www.itic.org/policy/accessibility/vpat

[Americans with Disabilities Act (ADA)]: https://www.ada.gov/
[Section 508 of the Rehabilitation Act]: https://www.section508.gov/
[European Accessibility Act (EAA)]: https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en


## Building with accessibility in mind

## 思考如何构建无障碍应用

Ensuring that your app can be used by everyone means building accessibility
into it from the start. For some apps, that's easier said than done.
In the video below, two of our engineers take a mobile app from a dire
accessibility state to one that takes advantage of Flutter's built-in
widgets to offer a dramatically more accessible experience.

确保你的应用能够被所有人使用，
这意味着你需要从一开始就考虑到无障碍。
对于一些应用，说起来容易做起来难。
在下面的视频中，我们的两名工程师将一个无障碍状况堪忧的移动应用，
改造为一个充分利用 Flutter 内置 widget、
显著提升了无障碍体验的应用。

<iframe width="560" height="315" src="https://player.bilibili.com/player.html?bvid=BV1N84y1c7hW&page=1&autoplay=false" title="Building Flutter apps with accessibility in mind" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe><br>
<p><a href="https://www.bilibili.com/video/BV1N84y1c7hW/" target="_blank" rel="noopener" title="在新标签页打开 'Building Flutter apps with accessibility in mind' 视频">Building Flutter apps with accessibility in mind</a></p>

## Accessibility release checklist

## 无障碍发布清单

Here is a non-exhaustive list of things to consider as you prepare your
app for release.

这里是一些应用发布前的你需要考虑的部分清单。

* **Active interactions**. Ensure that all active interactions do
  something. Any button that can
  be pushed should do something when pushed. For example, if you have a
  no-op callback for an `onPressed` event, change it to show a `SnackBar`
  on the screen explaining which control you just pushed.

  **主动交互**。确保所有可交互的地方都会给予反馈。
  任何可以按下的按钮在被按下时都应有所响应。
  例如，如果你的 `onPressed` 事件是一个无操作 (no-op) 回调，
  请改为在屏幕上显示一个 `SnackBar`，说明你刚刚按下了哪个控件。

* **Screen reader testing**. The screen reader should be able to
  describe all controls on the page when you tap on them, and the
  descriptions should be intelligible. Test your app with [TalkBack][]
  (Android) and [VoiceOver][] (iOS).

  **屏幕阅读测试**。
  当你点击控件时，屏幕阅读器应能描述页面上的所有控件，
  并且描述应易于理解。请使用 [TalkBack][] (Android)
  以及 [VoiceOver][] (iOS) 测试你的应用。

* **Contrast ratios**. We encourage you to have a contrast ratio of at
  least 4.5:1 between controls or text and the background, with the
  exception of disabled components. Images should also be vetted for
  sufficient contrast.

  **对比度**。我们建议控件或文本与背景之间的对比度至少为
  4.5:1，禁用的组件除外。图片也应经过审核，确保具备足够的对比度。

* **Context switching**. Nothing should change the user's context
  automatically while typing in information. Generally, the widgets
  should avoid changing the user's context without some sort of
  confirmation action.

  **上下文切换**。在用户输入信息时，任何内容都不应自动改变用户所处的上下文。
  通常来说，widget 应该避免在没有某种确认动作的情况下
  更改用户的上下文。

* **Tappable targets**. All tappable targets should be at least 48x48 pixels.

  **可点击的目标**。所有可点击的目标至少应为 48x48 像素。

* **Errors**. Important actions should be able to be undone. In fields
  that show errors, suggest a correction if possible.

  **错误**。重要操作应该能够撤销。
  在显示错误的字段中，
  如果可能，请提供订正建议。

* **Color vision deficiency testing**. Controls should be usable and
  legible in colorblind and grayscale modes.

  **色觉辨认障碍测试**。控件应该可用并且在色盲和灰度模式下清晰可见。

* **Scale factors**. The UI should remain legible and usable at very
  large scale factors for text size and display scaling.

  **比例系数**。在文本大小和显示缩放的比例系数非常大时，UI 应保持清晰易读、可用。

[TalkBack]: https://support.google.com/accessibility/android/answer/6283677?hl=en
[VoiceOver]: https://www.apple.com/lae/accessibility/iphone/vision/

## Learn more

## 更多信息

To learn more about Flutter and accessibility, check out
the following articles written by community members:

若想进一步了解 Flutter 与无障碍，
请查看以下社区成员撰写的文章：

* [A deep dive into Flutter's accessibility widgets][]

  [深入了解 Flutter 的无障碍 widget][A deep dive into Flutter's accessibility widgets]

* [Flutter: Crafting a great experience for screen readers][]

  [Flutter：为屏幕阅读器打造出色体验][Flutter: Crafting a great experience for screen readers]

[A deep dive into Flutter's accessibility widgets]: https://medium.com/flutter-community/a-deep-dive-into-flutters-accessibility-widgets-eb0ef9455bc
[CRPD]: https://social.desa.un.org/issues/disability/crpd/article-9-accessibility
[Flutter: Crafting a great experience for screen readers]: https://blog.gskinner.com/archives/2022/09/flutter-crafting-a-great-experience-for-screen-readers.html