鸿蒙多功能工具箱开发实战(二十六)-无障碍访问支持前言无障碍访问是应用包容性的重要体现帮助视障、听障等用户群体更好地使用应用。本文将讲解HarmonyOS无障碍功能的实现。一、无障碍基础1.1 无障碍属性ArkUI组件支持以下无障碍属性属性说明accessibilityText无障碍文本accessibilityDescription无障碍描述accessibilityLevel无障碍等级accessibilityGroup是否为无障碍组1.2 基础用法EntryComponentstruct AccessiblePage{build(){Column(){// 图片添加无障碍描述Image($r(app.media.icon)).width(48).height(48).accessibilityText(应用图标).accessibilityDescription(多功能工具箱应用图标)// 按钮添加无障碍支持Button(计算).accessibilityText(计算按钮).accessibilityDescription(点击此按钮开始计算).onClick((){// 计算逻辑})// 输入框添加提示TextInput({placeholder:请输入金额}).accessibilityText(金额输入框).accessibilityDescription(请输入需要计算的金额)}}}二、无障碍组件封装2.1 无障碍按钮/** * 无障碍按钮组件 */Componentexportstruct AccessibleButton{Proptext:stringPropaccessibilityLabel:stringPropaccessibilityHint:stringPropdisabled:booleanfalseonButtonClick:()void(){}build(){Button(this.text).enabled(!this.disabled).accessibilityText(this.accessibilityLabel||this.text).accessibilityDescription(this.accessibilityHint).accessibilityLevel(this.disabled?no:yes).onClick((){if(!this.disabled){this.onButtonClick()}})}}2.2 无障碍图片/** * 无障碍图片组件 */Componentexportstruct AccessibleImage{Propsrc:Resource|stringPropalt:stringPropdescription:stringPropwidth:number100Propheight:number100build(){Image(this.src).width(this.width).height(this.height).alt(this.alt)// 图片加载失败时的替代文本.accessibilityText(this.alt).accessibilityDescription(this.description)}}2.3 无障碍列表项/** * 无障碍列表项 */Componentexportstruct AccessibleListItem{Proptitle:stringPropsubtitle:stringPropicon:stringonItemClick:()void(){}build(){Row(){if(this.icon){Text(this.icon).fontSize(24).margin({right:12})}Column(){Text(this.title).fontSize(16)if(this.subtitle){Text(this.subtitle).fontSize(12).fontColor(#999999).margin({top:4})}}.layoutWeight(1).alignItems(HorizontalAlign.Start)Text(›).fontSize(20).fontColor(#999999)}.width(100%).height(56).padding({left:16,right:16})// 无障碍支持.accessibilityGroup(true).accessibilityText(${this.title}${this.subtitle}).accessibilityDescription(双击进入).onClick((){this.onItemClick()})}}三、屏幕阅读器支持3.1 焦点管理EntryComponentstruct FocusManagementPage{StatefocusIndex:number0build(){Column(){// 焦点顺序控制Button(按钮1).tabIndex(1).defaultFocus(true)// 默认焦点.onClick((){})Button(按钮2).tabIndex(2).onClick((){})Button(按钮3).tabIndex(3).onClick((){})// 跳过装饰性元素Image($r(app.media.decoration)).accessibilityLevel(no)// 屏幕阅读器跳过}}}3.2 实时区域通知/** * 无障碍通知组件 */Componentexportstruct AccessibleAnnouncement{Statemessage:stringStateisVisible:booleanfalse/** * 显示通知 */show(msg:string):void{this.messagemsgthis.isVisibletrue// 3秒后自动隐藏setTimeout((){this.isVisiblefalse},3000)}build(){if(this.isVisible){Text(this.message).width(100%).height(48).backgroundColor(#333333).fontColor(#FFFFFF).textAlign(TextAlign.Center)// 实时区域屏幕阅读器会自动播报.accessibilityLiveRegion(polite)}}}四、最佳实践4.1 语义化结构EntryComponentstruct SemanticPage{build(){Column(){// 标题区域Column(){Text(计算结果).fontSize(24).fontWeight(FontWeight.Bold).accessibilityRole(header)}.accessibilityGroup(true)// 内容区域Column(){Text(税后工资: 12000元).accessibilityRole(text)Text(应纳税额: 500元).accessibilityRole(text)}.accessibilityGroup(true).accessibilityText(计算结果详情)// 操作区域Row(){Button(保存).accessibilityRole(button)Button(分享).accessibilityRole(button)}.accessibilityGroup(true).accessibilityText(操作按钮)}}}4.2 状态变化通知EntryComponentstruct StateAnnouncementPage{Stateloading:booleanfalseStateresult:stringasynccalculate(){this.loadingtrue// 通知用户正在加载this.announce(正在计算请稍候)awaitthis.doCalculate()this.loadingfalsethis.result计算完成// 通知用户结果this.announce(计算完成结果是this.result)}privateannounce(message:string){// 使用无障碍API播报// 实际实现需要调用系统无障碍服务}build(){Column(){if(this.loading){LoadingProgress().accessibilityText(正在计算)}else{Text(this.result).accessibilityText(计算结果: this.result)}}}}五、高级无障碍功能5.1 无障碍流程图是否用户操作无障碍服务检测是否开启?播报内容正常显示用户理解5.2 手势支持Componentstruct AccessibleGesture{onDoubleTap:()voidbuild(){Text(双击激活).accessibilityText(双击此按钮激活功能).gesture(TapGesture({count:2}).onAction(()this.onDoubleTap()))}}5.3 键盘导航Componentstruct KeyboardNavigation{StatefocusedIndex:number0build(){Column(){ForEach([选项1,选项2,选项3],(item:string,index:number){Text(item).focusable(true).defaultFocus(indexthis.focusedIndex).onKeyEvent((event){if(event.keyCodeKeyCode.KEYCODE_DPAD_DOWN){this.focusedIndexMath.min(this.focusedIndex1,2)}})})}}}图 1 无障碍设置页面选择是否启用六、小结本文详细讲解了无障碍支持✅ 无障碍属性使用✅ 无障碍组件封装✅ 焦点管理✅ 屏幕阅读器支持✅ 语义化结构✅ 手势支持✅ 键盘导航系列文章导航下期预告鸿蒙多功能工具箱开发实战(二十七)-安全加固与数据保护