【vue】使用无障碍工具条（详细）

最新推荐文章于 2024-07-26 16:14:46 发布
最新推荐文章于 2024-07-26 16:14:46 发布
阅读量995 收藏 6
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript 无障碍 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45682058/article/details/132710649
版权

引入：使用的是太阳湾的无障碍工具条，代码地址：https://gitee.com/tywAmblyopia/ToolsUI
具体步骤：下载代码后，将其中的 canyou 文件夹拖入 vue 项目中的 public 文件夹中；
在这里插入图片描述
上图是在项目目录中的样子，记得不要改文件夹的名字，就叫 canyou；
然后在 vue 项目中的 public/index.html 文件中引入 1.8 以上版本的 jquery，和 canyou 文件夹中的 wza.min.js 文件，最后在 <body> 中引入

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

如图：
在这里插入图片描述
我 jquery 引入的方式是 cdn 引入，如果改为本地导入会出现报错：
在这里插入图片描述
演示：
在这里插入图片描述

花间半盘棋
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
无障碍工具条在前端项目中的使用
weixin_44143173的博客
08-01 500
一、使用的工具 https://gitee.com/tywAmblyopia/ToolsUI 二、使用 VUE中使用 　　　　-1.拉取代码 　　　　-2.将canyou文件夹放到public目录下 　　　　-3.在public文件夹下的index.html文件中</head>标签前,引用v1.8以上的jquery.min.js(原网站已引用v1.8以上的jquery跳过此步骤)...
Vue3-08 无障碍
多啦的博客
05-19 854
Vue3学习笔记-08 无障碍
网站无障碍工具条使用（idea+js）
m0_67987829的博客
03-31 1787
信息无障碍工具条: 网站信息无障碍改造咨询,无障碍辅助工具,无障碍工具,辅助浏览工具,无障碍工具条,适老化,长辈模式,盲人语音服务,无障碍阅读,十字光标,纯文本,无障碍插件源码,无障碍咨询改造,文本转语音tts,wcag2.0。之后在项目的head.html(封装好的头部)，你准备好的无障碍按钮上添加点击事件。下载好后，把canyou文件夹放在根目录（跟写的html页面平级）注意一定要用这种跳转，直接跳会先跳404，刷新后才好用。
如何开发无障碍的前端Web 网页
最新发布
Tz
07-26 1291
让网页完全支持无障碍功能有一定成本，我们可以在让代码更规范，更语义化等方面去改变；但是给图片标签加上一个属性描述，这个举动只需要1秒钟的时间，带来的用户体验确是跨越性的，也许只有一个视力障碍的用户在访问我们的官网，我想他在访问我们页面-点击图片的时候，朗读出图片描述信息的时候，一定会很欣慰。
无障碍条在vue中的使用
m0_56938501的博客
10-13 2779
2021年10月13号 无障碍条的使用 列子网址：http://www.jstide.com/ 官网和介绍：https://www.rrbay.com/ 无障碍条代码网址：https://gitee.com/tywAmblyopia/ToolsUI Git获取无障碍条代码（直接拉取）：git clone https://gitee.com/tywAmblyopia/ToolsUI.git 在vue中使用（此处cms就是vue项目） 注意：只有conyou文件才是无障碍条 其余的无关 ...
网站信息无障碍辅助工具条源码
信息无障碍
11-22 4046
交流QQ群：26363996 前言 　　为了体现政府提供公共服务的公平、公正、均等化的要求，保障弱势群体获得政府公众服务的权利，我国政府近年一直致力于推动信息无障碍技术在各个领域的应用，先后制定《无障碍环境建设条例》、《网站设计无障碍技术要求》、《网站设计无障碍评级测试方法》等相关法规及行业标准。在建设服务型政府的大环境之下，信息无障碍服务成为政府主厅提高公众服务水平、扩大公众服务范...
Vue项目， PC 端和移动端 H5 如何实现无障碍阅读
weixin_46683645的博客
08-18 2704
Vue项目， PC 端和移动端 H5 如何实现无障碍阅读
网页中的无障碍阅读
热门推荐
一个前端初学者的博客
02-10 1万+
Web无障碍设计（Accessibility in Web design，也叫网站可及性 ）是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。 为什么无障碍如此重要（帮助残障人士）为什么不是所有网站都能无障碍访问？你可能也会问自己为什么存在“无障碍”的问题，为什么不是所有网站都能让所有用户无障碍访问？要进行无障碍设计有许多不同原因，其中包括残疾...
分享一个免费网站无障碍工具条
Z51047299的博客
03-20 5337
分享一个免费网站无障碍工具条
网站无障碍工具条、无障碍
09-20
网站无障碍工具条，这是一个针对于 有视障、听说障碍、读写障碍、肢体障碍，机体功能衰退的老年人群或残障人士开发的一个网站辅助js插件。 演示地址：https://muzihuaner.github.io/assist/example/index.html
无障碍阅读
04-13
无障碍阅读 网站设计
开发工具无障碍指南(ATAG)
08-31
ATAG2.0指导无障碍互联网开发工具的开发，让各类有障碍群体都可以开发互联网内容、更易开发出无障碍的互联网内容。
ui脚本使用无障碍的最佳实践.js
05-10
autojs spinner 的例子
vue如何在项目中调用腾讯云的滑动验证码
11-20
在实际开发中，还需要考虑错误处理、用户体验优化、无障碍访问支持等细节。确保在用户操作过程中，能够清晰地提示验证状态，同时保证代码的健壮性，以应对可能出现的各种异常情况。此外，由于腾讯云的滑动验证码是...
无障碍开发笔记1 - ARIA
2301_77585245的博客
05-25 824
2020 年末，工信部印发《互联网应用适老化及无障碍改造专项行动方案》通知，并把适老化及无障碍改造水平评测和企业信用评价纳为重点工作，在国家的大力倡导下，我们更应该要关注互联网应用的无障碍访问。全国现有 8500 多万残障人士，2 亿多 60 岁以上的老年人，还有隐藏在人群中的大量有障碍人士。我们要提高用户的无障碍体验，让他们也能共享便捷操作，就必须要加大互联网无障碍访问在我们产品中的应用，使得我们产品变得更加人性化。
VUE 工具类一
lemon
04-02 1627
http.js import axios from 'axios' import router from '../router' //自己写的工具类 import utils from './utils' //具体配置参数参考https://github.com/axios/axios // `timeout` 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 `timeou...
vue项目中添加网页无障碍功能
阿飞的博客
10-24 496
无障碍辅助工具在vue的应用
Vue()-常用组件之工具栏组件
Good Luck
06-04 1058
工具栏组件
无障碍阅读 vue
08-24
Vue.js 是一个用于构建用户界面的 JavaScript 框架。它是一个轻量级的框架，易于学习和使用。Vue.js 采用了 MVVM（模型-视图-视图模型）的架构模式，可以帮助开发者更容易地构建交互式的应用程序。 对于无障碍阅读来说，Vue.js 提供了一些功能和技术来增强用户体验。以下是几个与无障碍阅读相关的方面： 1. 可访问性支持：Vue.js 提供了一些内置的可访问性支持，例如 `v-bind` 和 `v-on` 指令可以帮助开发者创建可访问的交互式元素。 2. 键盘导航：Vue.js 可以通过绑定键盘事件来实现键盘导航，这对于视力障碍用户和无法使用鼠标的用户非常重要。 3. aria-* 属性：Vue.js 支持设置 ARIA (Accessible Rich Internet Applications) 属性，这些属性可以提供更多的信息给屏幕阅读器和其他辅助技术。 4. 显式状态标记：Vue.js 提供了指令和属性来帮助开发者标记应用程序的状态，例如通过 `v-if` 和 `v-show` 指令来控制元素的可见性。 总之，Vue.js 提供了一些功能和技术来增强应用程序的无障碍性，使得用户能够更轻松地访问和使用应用程序。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花间半盘棋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值