文章目录
- 概述
- 依赖导入
- 核心概念：无障碍播报三属性
- 代码场景
- 场景1：基础编辑标题栏（无自定义播报）
- 场景2：带头像、禁用按钮 + 自定义播报（核心）
- 代码
- 总结
概述
EditableTitleBar右侧自定义菜单按钮支持无障碍屏幕朗读播报（API 18+），可通过专属属性自定义按钮名称、操作描述与朗读权限，帮助视觉障碍用户清晰识别按钮功能，符合应用无障碍设计规范。
依赖导入
import{Prompt,EditableLeftIconType,EditableTitleBar}from'@kit.ArkUI';核心概念：无障碍播报三属性
EditableTitleBarMenuItem提供三个无障碍播报属性，控制屏幕朗读行为：
| 属性 | 说明 | 取值 |
|---|---|---|
| accessibilityText | 按钮播报名称（是什么） | 字符串，如“删除”“取消” |
| accessibilityDescription | 按钮操作描述（做什么） | 字符串，如“点击即可删除” |
| accessibilityLevel | 是否可被朗读识别 | yes / no / auto |
代码场景
场景1：基础编辑标题栏（无自定义播报）
左侧取消图标 + 右侧保存按钮，无自定义菜单，使用系统默认播报。
EditableTitleBar({leftIconStyle:EditableLeftIconType.Cancel,title:'编辑页面',menuItems:[],onCancel:()=>{Prompt.showToast({message:'on cancel'});},onSave:()=>{Prompt.showToast({message:'on save'});}})场景2：带头像、禁用按钮 + 自定义播报（核心）
左侧返回图标 + 头像 + 副标题 +右侧禁用按钮自定义播报。
menuItems:[{value:$r('sys.media.ohos_ic_public_remove'),label:'取消',isEnabled:false,// 按钮禁用accessibilityText:'删除',// 朗读：删除accessibilityDescription:'点击即可删除',// 朗读：点击即可删除action:()=>{Prompt.showToast({message:'show toast index 2'});}}]- 播报效果：删除，点击即可删除
- isEnabled: false：按钮可见但不可点击
- accessibilityLevel：默认 auto → 可朗读
代码
import{Prompt,EditableLeftIconType,EditableTitleBar}from'@kit.ArkUI';@Entry@Componentstruct Index1{build(){Row(){Column(){Divider().height(2).color(0xCCCCCC)EditableTitleBar({leftIconStyle:EditableLeftIconType.Cancel,title:'编辑页面',menuItems:[],onCancel:()=>{Prompt.showToast({message:'on cancel'});},onSave:()=>{Prompt.showToast({message:'on save'});}})Divider().height(2).color(0xCCCCCC)EditableTitleBar({// 头像、自定义按钮不可用leftIconStyle:EditableLeftIconType.Back,title:'主标题',subtitle:'副标题',imageItem:{value:$r('sys.media.ohos_ic_normal_white_grid_image'),isEnabled:true,action:()=>{Prompt.showToast({message:'show toast index 1'});}},menuItems:[{value:$r('sys.media.ohos_ic_public_remove'),label:'取消',isEnabled:false,accessibilityText:'删除',accessibilityDescription:'点击即可删除',action:()=>{Prompt.showToast({message:'show toast index 2'});}}],onCancel:()=>{this.getUIContext()?.getRouter()?.back();},})Divider().height(2).color(0xCCCCCC)}}}}运行效果如图：
总结
- API 版本：API 18+才支持无障碍播报属性
- 播报优先级：
accessibilityText>label> 默认值 - accessibilityLevel 规则：
yes：强制可朗读no：完全不朗读auto：自动识别（默认）
- 禁用按钮仍可播报：
isEnabled: false不影响播报 - 左侧头像不支持无障碍配置：官方明确说明
- 不支持 Wearable 设备
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
