技术背景
2020 年末,工信部印发《互联网应用适老化及无障碍改造专项行动方案》通知,并把适老化及无障碍改造水平评测和企业信用评价纳为重点工作,在国家的大力倡导下,我们更应该要关注互联网应用的无障碍访问。
全国现有 8500 多万残障人士,2 亿多 60 岁以上的老年人,还有隐藏在人群中的大量有障碍人士。和家亲拥有着大量的用户群体,我们要提高用户的无障碍体验,让他们也能共享便捷操作,就必须要加大互联网无障碍访问在我们产品中的应用。公平无差别的对待每一位用户,增强信息获取无障碍应该成为我们产品的一部分,这也会使得我们产品变得更加人性化。
了解无障碍访问中的ARIA
ARIA全称“Accessible Rich Internet Applications(可访问的富互联网应用)”,在当下讨论ARIA基本上都是为读屏设备或软件,而读屏设备或软件的使用者多是视力障碍人员,因此,ARIA约定俗成就成了对视障用户的无障碍访问支持技术的代称了。
首先,了解下常见的读屏软件,如下列表:
移动端:
-
- Android: TalkBack
- Android: Funtouch
- iPhone: VoiceOver
桌面端:
-
- Windows: NVDA, JAWS
- Chrome: ChromeVox
- OSX: VoiceOver
实行需要引入什么框架、如何集成
目前找到3个可以引入的方案
- 太阳湾软件(www.rrbay.com/)
目前已经找到相关引入的方案,且有demo完成可以正常调用,调用网站一般(政府网站)
- 中国互联网信息无障碍公共服务平台(wza.isc.org.cn/index.html)
目前暂未能申请到调用权限,调用网站较多(淘宝,京东,微博,政府网站等)
需要申请获取appid,但根据各个网站搜到的情况,官网维护中还没有找到申请的通道
- 哈尔滨亿时代数码科技开发有限公司(www.hrbesd.com/contact.htm…)
调用方式和太阳湾软件大同小异,引入js即可
web实现方案
3.1太阳湾软件:www.rrbay.com/
以太阳湾信息无障碍公共服务平台为例,地址:www.qqqao.com/index.html
- 1.将canyou文件夹放到
http://www.qqqao.com/站点指向的服务器目录下,保证http://www.qqqao.com/canyou/能够被访问到即可。 - 2.在
</body>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤)。建议在header.htm类似的页头模板页面中引用jquery,以达到一处安装,全站皆有的效果。下载:jquery.min.js - 3.请将
<script id="rrbayJs" src="/canyou/js/wza.min.js"></script>代码添加到网站全部页面的</body>标签前以及jquery.min.js后面。建议在header.htm类似的页头模板页面中引用代码,以达到一处安装,全站皆有的效果。 - 4.在
http://www.qqqao.com/首页位置添加链接,确保红色加粗的不变。可以使用任何html标签。确保该链接放在页面的易发现位置。链接代码如下:
<a id="wzayd"title="网站信息无障碍工具条"href="javascript:;"class="wzayd"accesskey="g">无障碍阅读</a>
测试部署是否成功
在浏览器中输入地址或通过单击原网站头部无障碍操作条中的链接即可完成对网站的信息无障碍化访问。
注意:严格按照上面步骤部署安装修改,请保留太阳湾版权信息;不要擅自修改canyou文件夹目录,这个文件夹目录名称关系到无障碍工具条能否部署成功。
web移动端方案
4.1太阳湾软件:www.rrbay.com/
安装部署:
1、获取的代码类似:<script id="rrbayJs" src="//wza.rrbay.com/js/wza-m.min.js"></script>。
2、在</body>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤)。建议在header.htm类似的页头模板页面中引用jquery,以达到一处安装,全站皆有的效果。
3.请将第1步获取的代码添加到网站全部页面的</body>标签前以及jquery.min.js后面。建议在header.htm类似的页头模板页面中安装获取的代码,以达到一处安装,全站皆有的效果。
信息无障碍工具条界面
- 太阳湾软件:
- 中国互联网信息无障碍公共服务平台
- 哈尔滨亿时代数码科技开发有限公司