跳转至正文

无障碍技术

面向 Flutter 开发者的无障碍技术信息。

摘要

#

辅助技术对于让残障人士能够访问数字内容至关重要。本文概述了与 Flutter 开发相关的两类关键辅助技术:面向视障用户的屏幕阅读器,以及面向运动能力受限用户的移动辅助工具。通过了解并使用这些技术进行测试,你可以确保 Flutter 应用为所有人提供更包容、更友好的体验。

屏幕阅读器

#

在移动端,屏幕阅读器(TalkBackVoiceOver)让视障用户获得屏幕内容的语音反馈,并通过移动端手势或桌面端键盘快捷键与 UI 交互。在移动设备上开启 VoiceOver 或 TalkBack,并在应用中导航。

要在设备上开启屏幕阅读器,请完成以下步骤:

  1. On your device, open Settings.

  2. Select Accessibility and then TalkBack.

  3. Turn 'Use TalkBack' on or off.

  4. Select Ok.

  5. 在设备上打开 设置

  6. 选择 无障碍,然后选择 TalkBack

  7. 开启或关闭「使用 TalkBack」。

  8. 选择确定。

要了解如何查找和自定义 Android 的无障碍功能,请观看以下视频。

Watch on YouTube in a new tab: "Customize Pixel and Android accessibility features"
  1. On your device, open Settings > Accessibility > VoiceOver

  2. Turn the VoiceOver setting on or off

  3. 在设备上打开 设置 > 无障碍 > VoiceOver

  4. 开启或关闭 VoiceOver 设置

要了解如何查找和自定义 iOS 的无障碍功能,请观看以下视频。

Watch on YouTube in a new tab: "How to navigate your iPhone or iPad with VoiceOver"

对于 Web,目前支持以下屏幕阅读器:

Mobile browsers:

  • iOS - VoiceOver
  • Android - TalkBack

移动端浏览器:

  • iOS - VoiceOver
  • Android - TalkBack

Desktop browsers:

  • macOS - VoiceOver
  • Windows - JAWs & NVDA

桌面端浏览器:

  • macOS - VoiceOver
  • Windows - JAWs & NVDA

Web 上的屏幕阅读器用户必须切换「Enable accessibility」按钮以构建语义树。如果你使用以下 API 以编程方式为应用自动启用无障碍,用户可跳过此步骤:

dart
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

void main() {
  runApp(const MyApp());
  SemanticsBinding.instance.ensureSemantics();
}

Windows 自带名为 Narrator 的屏幕阅读器,但部分开发者建议使用更流行的 NVDA 屏幕阅读器。要了解如何使用 NVDA 测试 Windows 应用,请参阅 Screen Readers 101 For Front-End Developers (Windows)

在 Mac 上,你可以使用 macOS 自带的桌面版 VoiceOver。

Watch on YouTube in a new tab: "Screen reader basics: VoiceOver"

在 Linux 上,常用的屏幕阅读器是 Orca。部分发行版已预装,也可通过 apt 等软件包仓库安装。要了解如何使用 Orca,请参阅 Getting started with Orca screen reader on Gnome desktop


请观看以下视频演示,了解如何将 VoiceOver 与已归档的 Flutter Gallery Web 应用配合使用。

Flutter 的标准 widget 会自动生成无障碍树。不过,若应用需要不同行为,可使用 Semantics widget 进行自定义。

当应用中的文本需要使用特定语音朗读时,请调用 TextSpan.locale 告知屏幕阅读器使用哪种语音。从 Flutter 3.38 起,MaterialApp.localeLocalizations.override 会影响屏幕阅读器的语音。通常,屏幕阅读器使用系统语音,除非你通过 TextSpan.locale 显式指定。

移动辅助

#

对于灵巧度或手部力量受限的用户,移动辅助功能很有帮助。Android 和 iOS 都提供多种工具,旨在让导航和控制更轻松。这些功能允许用户通过外接开关、语音命令或简化的屏幕菜单操作设备。

Android 提供 Switch Access、Voice Access 和 Accessibility Menu,iOS 提供 Switch Control、Voice Control 和 AssistiveTouch。了解这些工具有助于创建可供不同身体能力人群使用的应用。

操作系统 功能 作用
Android Switch Access 作为替代输入方式,你可以使用 Switch Access 和 Camera Switches
Android Voice Access 用语音控制设备
Android Accessibility Menu 浮动屏幕菜单,提供简化按钮以控制手机基本功能。
iOS Switch Control 将开关用作替代输入方式
iOS Voice Control 用语音控制设备
iOS AssistiveTouch 使用 AssistiveTouch 替代多指手势或硬件按钮操作