Web 辅助功能
关于 Web 可访问性的信息
背景
#Flutter 通过将内部语义树转换为屏幕阅读器可以理解的可访问 HTML DOM 结构来支持 Web 可访问性。由于 Flutter 在单个画布上渲染其 UI，因此需要一个特殊层来向 Web 浏览器公开 UI 的含义和结构。
启用 Web 可访问性
#不可见按钮
#出于性能考虑，Flutter 的 Web 可访问性默认情况下未启用。要启用可访问性，用户需要按下带有 aria-label="Enable accessibility" 的不可见按钮。按下按钮后，DOM 树将反映所有小部件的可访问性信息。
在代码中启用辅助功能模式
#另一种方法是在运行应用程序时添加以下代码来启用辅助功能模式。
dart
import 'package:flutter/semantics.dart';
void main() {
runApp(const MyApp());
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
}
使用语义角色增强可访问性
#什么是语义角色？
#语义角色定义了 UI 元素的用途，帮助屏幕阅读器和其他辅助工具有效地解释和呈现您的应用程序给用户。例如，一个角色可以指示一个部件是按钮、链接、标题、滑块或表格的一部分。
虽然 Flutter 的标准部件通常会自动提供这些语义，但没有明确定义的角色的自定义组件对于屏幕阅读器用户来说可能难以理解。
通过分配适当的角色，您可以确保
- 屏幕阅读器可以正确地宣布元素类型和用途。
- 用户可以使用辅助技术更有效地导航您的应用程序。
- 您的应用程序符合 Web 可访问性标准，从而提高可用性。
在 Flutter for web 中使用 SemanticsRole
#
Flutter 提供了 Semantics 部件 和 SemanticsRole 枚举，允许开发人员为他们的部件分配特定的角色。当您的 Flutter Web 应用程序被渲染时，这些 Flutter 特定的角色会被转换为 Web 页面 HTML 结构中相应的 ARIA 角色。
1. 标准部件的自动语义
许多标准 Flutter 部件，如 TabBar、MenuAnchor 和 Table，会自动包含语义信息以及其角色。尽可能使用这些标准部件，因为它们开箱即用地处理了许多可访问性方面。
2. 显式添加或覆盖角色
对于自定义组件或当默认语义不足时，使用 Semantics 部件来定义角色
以下是如何显式定义列表及其项目的示例
dart
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
class MyCustomListWidget extends StatelessWidget {
const MyCustomListWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// This example shows how to explicitly assign list and listitem roles
// when building a custom list structure.
return Semantics(
role: SemanticsRole.list,
explicitChildNodes: true,
child: Column(
children: <Widget>[
Semantics(
role: SemanticsRole.listItem,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text('Content of the first custom list item.'),
),
),
Semantics(
role: SemanticsRole.listItem,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text('Content of the second custom list item.'),
),
),
],
),
);
}
}