当前位置：首页 > news >正文

Web无障碍

news 来源：原创 2025/5/15 0:14:18

文章目录

🟢Web Accessibility-Web无障碍
🟢一、Web Accessibility-Web
- 1. web无障碍设计
- 2. demo
- 3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢)
如有其他更好方案，可以私信我哦
✒️总结

🟢Web Accessibility-Web无障碍

🟢一、Web Accessibility-Web

在这里插入图片描述

本文主要记录一下，前端如何实现无障碍设计，以及相关功能，首先了解一下无障碍是什么？Web无障碍在确保所有用户，包括残疾人士，都能平等地访问和利用网络资源。这一计划对于促进社会包容性至关重要，因为它确保了残疾人士不会因为技术障碍而受到排斥，能够平等地参与教育、工作、娱乐和政治等各个方面。

提升用户体验：无障碍的Web能够吸引更多的用户，包括那些有临时或永久性残疾的用户，从而提供更广泛的用户体验。
法律要求：许多国家和地区都有法律要求公共网站和服务必须达到一定的无障碍标准。例如，美国的《美国残疾人法案》（ADA）和欧盟的《残疾人无障碍指令》都明确规定了公共网站必须对残疾人士无障碍。

1. web无障碍设计

可访问性元素的内容字段 + 元素状态 + 元素类型
语义化HTML：使用正确的HTML元素表达内容的结构和含义，如使用语义化标签、标题标签、列表元素等。

<header>定义页面或区块的头部内容，通常包含导航链接、网站标题等。
<nav>定义导航链接部分，用于放置页面的主要导航链接。
<main>定义页面的主体内容，通常包含文章、博客帖子等主要内容。
<article>定义独立的内容块，如博客文章、新闻报道等。
<section>定义内容分区，用于将页面内容划分为不同的部分。
<footer>定义页面或区块的底部内容，通常包含版权信息、联系方式等。

文本替代：为所有非文本内容（如图片）提供描述性的alt属性，以便屏幕阅读器用户理解图片内容。

<imgclass="more-image"alt="提示文字"src="../../../assets/images/ntwb-more.png"/>

ARIA属性：使用ARIA（Accessible Rich Internet Applications）角色和属性来增强可访问性，尤其是对于复杂交互元素。

     <a href="javascript:void(0)" aria-label="进入老年模式"><span class="right-line">长者版</span></a>

无障碍键盘访问
添加tabindex属性，可以通过添加tabindex=“0"属性使其可通过键盘聚焦。同时，可以使用tabindex=”-1"来隐藏元素，但仍允许通过JavaScript聚焦。

 <ul><li><a href="#section1">section1</a></li><li><a href="#section2">section2</a></li></ul><section id="section1"><h2>section1</h2><p>文本</p><button id="btn1">按钮1</button></section><section id="section2"><h2>section2</h2><p>文本</p><button id="btn2">按钮2</button></section>

在上方代码中，用户可以通过Tab键和Shift+Tab键在链接和按钮之间导航。当元素获得焦点时，会显示一个蓝色的轮廓，以帮助用户了解当前焦点位置。

2. demo

