无障碍工具部署步骤：
以信息无障碍公共服务平台为例，地址：localhost:8080/index.html
- 步骤一：将
canyou文件夹放到localhost:8080/站点指向的服务器目录下 ( 如果是vue项目，请把canyou文件夹放到public文件夹下)，保证localhost:8080/canyou/能够被访问到即可。 - 步骤二：在
</head>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤)。建议在header.htm类似的页头模板页面中引用jquery，以达到一处安装，全站皆有的效果。 - 步骤三：请将
<script 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
AI 代码解读
- 步骤五：在
localhost:8080/首页位置添加链接，确保红色加粗的不变。可以使用任何html标签。确保该链接放在页面的易发现位置。链接代码如下：
无障碍阅读
测试部署是否成功
在浏览器中输入地址或通过单击原网站头部无障碍操作条中的链接即可完成对网站的信息无障碍化访问。
- 选择器（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");
})();
AI 代码解读
- 选择器（selector）路径定位方法，按浏览器f12
注意选择器以.rrbay_body开头
第一种：纯蓝工具条(默认)
- 查看效果,打开 localhost:8080/index.html ， 点击顶部
点击进入适老模式 - 引用调用
<script id="rrbayJs" src="/canyou/js/wza.min.js?bluer" referrerpolicy="origin"></script>
AI 代码解读
或者
<script id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin"></script>
AI 代码解读
第二种：黑白黄工具条
- 查看效果,打开 localhost:8080/index6.html ， 点击顶部
无障碍阅读 - 引用调用
<script id="rrbayJs" src="/canyou/js/wza.min.js?bw" referrerpolicy="origin"></script>
AI 代码解读
第三种：蓝色工具条(历史版本，停止维护升级)
- 查看效果,打开 localhost:8080/index5.html ， 点击顶部
进入无障碍通道 - 安装部署
<script id="rrbayJs" src="/canyou/js/wza.min.js?blue" referrerpolicy="origin"></script>
AI 代码解读
