滑杆在OpenHarmony中的可访问性如何设计

OpenHarmony 滑杆可访问性设计指南

一 设计目标与原则

• 目标：让滑杆（Slider）对所有用户可用，包括使用屏幕阅读器、大字体/高对比度、遥控器/键盘以及单手操作的用户。
• 原则：
  • 可感知：当前值与范围信息必须可被辅助技术获取（如朗读“亮度 60，范围 0–100”）。
  • 可操作：支持多种交互通道（触摸、方向键/遥控器、语音），触控目标足够大且防误触。
  • 可理解：标签与提示清晰，单位与步长明确，状态变化有即时反馈。
  • 健壮性：在不同设备形态（手机、手表、车机、智慧屏）上保持一致的语义与交互模型。

二 语义与信息架构

• 关联标签与说明：为每个滑杆提供可聚焦的可访问名称（如“音量”）与辅助说明（如“当前值：60，范围：0–100，步长：1”），确保读屏顺序正确（标签 → 滑杆 → 说明/值提示）。
• 数值表达与单位：在界面中以“当前值 + 单位”呈现（如“60%”“-10 dB”），并与读屏文案一致；步长不为 1 时明确提示（如“步长 5”）。
• 状态反馈：在值改变时同步更新可见提示与读屏提示；禁用/只读状态需明确告知（如“不可用”）。
• 多端一致性：跨设备保持相同的语义与操作方式，避免“手机可滑动、车机不可操作”的不一致体验。

三 交互与控件配置要点

• 步长与范围：设置合理的min / max / step，避免过细步长导致难以精确控制；步长改变时同步更新说明文案。
• 视觉与触控：使用高对比度轨道与滑块，确保触控热区充足；在智慧屏/车机场景优先使用方向键/遥控器可聚焦与操作。
• 提示与步进：启用showTips(true)显示实时值提示；当设置step时启用**showSteps(true)**展示步进刻度，便于视觉定位与理解。
• 方向与布局：根据空间与交互方式选择水平/垂直方向（direction: Axis.Horizontal | Axis.Vertical），垂直方向在电视/车机更利于纵向排列与焦点移动。
• 禁用与只读：在不可交互状态下禁用滑杆并给出可访问说明，避免仅用颜色表达状态。

四 跨设备与多语言适配

• 大屏与焦点：在智慧屏/车机上采用焦点导航与更大的触控目标，减少误触；保持焦点顺序与读屏顺序一致。
• 字体与对比度：支持大字体与高对比度模式，避免将信息仅以颜色编码；必要时提供图案或纹理辅助辨识。
• RTL 与国际化：从右向左（RTL）语言环境下保持滑杆方向与交互逻辑一致；所有可见文本（标签、单位、提示）均本地化，并与读屏文本一致。
• 设备特性：在手表等小屏设备上减少周边装饰，突出滑杆与当前值；在车机上减少交互层级，优先语音与方向盘按键联动。

五 ArkTS 与 JS 实现示例

• ArkTS 示例（含读屏提示与步进刻度）

@Entry
@Component
struct AccessibleSlider {
  @State value: number = 50
  readonly min: number = 0
  readonly max: number = 100
  readonly step: number = 5

  build() {
    Column({ space: 12 }) {
      // 1) 可访问名称（label）
      Text('音量')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)

      // 2) 滑杆本体（可聚焦、可操作）
      Slider({
        value: this.value,
        min: this.min,
        max: this.max,
        step: this.step,
        style: SliderStyle.InSet,
        direction: Axis.Horizontal
      })
        .width('80%')
        .showTips(true)     // 实时值提示
        .showSteps(true)     // 步进刻度
        .onChange((v: number, mode: SliderChangeMode) => {
          this.value = v
          // 3) 可选：同步朗读当前值（示例日志，读屏需结合语义节点）
          console.info(`当前音量：${v}`)
        })

      // 4) 辅助说明（范围、步长、单位）
      Text(`范围 ${this.min}–${this.max}，步长 ${this.step}，单位：%`)
        .fontSize(12)
        .fontColor(0x666666)
    }
    .padding(16)
  }
}

要点：通过label 文本 + 辅助说明提供完整语义；启用showTips/showSteps提升可见性与定位；在 onChange 中同步业务状态与日志/读屏提示。

• JS 示例（eTS/JS UI，最小可访问结构）

<!-- index.hml -->
<div class="slider-group">
  <text class="label">亮度</text>
  <slider min="0" max="100" value="{{ brightness }}" onchange="onBrightnessChange" mode="inset"></slider>
  <text class="hint">范围 0–100，单位：%</text>
</div>

// index.js
export default {
  data: { brightness: 50 },
  onBrightnessChange(e) {
    this.brightness = e.value; // 同步更新可见与读屏信息
  }
}

要点：保持“标签—滑杆—说明”结构；在说明中标注范围与单位；在事件回调中更新状态与反馈。