语音识别


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无障碍</title><style>/* 简单的样式设置 */body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 20px;}.container {max-width: 600px;margin: 0 auto;}button {padding: 10px 20px;margin-top: 20px;font-size: 16px;}#output {margin-top: 20px;padding: 10px;border: 1px solid #ccc;word-wrap: break-word;}</style>
</head>
<body><div class="container"><h1>无</h1><p>使用麦克风说话，文字将显示在下方。点击按钮可以听到预设的文本。</p><!-- 语音输入区域 --><button id="start-speech" aria-label="开始语音输入">按住说话</button><div id="status" aria-live="polite"></div><!-- 语音输出区域 --><button id="speak-button" aria-label="朗读文本">朗读文本</button><div id="output"></div></div><script>// 检查浏览器是否支持Web Speech APIif (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {document.getElementById('start-speech').textContent = '浏览器不支持语音输入';document.getElementById('start-speech').disabled = true;document.getElementById('speak-button').disabled = true;} else {// 初始化语音识别const recognition = new (window.webkitSpeechRecognition || window.SpeechRecognition)();recognition.lang = 'zh-CN'; // 设置语言为中文recognition.interimResults = false; // 不显示中间结果recognition.continuous = false; // 一次性识别// 语音输入按钮点击事件document.getElementById('start-speech').addEventListener('click', function() {recognition.start();document.getElementById('status').textContent = '正在聆听...';});// 语音识别结果事件recognition.onresult = function(event) {const transcript = event.results[0][0].transcript;document.getElementById('output').textContent = transcript;document.getElementById('status').textContent = '';};// 语音识别错误事件recognition.onerror = function(event) {document.getElementById('status').textContent = '语音识别错误: ' + event.error;};// 语音输出功能document.getElementById('speak-button').addEventListener('click', function() {const speech = new SpeechSynthesisUtterance();speech.text = '开始语音输入';speech.lang = 'zh-CN';window.speechSynthesis.speak(speech);});}</script>
</body>
</html>

3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢)

使用的是太阳湾的无障碍工具条，代码地址：https://gitee.com/tywAmblyopia/ToolsUI

在这里插入图片描述
在项目public文件下index.html文件引入jquery.js和拉取下的项目下canyou 文件夹中的 wza.min.js文件

jquery 建议1.8.1以上版本

    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script><script id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin"></script

调用

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

如有其他更好方案，可以私信我哦

✒️总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

Web无障碍

文章目录 🟢Web Accessibility-Web无障碍🟢一、Web Accessibility-Web1. web无障碍设计2. demo3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢) 如有其他更好方案，可以私信我哦✒️总结 🟢Web Accessibility-Web无障碍…...

编程日记 2025/5/15 0:14:18

Qt使用MySQL数据库(Win)----2.配置MySQL驱动

使用Everything软件，找到mysql.pro文件。并使用qt creator打开mysql.pro。导入外部库选择外部库点击下一步，勾选。为debug版本添加‘d’作为后缀取消勾选，然后点击下一步添加后的Pro文件。这样文件应该是改好了，选择releas…...

编程日记 2025/5/14 14:38:06

记录一下vue2项目优化，虚拟列表vue-virtual-scroll-list处理10万条数据

文章目录封装BrandPickerVirtual.vue组件页面使用组件属性 select下拉接口一次性返回10万条数据，页面卡死，如何优化？？这里使用分页虚拟列表（vue-virtual-scroll-list），去模拟一个下拉的内容…...

编程日记 2025/5/14 22:47:51

java 中 main 方法使用 KafkaConsumer 拉取 kafka 消息如何禁止输出 debug 日志

pom 依赖： <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId><version>2.5.14.RELEASE</version> </dependency> 或者 <dependency><groupId>org.ap…...

编程日记 2025/5/12 15:15:18

前端性能优化全攻略：加速网页加载，提升用户体验

前端性能优化全攻略：加速网页加载，提升用户体验在当今互联网时代，用户对于网页的加载速度和性能要求越来越高。一个快速响应、流畅加载的网页能够极大地提升用户体验，增加用户留存率和满意度。前端性能优化是实现这一目标的关键…...

编程日记 2025/5/10 7:13:26

关于内网外网，ABC类地址，子网掩码划分

本文的三个关键字是：内网外网，ABC类地址，子网掩码划分。围绕以下问题展开： 如何从ip区分外网、内网？win和linux系统中，如何查询自己的内网ip和外网ip。开发视角看内外网更多是处于安全考虑，接口…...

编程日记 2025/5/9 3:52:30

【C++多线程编程：六种锁】

目录普通互斥锁： 轻量级锁独占锁： std::lock_guard： std::unique_lock: 共享锁： 超时的互斥锁递归锁普通互斥锁： std::mutex确保任意时刻只有一个线程可以访问共享资源，在多线程中常用于保…...

编程日记 2025/5/12 10:21:55

