文档管理中心

自定义无障碍滚动步数

设计场景

可调节的滑动条支持长按拖拽调节,调节步长通常允许小于取值范围的1%,适用于视频进度等精细控制场景。然而,长按拖拽操作对视障用户不够友好。为此,当屏幕朗读功能开启时,系统额外支持了通过上下扫动手势调节已聚焦的滑动条,每次调节后自动播报当前状态值(默认为百分比格式)。为避免连续调节时重复播报相同状态值,需通过accessibilityActionOptions配置滑动条的无障碍操作步数,确保每次调节步长大于或等于取值范围的1%。

accessibilityActionOptions说明:

  • scrollStep:指定由无障碍手势触发的无障碍滚动操作步数。屏幕朗读模式下,聚焦Slider组件时,通过上下扫动手势调节滑动条,实际步长为scrollStep×step。仅对Slider组件配置生效,其他组件配置不生效,取值范围为[1, (max- min)/step],默认值为1。设置值超出取值范围时取默认值1,设置值为取值范围内的非整数时向下取整。

开发流程

如下示例实现一个可调节的滑动条,并指定无障碍操作的步数:

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. export struct Rule_2_1_15 {
  4. title: string = 'Rule 2.1.15';
  5. @State scrollStep: number = 3;
  6. build() {
  7. NavDestination() {
  8. Column() {
  9. // 创建一个滑动条,最小值为0,最大值为100,当前值为10,步长为10。
  10. Slider({
  11. min: 0,
  12. max: 100,
  13. value: 10,
  14. step: 10,
  15. style: SliderStyle.OutSet
  16. })
  17. // 在屏幕朗读模式下,聚焦滑动条后执行上下扫动,滑动条调节步数为3。
  18. .accessibilityActionOptions({ scrollStep: this.scrollStep })
  19. .onChange((value: number, mode: SliderChangeMode) => {
  20. console.info('value:' + value + 'mode:' + mode.toString());
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. .title(this.title)
  27. }
  28. }
在 开发与测试 开放能力API 中进行搜索
请输入您想要搜索的关键词