首页 > 其他分享 >无障碍工具条在前端项目中的使用

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

时间:2023-08-01 14:46:46浏览次数:42  
标签:jquery 标签 工具条 链接 html v1.8 无障碍 前端 页面

一、使用的工具

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> 

 三、效果

 

标签:jquery,标签,工具条,链接,html,v1.8,无障碍,前端,页面
From: https://www.cnblogs.com/CGWTQ/p/17596412.html

相关文章

  • 视频直播网站源码,前端效果-css+javascript
    视频直播网站源码,前端效果-css+javascript <!DOCTYPEhtml><html><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"content="w......
  • 前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键
    SublimeText是一个代码编辑器,也是HTML和散文先进的文本编辑器。SublimeText是由程序员JonSkinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。SublimeText具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和......
  • 前端路由+原生JS实现SPA
    前端路由●路由:就是一一对应关系的集合●前端路由:就是一个url地址,对应哪个组件(页面)●前端路由的本质○根据地址栏变化(不重新想服务器发送请求),去局部更新不同的页面内容,完成前端业务场景切换●前端路由的思路○URL地址栏中的Hash值发生了变化○前端JS监听到H......
  • 前端Vue自定义精美商品分类组件category 可用于电商应用分类页面
    随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之间......
  • Node.js 与前端开发实战
    0x1Node.js的应用场景前端工程化打包工具:webpack、vite、esbuild、parce代码压缩:uglifyjs语法转换:babeljs,typescript难以替代Web服务端应用学习曲线平缓,开发效率较高运行效率接近常见的编程语言社区生态丰富及工具链成熟(npm)与前端结合的场景会有优势(SSR)竞......
  • NET6 Webapi 大驼峰传到前端变成了小驼峰
    JsonSerializerOptions.PropertyNamingPolicy属性services.AddControllers().AddJsonOptions(options=>{//获取或设置一个值,该值指定用于将对象的属性名称转换为其他格式(例如camel大小写)的策略;若为null,则保持属性名称不变......
  • 组件化、跨平台…未来前端框架将如何演进?
    前端框架在过去几年间取得了显著的进步和演进。前端框架也将继续不断地演化,以满足日益复杂的业务需求和用户体验要求。从全球web发展角度看,框架竞争已经从第一阶段的前端框架之争(比如Vue、React、Angular等),过渡到第二阶段的框架之争(比如Next、Nuxt、Remix、小程序等)。组件化开发的......
  • JSONP前端流程
    JSONP前端流程JSONP总体思路后端先给前端一个接口文档。如https://www.baidu.com/sugrec?prod=pc&wd=用户输入的文字&cb=后端要调用的前端定义的全局函数名。前端会封装一个jsonp函数:它的作用是传入特定参数,返回一个Promise实例。会用jsonp的方式来请求后端数据,把后端......
  • web前端学习第一天
    一、web应用程序开发介绍    1.界面部份    2.业务逻辑部份    3.数据存储部份 二、 web应用程序开发三大核心技术   HTML CSS  JAVASCRIPT    html:超文本标记语言        作用:网页内容、结构    css:......
  • UI/UE统一设计与前端组件库建设
    一、当前问题(主要在管理后台)1、输入框、下拉选择框figma样式不一致2、search组件、table组件、翻页导航样式与交互不一致3、UI/UE设计成本高4、前端开发成本高二、原因分析1、设计师需要拥有全局视角,各平台统一规划。通常来说当一个界面设计美观、交互体验感好、并......