无障碍工具条本地化安装部署

网站信息无障碍工具条v4.5下载

点击下载-->无障碍工具条gitee源码

点击下载-->无障碍工具条github源码

无障碍工具部署步骤：

以太阳湾信息无障碍公共服务平台为例，地址：http://www.qqqao.com/index.html

• 步骤一：将canyou文件夹放到 http://www.qqqao.com/ 站点指向的服务器目录下 ( 如果是vue项目，请把canyou文件夹放到public文件夹下)，保证http://www.qqqao.com/canyou/能够被访问到即可。

• 步骤二：在</head>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤)。建议在header.htm类似的页头模板页面中引用jquery，以达到一处安装，全站皆有的效果。下载:jquery.min.js

• 步骤三：请将<script defer async id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin" ></script>代码添加到网站全部页面的</head>标签前，注意需要放在jquery.min.js 后面,后面,后面，顺序别错了。建议在header.htm类似的页头模板页面中引用代码，以达到一处安装，全站皆有的效果。

• 步骤四（此步骤可忽略）：盲人读屏专用的区域跳转功能，需要根据原网站的定制修改选择器（selector）.

  

   <!--区域跳转功能定制本地路径 -->
   /canyou/js/site/localhost.js
  
   <!--区域跳转功能定制外网路径,域名不要带www -->
   /canyou/js/site/域名.js

• 步骤五：在http://www.qqqao.com/首页位置添加链接，确保红色加粗的不变。可以使用任何html标签。确保该链接放在页面的易发现位置。链接代码如下：

  <a id="wzayd" title="网站信息无障碍工具条" href="javascript:;" class="wzayd" accesskey="g">无障碍阅读</a> 

测试部署是否成功

在浏览器中输入地址或通过单击原网站头部无障碍操作条中的链接即可完成对网站的信息无障碍化访问。

注意:严格按照上面步骤部署安装修改,请保留太阳湾版权信息；不要擅自修改canyou文件夹目录，这个文件夹目录名称关系到无障碍工具条能否部署成功。

• 选择器（selector）区域跳转功能localhost.js 配置参考如下：

var AriaSite = {};
AriaSite["selNav"] = [
  { "selector": ".rrbay_body > div#wrapper > div#header > div.wzaColor", "content": "主" },     
];
AriaSite["selInfoModel"] = [
  { "selector": ".rrbay_body > div#wrapper > div#header > a#logo > img ", "content": "头条" },
];
AriaSite["selService"] = [
  { "selector": ".rrbay_body > div#wrapper > div#footer", "content": "网站底部" },
];
AriaSite["selInteract"] = [
  { "selector": ".rrbay_body > div.main > div.head > div.head_content", "content": "搜索" },
];

AriaSite["selNewsList"] = [
  { "selector": ".rrbay_body > div#wrapper > div#main > div#sidebar> ul#nav", "content": "左侧列表" },
];
AriaSite["selNewsBody"] = [
  { "selector": ".rrbay_body > div#wrapper > div#main > div#content", "content": "详细内容" },
];

(function () {
    //智能解析方式改造网站
    $("img[src='css/logo.jpg']").attr("alt", "湖北太阳湾官方网站logo链接").attr("tabindex", "0");
})();

• 选择器（selector）路径定位方法，按浏览器f12

注意选择器以.rrbay_body开头

第一种：纯蓝工具条(默认)

• 查看效果,打开 http://www.qqqao.com/index.html ， 点击顶部点击进入适老模式

• 引用调用

   <script id="rrbayJs" src="/canyou/js/wza.min.js?bluer" referrerpolicy="origin"></script>

或者

   <script id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin"></script>

第二种：黑白黄工具条

• 查看效果,打开 http://www.qqqao.com/index6.html ， 点击顶部无障碍阅读

• 引用调用

 <script id="rrbayJs" src="/canyou/js/wza.min.js?bw" referrerpolicy="origin"></script>

第三种：蓝色工具条(历史版本，停止维护升级)

• 查看效果,打开 http://www.qqqao.com/index5.html ， 点击顶部进入无障碍通道

• 安装部署

 <script id="rrbayJs" src="/canyou/js/wza.min.js?blue" referrerpolicy="origin"></script>

请下载最新版，体验不同风格工具条

• 无障碍工具条gitee源码下载：https://gitee.com/tywAmblyopia/ToolsUI

• 无障碍工具条github源码下载：https://github.com/gemgin/AmblyopiaTool

免费安装部署使用工具条条件？

保留canyou文件下所有版权信息（不能修改任何文件）以及签订捐赠协议(网站备案主体盖章)

关注[太阳湾科技]微信公众号，在微信聊天对话框内回复捐赠即可获取捐赠协议模板