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

原创

信息无障碍

修改于 2024-10-29 17:20:20

2460

文章被收录于专栏：信息无障碍信息无障碍

无障碍工具部署步骤：

以信息无障碍公共服务平台为例，地址：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  /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开头

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

查看效果,打开 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>

第二种：黑白黄工具条

查看效果,打开 localhost:8080/index6.html ，点击顶部无障碍阅读
引用调用

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

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

查看效果,打开 localhost:8080/index5.html ，点击顶部进入无障碍通道
安装部署

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

部署

源码

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

部署

源码

登录后参与评论

0 条评论

热度

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

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

无障碍工具部署步骤：

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

第二种：黑白黄工具条

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