无障碍工具条本地化安装部署
原创
无障碍工具部署步骤：
以信息无障碍公共服务平台为例，地址：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）.
wza_elder_tool.jpg
<!--区域跳转功能定制本地路径 --> /canyou/js/site/localhost.js <!--区域跳转功能定制外网路径,域名不要带www --> /canyou/js/site/域名.js
- 步骤五：在
localhost:8080/首页位置添加链接，确保红色加粗的不变。可以使用任何html标签。确保该链接放在页面的易发现位置。链接代码如下： <a id="wzayd" title="网站信息无障碍工具条" href="javascript:;" class="wzayd" accesskey="g">无障碍阅读</a>
测试部署是否成功
在浏览器中输入地址或通过单击原网站头部无障碍操作条中的链接即可完成对网站的信息无障碍化访问。
- 选择器（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开头
第一种：纯蓝工具条(默认)
bluer.jpg
- 查看效果,打开 localhost:8080/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>第二种：黑白黄工具条
defaultdw.png
- 查看效果,打开 localhost:8080/index6.html ， 点击顶部
无障碍阅读 - 引用调用
<script id="rrbayJs" src="/canyou/js/wza.min.js?bw" referrerpolicy="origin"></script>第三种：蓝色工具条(历史版本，停止维护升级)
default.png
- 查看效果,打开 localhost:8080/index5.html ， 点击顶部
进入无障碍通道 - 安装部署
<script id="rrbayJs" src="/canyou/js/wza.min.js?blue" referrerpolicy="origin"></script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云服务器
云服务器（Cloud Virtual Machine，CVM）提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。
腾讯云开发者
