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

简介: 无障碍工具条安装部署教程

无障碍工具部署步骤:

以信息无障碍公共服务平台为例,地址: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月前
|
人工智能 Ubuntu API
告别Token烧钱!1分钟OpenClaw无技术阿里云/本地部署+免费大模型API配置,低成本养 AI 大虾及避坑指南
2026年,OpenClaw(昵称“大龙虾”)已成为开发者与办公人群的核心AI工具,但“Token消耗过快”始终是用户痛点——复杂任务单次调用可能消耗数千甚至上万Token,长期使用成本居高不下。而白山智算推出的新用户福利,为这一问题提供了高效解决方案:注册实名认证即送150元体验金,首次调用API再赠300元,累计450元可直接抵扣模型调用费用,支持MiniMax-M2.5、GLM-5、DeepSeek-V3.2等多款高性价比模型,且兼容OpenAI API格式,无需额外开发即可对接OpenClaw。
1425 7
|
Web App开发 自然语言处理 前端开发
可访问性测试(无障碍测试)
可访问性测试(无障碍测试)
782 0
可访问性测试(无障碍测试)
|
10月前
|
前端开发 安全 搜索推荐
《前端无障碍设计的深层逻辑与实践路径》
本文深入剖析前端无障碍设计的深层逻辑与实践路径,指出其核心是拆除数字壁垒,实现技术普惠。文章打破“为少数人服务”的认知误区,阐述语义化信息架构、键盘交互完整性、ARIA标准运用、视觉设计包容性等关键要素,强调需建立全流程验证体系,推动行业认知升级。最终指向构建“默认包容”的数字世界,让技术回归服务本质,使所有用户能平等享受数字便利,展现了前端无障碍设计的技术价值与人文意义。
187 0
|
机器学习/深度学习 人工智能 分布式计算
【AI系统】混合并行
混合并行融合了数据并行、模型并行和流水线并行,旨在高效利用计算资源,尤其适合大规模深度学习模型训练。通过将模型和数据合理分配至多个设备,混合并行不仅提升了计算效率,还优化了内存使用,使得在有限的硬件条件下也能处理超大型模型。3D混合并行(DP+PP+TP)是最先进的形式,需至少8个GPU实现。此策略通过拓扑感知3D映射最大化计算效率,减少通信开销,是当前深度学习训练框架如Deepspeed和Colossal AI的核心技术之一。
889 15
【AI系统】混合并行
|
API 数据处理 开发者
Polars中的急性与惰性API:性能优化与数据处理策略
Polars中的急性与惰性API:性能优化与数据处理策略
417 1
uniapp里textarea多行文本输入限制数量
uniapp里textarea多行文本输入限制数量
|
存储 JavaScript Java
若依修改,如何安装wangEditor,图片上传接口编写。建议暴露专门写一个图片存储的接口
若依修改,如何安装wangEditor,图片上传接口编写。建议暴露专门写一个图片存储的接口
若依修改,如何安装wangEditor,图片上传接口编写。建议暴露专门写一个图片存储的接口
|
存储 数据库连接 数据库
如何使用Python上传文件到FTP服务器
如何使用Python上传文件到FTP服务器
654 1
|
前端开发 测试技术 定位技术
Web Accessibility基础:构建无障碍的前端应用
网络无障碍确保所有人平等访问网站与应用,覆盖视觉、听觉等多种障碍。关键技术包括:文本替代(alt属性)、ARIA角色、清晰表单标签、键盘导航、颜色对比、视觉隐藏、ARIA live区域、触控优化、语义化编码、视觉反馈、语音支持、易读文本、状态指示、色盲友好、屏幕阅读器兼容、响应式设计、媒体内容字幕、定期测试、图像地图、语音合成、明确错误提示及焦点管理。
447 0