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

本文涉及的产品
云原生网关 MSE Higress,422元/月
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
注册配置 MSE Nacos/ZooKeeper,118元/月
简介: 无障碍工具条安装部署教程

无障碍工具部署步骤:

以信息无障碍公共服务平台为例,地址: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标签。确保该链接放在页面的易发现位置。链接代码如下:
    无障碍阅读

测试部署是否成功

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


  • 选择器(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>
相关文章
|
4月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
409 1
|
6月前
|
编解码 Linux 数据处理
ONLYOFFICE8.1版本桌面编辑器测评
ONLYOFFICE8.1版本桌面编辑器测评
85 0
|
6月前
|
安全 搜索推荐 数据挖掘
ONLYOFFICE 桌面编辑器 8.1 版发布:全面提升文档处理效率的新体验
ONLYOFFICE 桌面编辑器 8.1 版发布:全面提升文档处理效率的新体验
|
7月前
|
移动开发 前端开发 JavaScript
开源软件导航项目, 轻松实现自己的网站导航
开源软件导航项目, 轻松实现自己的网站导航
140 2
|
7月前
|
搜索推荐 Linux UED
深度测评:ONLYOFFICE 桌面编辑器 v8.0新功能
深度测评:ONLYOFFICE 桌面编辑器 v8.0新功能
|
前端开发 BI C#
手麻系统源码,C# .net 桌面软件,采用下拉式汉化菜单,界面友好,实用性强
提供手术病人检索、手术申请、手术安排、急诊手术,查看手术申请单、查看手术通知单,填写病人术前会诊记录、谈话记录、麻醉记录,器械准备、手术记录、附加手术、器械清点及术后护理信息等功能。 提供手术查询、手术报表查询、术后信息统计等查询功能。
181 0
手麻系统源码,C# .net 桌面软件,采用下拉式汉化菜单,界面友好,实用性强
|
人工智能 芯片
coreldraw2023新图标新功能介绍
对于广告标识业来说 coreldraw这个软件,对我们来说绝对不陌生,我从2008年开始接触到广告制作,到现在已经13多年了,从一开始的coreldraw 9 红色的热气球开始。就被这个强大的软件所吸引,他有强大的排榜功能已经对位图的处理技术,支持ai ps等文件格式的导入导出,以及对尺寸导出的精确控制,使得它一度成为广告制作/印刷行业的宠儿。有着简洁的界面强大的路径计算处理,让这款软件看起来简约而不简单!
271 0