【LeetCode】力扣刷题热题100道（16-20题）附源码容器子数组数组连续序列三数之和（C++）

目录 1.盛最多水的容器 2.和为K的子数组 3.最大子数组和 4.最长连续序列 5.三数之和 1.盛最多水的容器给定一个长度为 n 的整数数组 height 。有 n 条垂线，第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。找出其中的两条线，使得它们与 x 轴…...

编程日记 2025/5/13 20:24:00

WHAT - devicePixelRatio 与像素分辨率

目录语法理解 devicePixelRatio常见值应用场景注意事项在高分辨率屏幕下的视觉效果 devicePixelRatio 是一个浏览器属性，用来表示设备的物理像素与 CSS 像素之间的比例。它是屏幕显示清晰度的重要指标，特别是在高分辨率屏幕（如 Retina 显示屏…...

编程日记 2025/5/9 7:49:13

【cs.CV】25.1.8 arxiv更新速递

—第1篇---- ===== ConceptMaster: 面向扩散Transformer模型的多概念视频定制，无需测试时调优 🔍 关键词: 文本到视频生成, 扩散模型, 多概念定制, 身份解耦链接1 摘要: 文本到视频生成通过扩散模型取得了显著进展。然而，多概念视频定制（MCVC）仍然是一个重大挑战。…...

编程日记 2025/5/10 7:43:17

C#使用MVC框架创建WebApi服务接口

第一步,使用VS2019新建MVC-Web API应用程序创建BridgeApi 第二步,运行将生成默认的示例网页,网页Url为 https://localhost:44361/home/index 右键项目添加 WebAPI控制器类添加我们可以看到App_Start目录下有三个文件: BundleConfig.cs代表捆绑文件的引用有脚本文件…...

编程日记 2025/5/13 17:45:22

慧集通（DataLinkX）iPaaS集成平台-智能体(Agent)API

功能简介： 该功能下主要是用来管理集成平台对外开放接口得管控以及调用日志信息得查看操作，并支持日志得重放等操作；注：所有触发类单据得日志也可以在此查看(如使用数据触发组件自动触发流程得日志信息) 1.第三方调用接口类日志查…...

编程日记 2025/5/10 15:37:15

BigDecimal：高精度数值运算类

介绍： BigDecimal是一个用于高精度数值运算的类，它比基本的double或float类型更精确，非常适合需要精确计算的场景，如金融计算、科学计算等，因为这些领域对数值精度要求非常高，不能容忍浮点运算带来的误差。…...

编程日记 2025/5/11 6:02:28

11. C 语言作用域与变量使用技巧

本章目录: 前言一、作用域的分类局部变量示例： 全局变量示例：示例： 形式参数示例： 二、作用域的细节与常见误区块级作用域示例： 静态变量与全局变量的对比示例： 未初始化变量的影响示例： 三、实…...

编程日记 2025/5/10 1:22:04

大模型WebUI：Gradio全解11——Chatbots：融合大模型的多模态聊天机器人（2）

大模型WebUI：Gradio全解11——Chatbots：融合大模型的聊天机器人（2） 前言本篇摘要11. Chatbot：融合大模型的多模态聊天机器人11.2 使用流行的LLM库和API11.2.1 Llama Index11.2.2 LangChain11.2.3 OpenAI1. 基本用法2. …...

编程日记 2025/5/14 21:24:27

课题推荐——基于GPS的无人机自主着陆系统设计

关于“基于GPS的无人机自主着陆系统设计”的详细展开，包括项目背景、具体内容、实施步骤和创新点。如需帮助，或有导航、定位滤波相关的代码定制需求，请点击文末卡片联系作者文章目录项目背景具体内容实施步骤相关例程MATLAB例程python例程 …...

编程日记 2025/5/8 14:57:38

HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构

HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构效果图DRAWPIEHQChart代码地址后台数据对接说明示例数据数据结构说明效果图 DRAWPIE DRAWPIE是hqchart插件独有的绘制饼图函数，可以通过麦语法脚本来绘制一个简单的饼图数据。饼图显示的位置固定在右上角。下…...

