无障碍js插件

无障碍插件

这是一个针对于 有视障、听说障碍、读写障碍、肢体障碍，机体功能衰退的老年人群开发的一个辅助插件使用网站的js插件

插件地址： https://github.com/duheng/assist

插件接入方式：

• 1 - 在页面合适的地方如banner处加入id为 assist-open 的标签
• 2 - 在页面底部 body 之前引入插件；
• 3 - 如果需要特殊处理的地方使用后面的API做对应处理;

无障碍

API

• showTag; 用于打开无障碍标识，（点击无障碍后并不在当前页面打开，而是跳转到其他没有调用showTag的页面打开）

无障碍

 

• zoomState; 返回页面放大倍数

无障碍

 

• openState; 返回插件打开状态

无障碍

 

• bigTextState; 大字幕开启状态

无障碍

 

页面标注:

对于插件无法识别或识别不准的标签需业务自行标注，标注规范如下

1 - 对于img标签，需设置 alt ，如

2 - 对于其他标签，需使用 title 进行标注，如

 

   墨子工程无障碍
 

3 - 对于非语意化标签，需加入 role来标注其真实属性，如果不标注title，则取标签内容，如

 

   提交
 

隐藏模块：

对业务中需要隐藏的模块加一个class名 qunar-assist-hide ，插件在打开的时候会自动监测这个class名统一隐藏

页面缩放影响：

随着页面放大，部分非自适应或者绝对定位的组件可能会出现错位问题，需业务开发自行调整

大段文本识别：

对于可能出现大段文本的地方，需要在当前标签加一个名为 qunar-assist-long-text 的class，插件会自动对这个class下的内容进行分割

兼容性

• ie10+
• 所有主流浏览器
• 火狐（不支持页面放大功能）

其他推荐

Mozi ： 一个react-native框架 https://github.com/duheng/Mozi ，此框架采用了小程序的配置部分设计，结合非侵入式编程思想搭建的。在此框架基础上你基本上只需要关注页面开发即可