对于用户可点击等操作的任何按钮,如果不是文本类控件,则须通过给出标注信息,包括用户自定义的控件中的虚拟按钮区域,否则可能会导致屏幕朗读用户无法完成对应的功能。
此类控件在进行标注时,标注文本不要包含控件类型、“单指双击即可打开”之类的字符串,此部分指引由屏幕朗读根据控件类型、控件状态,并结合用户是否开启了“新手指引”自动追加朗读。
在下面的代码片段中,您可以看到Image组件(它实际上是一个播放/暂停按钮),通过设置accessibilityText属性提供标注信息:
.const RESOURCE_STR_PLAY = $r('app.media.play')
.const RESOURCE_STR_PAUSE = $r('app.media.pause')
.
.@Component
.export struct Rule_2_1_6 {
. title: string = 'Rule 2.1.6'
. @State isPlaying: boolean = false
.
. play() {
. // play audio file
. }
.
. pause() {
. // pause playing of audio file
. }
.
. build() {
. NavDestination() {
. Column() {
. Flex({
. direction: FlexDirection.Column,
. alignItems: ItemAlign.Center,
. justifyContent: FlexAlign.Center,
. }) {
. Row() {
. Image(this.isPlaying ? RESOURCE_STR_PAUSE : RESOURCE_STR_PLAY)
. .width(50)
. .height(50)
. .onClick(() => {
. this.isPlaying = !this.isPlaying
. if (this.isPlaying) {
. this.play()
. } else {
. this.pause()
. }
. })
. .accessibilityText(this.isPlaying ? 'Pause' : 'Play') // 设置注释信息
. Text('Good_morning.mp3')
. .margin({
. left: 10
. })
. }
. }
. .width('100%')
. .height('100%')
. .backgroundColor(Color.White)
. }
. }
. .title(this.title)
. }
.}
本文主要引用官方文档材料基API 12 Release