无障碍开发指导

@Entry
@Component
export struct AccessibilityTextCase01 {
  build() {
    // ...
    Column() {
        Button()
        .onClick(() => {
            // 播放音频、视频的核心逻辑
        })
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityTextCase02 {
  build() {
    // ...
      Column() {
        // 需确保resource/base/media目录下图标存在，可用其他图标替换演示。
        Button()
          .onClick(() => {
            // 播放音频、视频的核心逻辑
          })
          .accessibilityText('播放') // 配置核心无障碍文本
      }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityDescriptionCase01 {
  build() {
    // ...
    Button()
      .background(Color.Blue)
      .onClick(() => {
        // 全屏逻辑
      })
    // ...
  }
}

@Entry
@Component
export struct AccessibilityDescriptionCase02 {
  build() {
    // ...
    Button()
      .background(Color.Blue)
      .onClick(() => {
        // 全屏逻辑
      })
      // 业务自定义提示信息
      .accessibilityDescription('单指双击即可全屏') // 业务自定义提示信息
    // ...
  }
}

@Entry
@Component
export struct AccessibilityRoleCase01 {
  build() {
    // ...
    Column() {
      Text('点赞')
    }
    .onClick(() => {
      // 业务逻辑
    })
    // ...
  }
}

@Entry
@Component
export struct AccessibilityRoleCase02 {
  build() {
    // ...
    Column() {
      Text('点赞')
    }
    .onClick(() => {
      // 业务逻辑
    })
    .accessibilityRole(AccessibilityRoleType.BUTTON)
    // ...
  }
}

@Entry
@Component
export struct AccessibilityCheckedCase01 {
  build() {
    // ...
    Column() {
      Text('选项1')
        .accessibilityChecked(true)
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityCheckedCase02 {
  build() {
    // ...
    Column() {
      Text('选项1')
        .accessibilityChecked(false)
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilitySelectedCase01 {
  build() {
    // ...
    Column() {
      Text('选项1')
        .accessibilitySelected(true)
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilitySelectedCase02 {
  build() {
    // ...
    Column() {
      Text('选项1')
        .accessibilitySelected(false)
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityGroupCase01 {
  build() {
    // ...
    Column() {
      Text('2026年')
      Text('1月27日')
      Text('星期二')
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityGroupCase02 {
  build() {
    // ...
    Column() {
      Text('2026年')
      Text('1月27日')
      Text('星期二')
    }
    .accessibilityGroup(true)
    // ...
  }
}

@Entry
@Component
export struct AccessibilityLevelCase01 {
  build() {
    // ...
    Column() {
      Text('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold)
    }
    .accessibilityGroup(true)
    .accessibilityLevel('yes')
    // ...
  }
}

@Entry
@Component
struct VirtualNodeExample {
  @Builder customAccessibilityNode() {
    Text('文本2')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }

  build() {
    Column() {
      Text('文本1')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .accessibilityVirtualNode(this.customAccessibilityNode)
  }
}

@Entry
@Component
export struct AccessibilityNextFocusIdCase01 {
  build() {
    // ...
    Column() {
      Button('A')
      Button('C')
      Button('B')
      Button('D')
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityNextFocusIdCase02 {
  build() {
    // ...
    Column() {
      Button('A')
        .accessibilityNextFocusId('b')
      Button('C')
        .id('c')
        .accessibilityNextFocusId('d')
      Button('B')
        .id('b')
        .accessibilityNextFocusId('c')
      Button('D')
        .id('d')
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityScrollTriggerableCase01 {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    // ...
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text(`第${item}项`)
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item)
      }
    }
    .width('100%')
    .height('100%')
    // ...
  }
}

@Entry
@Component
export struct AccessibilityScrollTriggerableCase02 {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    // ...
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text(`第${item}项`)
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item)
      }
      .accessibilityScrollTriggerable(false)
    }
    .width('100%')
    .height('100%')
    // ...
  }
}

@Entry
@Component
export struct AccessibilityFocusDrawLevelCase01 {
  build() {
    // ...
    Stack() {
      Button('文本1')

      Button('文本2')
        .accessibilityLevel('no')
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityFocusDrawLevelCase02 {
  build() {
    // ...
    Stack() {
      Button('文本1')
        .accessibilityFocusDrawLevel(FocusDrawLevel.TOP)

      Button('文本2')
        .accessibilityLevel('no')
    }
    // ...
  }
}

@Entry
@Component
export struct OnAccessibilityFocusCase01 {
  @State isFocus: boolean = false;

  build() {
    // ...
    Column() {
      Text('文本') // 聚焦到此组件时，下面焦点丢失，可验证未获焦状态。
      Button(this.isFocus ? '已获焦' : '未获焦')
        .onAccessibilityFocus((isFocus: boolean) => {
          this.isFocus = isFocus
          console.info(`current isFocus: ${this.isFocus}`)
        })
    }
    // ...
  }
}

@Entry
@Component
export struct OnAccessibilityHoverCase01 {
  @State hoverText: string = '无';

  build() {
    // ...
    Column() {
      Text(this.hoverText)
        .onTouch((event: TouchEvent) => {
          this.hoverText = '上屏文字';
        })
    }
    // ...
  }
}

@Entry
@Component
export struct OnAccessibilityHoverCase02 {
  @State hoverText: string = '无';

  build() {
    // ...
    Column() {
      Text(this.hoverText)
        .onTouch((event: TouchEvent) => {
          this.hoverText = '上屏文字';
        })
        .onAccessibilityHover((isHover: boolean, event: AccessibilityHoverEvent) => {
          // 模拟单击上屏
          this.hoverText = '上屏文字';
        })
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityActionInterceptCase01 {
  @State isOn: boolean = false;

  build() {
    // ...
    Column() {
    Toggle({ type: ToggleType.Switch, isOn: this.isOn})
        .onClick(() => {
        this.getUIContext().showAlertDialog({
            title: '',
            message: this.isOn ? '确认关闭' : '确认开启?',
            primaryButton: {
            value: '确认',
            action: () => {
                this.isOn = !this.isOn;
            }
            },
            secondaryButton: {
            value: '取消',
            action: () => {}
            }
        })
        })
    }
    // ...
  }
}

@Entry
@Component
export struct AccessibilityActionInterceptCase02 {
  @State isOn: boolean = false;

  build() {
    // ...
    Column() {
    Toggle({ type: ToggleType.Switch, isOn: this.isOn})
        .onClick(() => {
        })
        .onAccessibilityActionIntercept((action: AccessibilityAction) => {
        // ...
        if (action == AccessibilityAction.ACCESSIBILITY_CLICK) {
            this.getUIContext().showAlertDialog({
            title: '',
            message: this.isOn ? '确认关闭' : '确认开启?',
            primaryButton: {
                value: '确认',
                action: () => {
                this.isOn = !this.isOn;
                }
            },
            secondaryButton: {
                value: '取消',
                action: () => {}
            }
            })
            return AccessibilityActionInterceptResult.ACTION_INTERCEPT;
        }
        return AccessibilityActionInterceptResult.ACTION_CONTINUE;
        })
    }
    // ...
  }
}

@Entry
@Component
export struct SendAccessibilityEventCase01 {
  @State isVisible: boolean = true;

  build() {
    // ...
    Column() {
      Button('文本1')
        .visibility(this.isVisible ? Visibility.Visible : Visibility.Hidden)
        .onClick((event: ClickEvent) => {
          this.isVisible = false;
      })

      Button('文本2')
    }
    // ...
  }
}

import { accessibility } from '@kit.AccessibilityKit';

@Entry
@Component
export struct SendAccessibilityEventCase02 {
  @State isVisible: boolean = true;

  build() {
    // ...
    Column() {
      Button('文本1')
        .visibility(this.isVisible ? Visibility.Visible : Visibility.Hidden)
        .onClick(() => {
          this.isVisible = false;
          const event: accessibility.EventInfo = {
            type: "requestFocusForAccessibility",
            // 需要替换为当前的工程名称
            bundleName: "com.samples.uiextensionandaccessibility",
            triggerAction: "common",
            customId: '123'
          }
          accessibility.sendAccessibilityEvent(event);
      })

      Button('文本2')
        .id('123') // 设置组件id
    }
    // ...
  }
}

@Entry
@Component
export struct SendAccessibilityEventCase03 {
  @State text: string = '暂停';
  private isPlay: boolean = false;

  build() {
    // ...
    Column() {
      Button(this.text)
        .onClick(() => {
          this.isPlay = !this.isPlay;
          this.text = this.isPlay ? '暂停' : '播放';
        })
    }
    // ...
  }
}

import { accessibility } from '@kit.AccessibilityKit';

@Entry
@Component
export struct SendAccessibilityEventCase04 {
  @State text: string = '暂停';
  private isPlay: boolean = false;

  build() {
    // ...
    Column() {
      Button(this.text)
        .onClick(() => {
          this.isPlay = !this.isPlay;
          this.text = this.isPlay ? '暂停' : '播放';
          const event: accessibility.EventInfo = {
            type: "announceForAccessibility",
            // 需要替换为当前的工程名称
            bundleName: "com.samples.uiextensionandaccessibility",
            triggerAction: "common",
            textAnnouncedForAccessibility: this.text,
          }
          accessibility.sendAccessibilityEvent(event);
        })
    }
    // ...
  }
}