无障碍

Flutter 始终致力于支持那些希望开发出能让包括失明、运动障碍等残障人士在内的,尽可能多的用户无障碍访问自己的应用的开发人员。

Flutter is committed to supporting developers who want to make their apps more accessible: usable by as many people as possible, including those with disabilities such as blindness or motor impairment.

为实现无障碍支持,Flutter 提供了三种组件:

Flutter supports three components for accessibility support:

  • 大字体: 使用用户指定的字体大小呈现文本 widget

    Large fonts: Render text widgets with user-specified font sizes

  • 读屏器: 通过语音反馈传达用户界面的内容

    Screen readers: Communicate spoken feedback about UI contents

  • 高对比度: 在渲染 widget 时,使用具有高对比度的颜色

    Sufficient contrast: Render widgets with colors that have sufficient contrast

辅助功能检测

Inspecting Accessibility support

关于无障碍功能检测的细节,我们将在下面讨论。除了测试这些特定主题外,我们还建议您使用自动辅助功能扫描程序

Details of these are discussed below. In addition to testing for these specific topics, we recommend using automated accessibility scanners:

  • 对于 Android:

    For Android:

    1. 在 Android 上安装 辅助扫描程序

      Install the Accessibility Scanner for Android

    2. 通过 设置 > 辅助 > 辅助扫描仪 > 开启在 Android 启用辅助功能扫描程序

      Enable the Accessibility Scanner from Android Settings > Accessibility > Accessibility Scanner > On

    3. 在导航栏找到辅助扫描仪复选框按钮启动扫描

      Navigate to the Accessibility Scanner ‘checkbox’ icon button to initiate a scan

  • 对于 iOS:

    For iOS:

    1. 在 Xcode 中打开 Flutter 应用程序的 iOS 文件夹

      Open the iOS folder of your Flutter app in Xcode

    2. 找到模拟器,然后单击 运行 按钮

      Select a Simulator as the target, and click Run button

    3. 在 Xcode 选择 Xcode > 开发者工具 > 辅助检查器

      In Xcode, select Xcode > Open Developer Tools > Accessibility Inspector

    4. 在辅助检查器中,选择 检查> 启用点检查,然后运行 Flutter 应用程序,选择各种用户界面元素来检查其辅助功能

      In the Accessibility Inspector, select Inspection > Enable Point to Inspect, and then select the various user interface elements in running Flutter app to inspect their accessibility attributes

    5. 在辅助检查器中,选择工具栏中的审核,然后选择运行音频”来获取潜在问题的报告

      In the Accessibility Inspector, select Audit in the toolbar, and then select Run Audio to get a report of potential issues

大字体

Large fonts

Android 和 iOS 都包含配置应用程序所需字体大小的系统设置。在确定字体大小时, Flutter 文本 widget 会遵循当前系统设置。

Both Android and iOS contain system settings to configure the desired font sizes used by apps. Flutter text widgets respect this OS setting when determining font sizes.

给开发者的提示

Tips for developers

Flutter 会根据操作系统设置自动计算字体大小。但是,作为开发人员,你应确保在增加字体大小时,你的页面有足够的空间来呈现其所有内容。例如,你可以在小屏幕上设置最大的字体来测试你应用上的全部内容。

Font sizes are calculated automatically by Flutter based on the OS setting. However, as a developer you should make sure your layout has enough room to render all its contents when the font sizes are increased. For example you can test all parts of your app on a small-screen device configured to use the largest font setting.

例子

Example

以下两个屏幕截图分别显示了使用默认 iOS 字体设置呈现的标准 Flutter 应用程序,和使用 iOS 辅助功能设置中选择的最大字体设置呈现的 Flutter 应用程序。

The following two screenshots show the standard Flutter app template rendered with the default iOS font setting, and with the largest font setting selected in iOS accessibility settings.

Default font setting
Default font setting
Largest accessibility font setting
Largest accessibility font setting

读屏器

Screen readers

读屏器 (TalkBack, VoiceOver) 可以使视障用户通过语音获得相关的屏幕内容。

Screen readers (TalkBack, VoiceOver) enable visually impaired users to get spoken feedback about the contents of the screen.

给开发者的提示

Tips for developers

在您的设备上启用 VoiceOver 或 TalkBack 来浏览您的应用。如果遇到任何问题,可以使用 语义 widget 来自定义您应用程序的无障碍体验。

Turn on VoiceOver or TalkBack on your device and navigate around your app. If you run into any issues, use the Semantics widget to customize the accessibility experience of your app.

高对比度

Sufficient contrast

高对比度能够使文本和图像更易于阅读。除了使具有各种视觉障碍的用户受益外,高对比度也能够帮助所有用户在极端光照条件下 (例如在直射阳光下或在低亮度显示器上) 观看设备上的界面。

Sufficient color contrast makes text and images easier to read. Along with benefitting users with various visual impairments, sufficient color contrast helps all users when viewing an interface on devices in extreme lighting conditions, such as when exposed to direct sunlight or on a display with low brightness.

W3C 建议:

The W3C recommends:

  • 小文本至少 4.5:1 (低于 18 像素常规或 14 像素粗体)

    At least 4.5:1 for small text (below 18 point regular or 14 point bold)

  • 大文本至少 3.0:1 (18 像素及以上常规或 14 像素及以上粗体)

    At least 3.0:1 for large text (18 point and above regular or 14 point and above bold)

给开发者的提示

Tips for developers

确保你包含的任何图像都具有较高的对比度。

Make sure any images you include have sufficient contrast.

在 widget 上指定颜色时,请确保在前景色和背景色之间具备足够的对比度。

When specifying colors on widgets, make sure sufficient contrast is used between foreground and background color selections.