uni-app跨平台框架对微信小程序的aria无障碍属性改善

---

一、ARIA是什么？

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。

而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！

官方网址教学：https://www.w3.org/WAI/ARIA/apg/

二、uni-app对微信小程序的无障碍支持情况。

本文章主要针对新闻/资讯类App模板进行了无障碍支持情况的测试
通过测试，发现主要存在以下无障碍问题：

• 选中的分类没有添加选中状态提示；
• 每条新闻项目的图片都朗读为图片，属于无标签问题；
• 每条新闻的焦点拆分太多，导致浏览效率降低，一条新闻被拆分成了标题、图片、作者、评论数、时间等五个焦点；

接下来，我们就利用微信小程序所支持的无障碍属性对这个新闻小程序进行改造

三、改善方案

• 为顶部分类添加选中状态提示
• 合并每条新闻的标题、图片、作者、评论数、时间为一个焦点，也就是每条新闻为一个焦点，便于用户浏览

第一步，给分类添加选中状态

第一步，给分类添加选中状态，阅读代码，我们发现当选中某个分类后，会动态修改分类名称text元素的class

<view class="tabitem" :key="index" v-for="(item,index) in title" @click="bindtop((index))"
			:aria-selected="tab_id==index" :aria-label="item.label" aria-role="tab" :tabindex="tab_id==index?'0':'-1'">
			<view :class="tab_id==index?'selected':''">
				{{item.name}}
			</view>
		</view>

这里的关键代码是

:aria-selected="tab_id==index" :aria-label="item.label" aria-role="tab" 

意思是当选定的分类等于当前索引时返回true，否则返回false.
这里的aria-select属性是选定状态属性，接受布尔值。

添加完选定状态属性，结果发现还是读不出选定状态，注意知识点来啦：

要给容器添加选定状态、必须添加控件角色，单纯给容器加选定状态不生效。

尝试给分类容器添加一个无障碍角色 tab

 aria-role="tab" 

就可以实现选中状态提示的效果了

第二步，合并每条新闻的所有内容为一个大的焦点

我们需要给每条新闻设置成一个焦点，思路就是直接给每条新闻的容器添加一个无障碍角色，这样就能达到我们要的效果，例如这样：

	<view class="item" @click="detail(item.name)" :key="index" v-for="(item,index) in list"
	 aria-role="text">
			<view class="item_image">
				<image :src="item.url" mode="scaleToFill"></image>
			</view>
			<view class="text">
				{{item.name}}
			</view>
		</view>

这里的关键代码是

aria-role="text"

设置完后，就可以实现合并多个项目为一个焦点，可以给相关内容的容器设置一个无障碍角色aria-role

第三步，修改朗读内容

修改朗读内容，可以手动设置无障碍标签aria-label实现
这里的关键代码是

aria-label="资讯页面"

如此添加后，屏幕阅读器阅读的内容就会变成 咨询页面 四字。

aria-label属性介绍如下：

当想要被屏幕读取器读取的标签文本已在其他元素中存在时，可以将aria-labelledby值为该元素的id。

表单区添加了role=“form”，当跳转到该区域时，不仅会读出"表单区"，也会读出"使用手机号码注册"。

<div role="form" aria-labelledby="form-title">
    <span id="form-title">使用手机号码注册</span>
    <form>……</form>
</div>

如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容。

---

总结

以上就是uni-app跨平台框架对微信小程序的aria无障碍属性改善的内容。
更多的属性设置详细教程可以参考官方网址：https://www.w3.org/WAI/ARIA/apg/
参考文章：https://zhuanlan.zhihu.com/p/164409707