编程日记 2025/5/9 4:39:04

张朝阳惊现CES展，为中国品牌 “代言”的同时，或将布局搜狐新战略！

每年年初，科技圈的目光都会聚焦在美国拉斯维加斯，因为这里将上演一场被誉为 “科技春晚” 的年度大戏 ——CES 国际消费电子展。作为全球规模最大、最具影响力的科技展会之一，CES 吸引了来自 160 多个国家的创新者和行业领导者，是…...

编程日记 2025/5/12 3:52:53

堆排序+选择排序详解

目录 1.选择排序的定义 2.选择排序的优缺点 2.1优点 2.2缺点 3.思考 4.优化后的选择排序的实现 5.选择排序的代码 6.堆排序 7.向上/向下调整算法 8. 向下向上调整代码 9.堆排序代码 1.选择排序的定义选择排序(SelectSort)，以第一个为开始值&#xff0c…...

编程日记 2025/5/10 1:36:35

【Arthas命令实践】heapdump实现原理

🎮 作者主页：点击 🎁 完整专栏和代码：点击 🏡 博客主页：点击文章目录使用原理使用 dump java heap, 类似 jmap 命令的 heap dump 功能。【dump 到指定文件】 heapdump arthas-output/dump.hprof【只 …...

编程日记 2025/5/6 15:32:45

python-leetcode-判断子序列

392. 判断子序列 - 力扣（LeetCode） class Solution:def isSubsequence(self, s: str, t: str) -> bool:i, j 0, 0 # i 指向 s，j 指向 twhile i < len(s) and j < len(t):if s[i] t[j]:i 1j 1return i len(s)...

编程日记 2025/4/23 21:57:18

Verdi实用技巧-Part2 2 Verdi实用技巧-Part22.1 Dump波形常用的task2.1.1 Frequently Used Dump Tasks2.1.2 Demo 2.2 提取波形信息小工具--FSDB Utilities2.3 Debug in Source code view2.3.1 Find Scopes By Find Scope form 2.3.2 Go to line in Souce code View2.3.3 Use B…...

编程日记 2025/5/10 10:25:43

常用的AT命令，用于查看不同类型的网络信息

文章目录 1. ATCSQ‌：2. ATCREG‌：‌3. ATCOPS‌：4. ATCGATT‌：5. ATCGPADDR‌： 在AT命令集中，用于查看网络信息的命令有多种，具体取决于所使用的设备和模块。以下是一些常用的AT命令&#xff0…...

编程日记 2025/4/30 8:22:39

【应用篇】09.实现简易的Shell命令行解释器

一、shell和bash的关系 shell是命令解释器，它接收用户的命令并将其传递给内核去执行。bash,即GNU Bourne-Again Shell，是shell的一种实现方式，也是大多数linux系统下默认的shell。 bash的原理大多数的指令进程（除了内建命令&…...

编程日记 2025/5/14 6:35:00

负载均衡技术【内网去外网运营商出口负载均衡】

1 负载均衡概述 LB（Load Balance，负载均衡）是一种集群技术，它将特定的业务（网络服务、网络流量等）分担给多台网络设备（包括服务器、防火墙等）或多条链路，从而提高了业务…...

编程日记 2025/5/3 15:36:45

【广西乡镇界】arcgis格式shp数据乡镇名称和编码2020年内容测评

【广西乡镇界】arcgis格式shp数据乡镇名称和编码2020年内容测评...

编程日记 2025/5/11 4:47:35

半导体数据分析：玩转WM-811K Wafermap 数据集（一） AI 机器学习

在半导体行业，工程师依靠 CP Yield（生产过程中芯片的合格率）、WAT（晶圆验收测试）和 Particle 的晶圆图模式来识别工艺问题。然而，在没有人工干预的情况下将这些晶圆图模式分类是一项重大挑战。许多论文都研…...

编程日记 2025/5/12 13:29:43

