跳到主要内容

可访问性 Accessibility

Flet基于Flutter框架，除了底层操作系统提供的可访问性支持，还包括针对可访问性的一流框架支持。

屏幕阅读器​

对于移动设备，屏幕阅读器（TalkBack、VoiceOver）使视力受损的用户可以通过移动设备上的手势或台式机上的键盘快捷方式，获取关于屏幕内容的语音反馈，并与UI进行交互。在移动设备上打开VoiceOver或TalkBack，并在应用程序中导航。

对于Web，目前支持以下屏幕阅读器：

移动浏览器：

  • iOS - VoiceOver
  • Android - TalkBack

台式机浏览器：

  • MacOS - VoiceOver
  • Windows - JAWs和NVDA

Web平台的屏幕阅读器用户需要切换“启用可访问性”按钮才能生成语义树。

文本​

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

按钮​

所有带有文本的按钮会生成正确的语义。

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

TextField和Dropdown​

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

自定义语义​

对于任何特定要求，请使用Semantics控件。

调试语义​

设置page.show_semantics_debugger为True，以显示覆盖框架报告的可访问性信息的叠加层。

您可以实现一个特定的键盘快捷方式，方便地在应用程序开发过程中切换语义调试器：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

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

    page.on_keyboard_event = on_keyboard

    txt_number = ft.Text("0", size=40)

    def button_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        txt_number,
        ft.Text("Press CTRL+S to toggle semantics debugger"),
        ft.FloatingActionButton(
            icon=ft.icons.ADD, tooltip="Increment number", on_click=button_click
        ),
    )

ft.app(target=main, view=ft.AppView.WEB_BROWSER)