辅助功能 (Accessibility)

---

Flet 基于 Flutter 构建，除了底层操作系统提供的辅助功能支持外，框架层本身也包含了一流的辅助功能（Accessibility）支持。

---

屏幕阅读器 (Screen readers)

在移动端，屏幕阅读器（Android 上的 TalkBack，iOS 上的 VoiceOver）可协助视力障碍用户获取屏幕内容的语音反馈，并允许在移动设备上通过手势或在桌面设备上通过键盘快捷键与 UI 进行交互。你可以尝试开启移动设备上的 VoiceOver 或 TalkBack，在你的应用中浏览操作。

在 Web 端，目前支持以下屏幕阅读器：

移动端浏览器：

• iOS — VoiceOver
• Android — TalkBack

桌面端浏览器：

• macOS — VoiceOver
• Windows — JAWS & NVDA

Web 端屏幕阅读器用户需要切换（点击）“启用辅助功能（Enable accessibility）”按钮来构建语义树（Semantics tree）。

---

文本 (Text)

使用 Text.semantics_label 属性可覆盖默认的 Text 控件语义信息。

---

按钮 (Buttons)

所有带文本的按钮都会自动生成对应的语义。

可以使用 tooltip 属性为 IconButton、FloatingActionButton 和 PopupMenuButton 按钮添加屏幕阅读器语义。

---

TextField 和 Dropdown

使用 TextField.label 和 Dropdown.label 属性可以为这些控件添加屏幕阅读器语义。

---

自定义语义 (Custom semantics)

对于任何特定的特殊需求，可以使用 Semantics 控件来精细定义。

---

调试语义 (Debugging semantics)

将 Page.show_semantics_debugger 设置为 True 可以显示一个辅助功能调试图层（Overlay），该图层能够可视化展示由框架报告的辅助功能语义信息。

你可以在应用开发过程中实现一个特定的键盘快捷键，从而方便地切换辅助功能调试器的显示状态：

提示

你可以在这里在线尝试。

import flet as ft


def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def on_keyboard(e: ft.KeyboardEvent):
        if e.shift and e.key == "S":
            page.show_semantics_debugger = not page.show_semantics_debugger
            page.update()

    page.on_keyboard_event = on_keyboard

    def button_click(e: ft.Event[ft.Button]):
        counter.value = str(int(counter.value) + 1)
        page.update()

    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    counter := ft.Text("0", size=40),
                    ft.Text("按 Shift+S 键来切换辅助功能调试器"),
                    ft.Button(
                        content="增加数字",
                        icon=ft.Icons.ADD,
                        on_click=button_click,
                    ),
                ]
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)