mongodb安装并设置用户验证登录

下载地址 https://www.mongodb.com/try/download/community-kubernetes-operator 偶数版是稳定版，基数版是开发版 ，对32位支持不好 --------------------------------CentOS下安装mongodb--------------------------------------------------- 解压安装包…...

编程日记 2025/5/12 17:28:41

《零基础Go语言算法实战》【题目 1-16】字符串的遍历与比较

《零基础Go语言算法实战》【题目 1-16】字符串的遍历与比较给出两个字符串，请编写程序以确定能否将其中一个字符串重新排列后变成另一个字符串， 并规定大小写是不同的字符，空格也作为字符考虑。保证两个字符串的长度小于或等于 5000。 …...

编程日记 2025/5/12 10:52:42

VUE3封装一个Hook

在 Vue 3 中，Composition API 让我们能够封装和复用代码逻辑，尤其是通过 setup 函数进行组件间的复用。为了提高代码的可复用性，我们可以把一些常见的 API 请求和状态管理逻辑封装到一个单独的 hook 中。以下是一个简单的例子，我…...

编程日记 2025/5/13 11:30:14

【Linux】Linux常见指令（上）

个人主页~ 初识Linux 一、Linux基本命令1、ls指令2、pwd命令3、cd指令4、touch指令5、mkdir指令6、rmdir指令7、rm指令8、man指令9、cp指令10、mv命令 Linux是一个开源的、稳定的、安全的、灵活的操作系统，Linux下的操作都是通过指令来实现的一、Linux基本命令先…...

编程日记 2025/5/12 22:37:55

嵌入式 C 语言：一维数组

目录一、定义二、内存布局三、数组的初始化 3.1. 完全初始化 3.2. 部分初始化 3.3. 不指定大小初始化四、使用数组 4.1. 访问数组元素 4.1.1. 通过索引访问数组元素 4.1.2. 通过指针访问数组元素 4.2. 遍历数组 4.3. 数组作为函数参数五、应用场景 5.1. 数据…...

编程日记 2025/5/12 19:15:52

NineData云原生智能数据管理平台新功能发布｜2024年12月版

本月发布 7 项更新，其中重点发布 2 项、功能优化 5 项。重点发布数据库 Devops - Oracle 非表对象支持可视化创建与管理 Oracle 非表对象，包括视图（View）、包（Package）、存储过程（Procedur…...

编程日记 2025/5/14 8:24:38

iOS - 自旋锁

在 Objective-C 运行时中大量使用自旋锁，主要有以下几个原因： 1. 性能考虑上下文切换成本 // 自旋锁实现 static ALWAYS_INLINE void OSSpinLockLock(volatile OSSpinLock *lock) {do {while (lock->value ! 0) {__asm__ volatile ("pause&q…...

编程日记 2025/5/4 9:58:32

域名备案页面模板

域名备案模板，首页底下正中央位置需要有备案号。主要是给不太擅长于前端样式的人提供一个备案模板，直接把这个H5放到nginx的index.html就可以访问了 <html><body><div class"login-container"><h2>登录</h2>&…...

编程日记 2025/5/13 17:45:40

【socketioxide和axum集成-实现websocket实时通信-Rust点滴】

socketioxide的axum集成启动socketio依靠examle里的layer一. 使用可变State依靠axum里的example二.提取client,IP1. 非代理,tcp,socket对方地址2.代理情况下socket.req_parts. 三. axum的handle中使用emit发送消息.1. io,存入State解决.2.把io存入初始设定作为唯一单例3.http-…...

编程日记 2025/5/10 20:15:50

计算机网络（第8版）第3章--PPP课后习题

【3-09】一个PPP 帧的数据部分(用十六进制写出)是7 D 5EFE 277D 5D7D 5D657D 5E。试问真正的数据是什么(用十六进制写出)? 解答：把由转义符7D开始的2字节序列用下画线标出： 7D 5E FE 27 7D 5D 7D 5D 65 7D 5E 7D 5E应当还原成为7E。 7D5D 应…...

