vue项目中添加网页无障碍功能

阿飞920

已于 2023-10-24 16:35:30 修改

阅读量341

点赞数 1

文章标签： vue 1024程序员节

于 2023-10-24 16:34:16 首次发布

本文链接：https://blog.csdn.net/m0_51223745/article/details/134015720

版权

vue项目中添加网页无障碍功能

需求描述
有一个项目中需要添加网页无障碍功能

具体什么是无障碍功能，请看百度百科：无障碍辅助工具

效果图
在这里插入图片描述

操作步骤
第一步去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://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/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/shuirongshui

阿飞920

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue项目中添加网页无障碍功能

无障碍辅助工具在vue的应用
复制链接

扫一扫

vue项目中添加网页无障碍功能

vue项目中添加网页无障碍功能

“相关推荐”对你有帮助么？