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

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
云原生网关 MSE Higress,422元/月
注册配置 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>
相关文章
|
3月前
|
安全
猿大师办公助手在线编辑微软Office/金山wps网页组件COM加载项启用说明
猿大师办公助手是一款独特的在线编辑Office插件,不同于其他厂商的弹窗模式,它真正实现了网页内嵌本机Office。其COM加载项可在Office主菜单栏增加PageHi子菜单,提供文件保存、打印等功能,并能控制文档操作权限。安装后,默认自动启动COM加载项,但需注意可能被禁用或拦截,必要时需手动启用。对于WPS和微软Office,均有详细的启用步骤。
70 3
猿大师办公助手在线编辑微软Office/金山wps网页组件COM加载项启用说明
|
4月前
|
C# 开发者 Windows
全面指南:WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用,从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性,开发者需关注无障碍设计原则。这不仅是法律要求,更是社会责任,旨在让技术更人性化,惠及包括视障、听障及行动受限等用户群体。
96 0
|
7月前
|
存储 自然语言处理 监控
【Unity 实用工具篇】| 游戏多语言解决方案,官方插件Localization 实现本地化及多种语言切换
Unity的多语言本地化是一个很实用的功能,它可以帮助游戏支持多种语言,让不同语言的玩家都能够更好地体验游戏。 而实现本地化的方案也有很多种,各个方案之间也各有优劣,后面也会对多个方案进行介绍学习。 本文就来介绍一个专门作用于多语言本地化的Unity官方插件:Localization 。 这个插件方便进行游戏的多语言本地化,让游戏支持多种语言,下面就来看看该插件的使用方法吧!
|
6月前
|
安全 搜索推荐 数据挖掘
ONLYOFFICE 桌面编辑器 8.1 版发布:全面提升文档处理效率的新体验
ONLYOFFICE 桌面编辑器 8.1 版发布:全面提升文档处理效率的新体验
|
Web App开发 搜索推荐 NoSQL
如何搭建一个集成导航与在线工具的个性化浏览器私有书签(附详细搭建教程)
在这个信息爆炸的时代,我们都希望拥有一个能够轻松解决多端、多浏览器的收藏和笔记同步问题的神奇工具。Mtab书签正是为此而设计的顶级应用。它将基础导航、记事本、在线小工具和多端同步集于一身,为用户提供了更便利的网络浏览体验,并解决了多端同步的烦恼。
267 0
如何搭建一个集成导航与在线工具的个性化浏览器私有书签(附详细搭建教程)
|
7月前
|
搜索推荐 Linux UED
深度测评:ONLYOFFICE 桌面编辑器 v8.0新功能
深度测评:ONLYOFFICE 桌面编辑器 v8.0新功能
|
7月前
|
安全 开发工具
微信小游戏制作工具中的键盘插件的使用
微信小游戏制作工具中的键盘插件的使用
472 0
文字处理技术:与布局相关的功能
文字处理技术:与布局相关的功能
102 0
|
存储 监控 负载均衡
炫我渲染集群管理软件技术文档
炫我渲染私有云系统是最新一代的智能渲染集群系统,可以在3dsmax、maya、c4d、SU等软件中一键完成提交、上传、渲染、下载的任务,不再需要人工修改资产路径和繁杂的权限设置,真正做到傻瓜式提交,让设计人员将精力放在创作和业务上,将渲染重新交给智能渲染系统来解决。
1232 0
炫我渲染集群管理软件技术文档
|
传感器 自然语言处理 C#
[UWP]本地化入门
原文:[UWP]本地化入门 1. 前言 上一篇文章介绍了各种WPF本地化的入门知识,这篇文章介绍UWP本地化的入门知识。 2. 使用resw资源文件实现本地化 在以前的XAML平台,resx资源文件是一种很方便的本地化方案,但在UWP中微软又再次推荐x:Uid方案,默认的资源文件也变成resw资源文件。
1369 0