编程日记 2025/5/11 10:59:44

通过Android Studio修改第三方jar包并重新生成jar包

最近接手了来自公司其他同事的一个Unity项目，里面有一个封装的jar包要改动一下，无奈关于这个jar包的原工程文件丢失了，于是自己动手来修改下jar包，并做下记录。一、导入第三方jar包 1、新建项目EditJarDemo(项目名随便取) 2、新建libs文件夹，把你要修改的third.jar 复制…...

编程日记 2025/5/11 9:31:40

Rabbitmq 业务异常与未手动确认场景及解决方案

消费端消费异常，业务异常与未手动确认是不是一个场景，因为执行完业务逻辑，再确认。解决方案就一个，就是重试一定次数，然后加入死信队列。还有就是消费重新放入队列，然后重新投递给其他消费者，…...

编程日记 2025/5/11 22:51:08

3D机器视觉的类型、应用和未来趋势

3D相机正在推动机器视觉市场的增长。很多制造企业开始转向自动化3D料箱拣选，专注于使用3D视觉和人工智能等先进技术来简化操作并减少开支。预计3D相机将在未来五年内推动全球机器视觉市场，这得益于移动机器人和机器人拣选的强劲增长。到 2028 年&#…...

编程日记 2025/5/13 23:21:32

LabVIEW在反馈控制时如何解决带约束的控制问题

在LabVIEW中，解决带约束的反馈控制问题通常需要使用先进的控制算法或特定的方法来满足约束条件，同时保证控制系统的性能和稳定性。以下是解决这类问题的一些常用方法和步骤： 1. 定义控制问题及约束条件确定被控对象的动态特性&#xff08…...

编程日记 2025/5/14 19:46:21

PHP 在 2025 年的现状与展望

PHP 在 2025 年依然强劲，继续为超过 77% 使用已知服务器端编程语言的网站提供动力。这并非仅仅依靠遗留代码，像 WordPress、Shopify 和 Laravel 这样的主流平台持续推动 PHP 的发展，使其保持着 актуальность 并不断进化。为什么…...

编程日记 2025/5/9 9:10:48

QT c++ 自定义按钮类加载图片美化按钮

如果你有需要利用图片美化按钮的情况，本文能帮助你。鼠标左键按下按钮和松开，按钮显示不同的图片。 1.按钮类 //因为此类比较简单，1个头文件搞定，没有cpp文件 #ifndef CUSTOMBUTTON_H #define CUSTOMBUTTON_H #include <Q…...

编程日记 2025/5/13 17:21:40

夯实前端基础之HTML篇

知识点概览 HTML部分 1. DOM和BOM有什么区别？ DOM（Document Object Model） 当网页被加载时，浏览器会创建页面的对象文档模型，HTML DOM 模型被结构化为对象树用途： 主要用于网页内容的动态修改和交互&…...

编程日记 2025/5/5 2:58:54

pytest 参数介绍

命令行参数描述常见使用案例-v / --verbose显示每个测试用例的详细信息，包括测试名称和状态pytest -v-s / --captureno禁用输出捕获，允许 print() 输出显示pytest -s-q / --quiet安静模式，减少输出，仅显示每个测试的通过/失败结果…...

编程日记 2025/5/14 17:38:58

蓝桥杯训练

1对于一个字母矩阵，我们称矩阵中的一个递增序列是指在矩阵中找到两个字母，它们在同一行，同一列，或者在同一 45 度的斜线上，这两个字母从左向右看、或者从上向下看是递增的。例如，如下矩阵中 LANN QIAO有…...

编程日记 2025/5/14 15:40:42

maven的简单介绍

目录 1、maven简介2、maven 的主要特点3、maven的下载与安装4、修改配置文件5、私服(拓展) 1、maven简介 Maven 是一个广泛使用的项目管理和构建工具，主要应用于 Java 项目。Maven 由 Apache 软件基金会开发和维护，它提供了一种简洁且一致的方法来构建、…...

编程日记 2025/5/10 20:59:46