休闲娱乐微信群

微信邦

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2298|回复: 0

小程序无障碍 使用更有爱

[复制链接]
发表于 2022-4-21 11:36:05 | 显示全部楼层 |阅读模式

信息无障碍开发工程师 李朗 原创



在互联网飞速发展的时代,亿万用户通过智能手机获得更多生活便利。然而,技术的飞速发展并未完全覆盖到社会的 “小众” 群体——视障人群的需求。当前不少主流 APP 无法支持读屏软件,或无法完全应用读屏功能,间接导致视障人士远离互联网的便利性。
为了满足视障人士对小程序的访问需求,小程序团队持续优化提升无障碍能力,提供 aria-component 组件,匹配读屏软件,方便小程序开发者适配无障碍访问能力,最终惠及读屏用户。

无障碍开发能力升级



自基础库 2.7.1 版本起,小程序支持部分 ARIA 标签,内置无障碍属性。对于非原生组件,开发者可以结合开发需求,添加 aria-component 组件的无障碍属性,无需进行其他操作,即可快捷接入无障碍访问。


view 组件为例,开发者可以添加 aria-role 和 aria-label 属性,便于读屏软件自动朗读对应组件的角色和附带的额外信息。例如输入以下代码,读屏软件将自动朗读 “按钮 提交表单”。

<view aria-role="button" aria-label="提交表单">提交</view>

除此以外,微信开发者工具现已支持「无障碍访问模式插件」,方便开发者调试无障碍访问能力,省时省力。获取路径:微信开发者工具菜单栏 - 设置 - 扩展设置 - 模拟器插件。



无障碍开发实践总结


应用小程序原生无障碍组件能够减轻开发负担,但是由于无障碍场景的特殊性,开发过程仍会遇到不少问题,主要集中在以下方面:

无法聚焦无法聚焦指的是读屏无法聚焦到某个控件,直接导致读屏用户无法感知到控件的存在,从而无法使用此功能。在小程序中,无法聚焦的控件主要出现在 icon 和 image 2 个方面,因此为 image 和 icon 添加 aria-label 属性便可解决大部分聚焦问题。
聚焦顺序错误聚焦顺序错误指的是使用单指扫动时,聚焦页面控件的顺序不正确。应用浮动 / 固定控件却没有按照正常文档流书写容易造成这个问题。因此建议按照页面控件的正常文档流书写元素,以保证整个页面控件的聚焦顺序正确。
层级聚焦错误在 z-index 的应用场景下,弹框弹出后,弹出层与底层均能被聚焦。建议使用 aria-hidden 属性控制底层是否可聚焦。

<view aria-hidden="true" class="z1">底层页面,不可浏览</view><view aria-hidden="false" class="z2">弹出页面,可浏览</view>

非文本内容缺乏替代文本由于非文本内容 (例如图片、图表) 无法被读屏直接读取,开发者可通过 aria-label 属性为非文本内容添加对应的替代文本,实现成功读屏。除此以外,某些场景还需要后端支持,例如在动态图片广告场景下,前端无法直接添加固定文本,需要联合后端下发对应动态图片广告的文本。
忽略设置不可用状态在无障碍开发过程中,开发者容易忽略不可用状态的设置,导致读屏用户点击组件无反应的糟糕体验。因此建议使用 aria-disabled 属性标识不可用状态,以便读屏及时提醒不可用状态。
忽略设置自定义控件在无障碍开发过程中,开发者容易忽略设置自定义控件相关属性,例如控件名称、类型、状态,导致读屏软件无法识别。
以 button 为例,view 在读屏状态下无需设置控件,因此在未设置控件名称的情况下,读屏软件仅能朗读 “搜索” 操作,但无法读取具体角色,导致读屏用户无法理解搜索的是什么。例如增加 aria-role="button" 属性,便于读屏软件朗读 “搜索按钮”。

<view aria-label="搜索" style="button样式">搜索</view>

以 tab 选项卡为例,除了设置名称和类型,开发者还需要设置其状态,否则读屏用户无法知道自己是否选中选项卡。控件状态的代码示例如下:

  <view aria-role="tablist" class="tablist">    <view aria-role="tab" aria-selected="false">蔬菜</view>    <view aria-role="tab" aria-selected="true">水果</view>    <view aria-role="tab" aria-selected="false">粮油</view>    <view aria-role="tab" aria-selected="false">调味品</view>  </view>

aria-label 属性被滥用aria-label 属性能够实现控件属性无障碍应用,但是不代表任何场景均可使用该属性。尤其在多语言场景、多系统读屏差异等情况下,单纯应用 aria-label 属性容易导致读屏错误。


从产品设计到技术开发,无障碍优化需要切身从读屏用户的需求考虑,契合用户习惯,例如所有内容均可被读屏浏览、合理设置控件的类型及状态等等。
互联网加强人与人之间相互理解,信息互通。每一个人都是需要被连接的对象。推动信息无障碍,解决信息不对称,实现更美好的世界!

如有其他小程序应用相关的问题,可在 微信开放社区小程序交流专区 发帖互动,技术专员将为大家解答及进行深度交流。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


微信邦网联系QQ|Archiver|手机版|小黑屋|鲁公网安备 37082802000167号|微信邦 ( 鲁ICP备19043418号-5 )

GMT+8, 2022-11-27 14:42 , Processed in 0.107079 second(s), 20 queries .

Powered by Discuz! X3.4

© 2001-2013 Wxuse Inc. | Style by ytl QQ:1400069288

快速回复 返回顶部 返回列表