无障碍工具条在前端项目中的使用

发布时间 2023-08-01 14:41:23作者: bignewbie

一、使用的工具

https://gitee.com/tywAmblyopia/ToolsUI

二、使用

  1. VUE中使用

    -1.拉取代码

    -2.将canyou文件夹放到public目录下

    -3.在public文件夹下的index.html文件中</head>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤)。

    -4.在public文件夹下的index.html文件中</head>标签前添加<script id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin" ></script>

    -5.在首页位置添加链接,确保红色加粗的不变。可以使用任何html标签。确保该链接放在页面的易发现位置。链接代码如下

<a id="wzayd" title="网站信息无障碍工具条" href="javascript:;" class="wzayd" accesskey="g">无障碍阅读</a> 

  2. 静态页面中使用

    -1.canyou文件夹放到站点指向的服务器目录下,保证能够被访问到即可。

    -2.在页面</head>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤,需要在所有页面 .html 页面引入)

    -3.请将<script id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin" ></script>代码添加到网站全部页面的</head>标签前以及jquery.min.js后面。(所有 .html 页面引入)

    -4.在首页位置添加链接,确保红色加粗的不变。可以使用任何html标签。确保该链接放在页面的易发现位置。链接代码如下

 

<a id="wzayd" title="网站信息无障碍工具条" href="javascript:;" class="wzayd" accesskey="g">无障碍阅读</a> 

 三、效果