无障碍控件是指帮助需要时,让人们使用数字产品时的工具。通过无障碍功能,使用者可以获取到应用程序中最重要的信息,并使用导航技术、语音识别技术等方式体验应用系统的完整性功能
Flutter 应用可以使用 Semantics widget 来实现无障碍控件。Semantics 可以在控件树结构中增加语义标注,以便于无障碍用户可以获取到更多的语义信息。
如何在 Flutter 中使用 Semantics widget
Semantics widget 可以通过以下方式使用:
Scaffold(
body: Semantics(
label: '这是一个文本标签',
child: Text('Hello World!'),
),
)上述代码,将 'Hello World!' 字符串包裹在了一个 Semantics widget 中,同时增加了一个语义标注:'这是一个文本标签'
在执行标注的时候,系统将 '这是一个文本标签' 当作文本标签的名称,无障碍用户在使用屏幕阅读器等帮助工具时,会直接读出这个名称,而无需关心标签的样式等无用信息。
如何使用 Semantics widget 定义更多的语义信息
除了之前提到的 label 参数,Seamatics widget 还具有他种语义属性,可以向无障碍用户提供更多的信息。
以下是 Semantics widget 常用的属性:
- label: 控件的标签名称
- hint: 当用户使用语音识别的时候,会给出文本提示
- value: 当前控件的值
- maxValueLength: 控件值的最大长度
- excludeSemantics: 这个参数表示禁止将 child 树向下增加语义标注(例如文本链接中的颜色等不应被某些能力受限的用户感知到)
以上这些标签可以通过 Semantics widget 直接设置,如下代码:
Semantics(
label: '这是一个文本标签',
hint: '这是一个文本标签,使用语音提示功能进行阅读',
value: '这是一个示例文本标签的值',
maxValueLength: 16,
excludeSemantics: true,
child: Text('Hello World!'),
)上述代码中,语义属性可以通过设置相关参数设置,Semantics widget 会按照设置生成语义标注。
如何使用 Flutter widget 来实现 accessibility 断言
Flutter 的测试工具中提供了如下 accessibility 断言:
- SemanticsNode.hasFocus: 认为应该在由 Semantics widget 定义的控件之上
- SemanticsNode.isButton: 该控件作为按钮应该具有的语义标注
- SemanticsNode.isCheckBox: 该控件作为复选框应该具有的语义标注
- SemanticsNode.isEditableText: 该控件作为可编辑的文本输入框应该具有的语义标注
- SemanticsNode.isHeading: 该控件作为一级标题应该具有的语义标注
- SemanticsNode.isImage: 该控件作为图像应该具有的语义标注
- SemanticsNode.isImageButton: 该控件作为图像按钮应该具有的语义标注
- SemanticsNode.isLink: 该控件作为文本链接应该具有的语义标注
- SemanticsNode.isTextField: 具有文本输入功能的控件
以下是使用 Semantics节点的示例代码:
-- -------------------- ---- -------
----------------- ------ --- ----- -
-- ---- --------- ------
------ --------------- - ----------
------ -----------
------ ----------- ---------
--
-- -----
----- ------------------------------
-- -- --------
-------
--------------
-----------------
---------------- -----
------------- -----
--------- -----
--------------------------- ------
----------- ------
--------- ------
---------------- -----
--
--
-- -- ---------
-------
--------------
-----------------
---------------- -----
------------ -----
--------- -----
----------------- -----
--
--
---结语
本篇文章分享了使用 Semantics widget 来实现无障碍控件的方法,同时介绍了如何使用 Flutter widget 进行 accessibility 断言。在你的 Flutter 应用中,合理使用无障碍控件会在提高用户体验的同时,为你的应用获得更多关注点,提高普适性表现,让更多的人使用你的应用。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cef2f9e46428fe9e9ba66e