需求描述
- 有一个项目中需要添加网页无障碍功能
具体什么是无障碍功能，请看百度百科：无障碍辅助工具
效果图
操作步骤
第一步 去gitee看代码仓库
仓库：https://gitee.com/tywAmblyopia/ToolsUI
大家别忘了去这个仓库star哦
第二步 使用这个 canyou 文件夹中的内容
第三步 把 canyou 文件夹丢到vue的public文件夹里面
这样的图示：
第四步 再在public文件夹下的index.html文件中添加需要使用的脚本
如下：
入口文件index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 无障碍依赖jquery和自由的js脚本，所以需要引入，注意顺序 -->
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin" ></script>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<style> </style>
</head>第五步 在适当地方丢进去一个a标签作为无障碍功能的开关
这样的话，点击一下这个a标签，就开启了无障碍功能啦，就能出现第一张效果图啦
<a id="wzayd" title="网站信息无障碍工具条" href="javascript:;" class="wzayd" accesskey="g">无障碍阅读</a>可以自己给a标签开关加点样式
线上演示效果和效果代码
演示效果地址：http://ashuai.work:8888/#/
以上效果，仓库中也有对应代码的：https://github.com/shuirongshuifu/elementSrcCodeStudy
致谢
- 感谢那些 为无障碍努力的 先驱前辈开发者 😀
- 前人栽树，后人乘凉 😀
- 吃水不忘挖井人 😀
^_^ 😀
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。