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

Web无障碍

news 2026/2/11 1:10:28

文章目录

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

🟢Web Accessibility-Web无障碍

🟢一、Web Accessibility-Web

在这里插入图片描述

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

  1. 提升用户体验：无障碍的Web能够吸引更多的用户，包括那些有临时或永久性残疾的用户，从而提供更广泛的用户体验。
  2. 法律要求：许多国家和地区都有法律要求公共网站和服务必须达到一定的无障碍标准。例如，美国的《美国残疾人法案》（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无障碍

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

编程日记 2025/1/10 6:46:56

概率基本概念 --- 离散型随机变量实例

条件概率&独立事件 随机变量 - 离散型随机变量 - 非离散型随机变量 连续型随机变量奇异性型随机变量 概率表示 概率分布函数概率密度函数概率质量函数全概率公式贝叶斯公式 概率计算 数学期望方差协方差 计算实例 假设有两个离散型随机变量X和Y&#xff0c;它们代…...

编程日记 2025/1/10 6:43:54

毕业项目推荐：基于yolov8/yolov5/yolo11的动物检测识别系统（python+卷积神经网络）

文章目录 概要一、整体资源介绍技术要点功能展示&#xff1a;功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出&#xff08;xls格式&#xff09;功能6 支持切换检测到的目标查看 二、数据集三、算法介绍1. YO…...

编程日记 2025/1/10 6:42:52

基于 WEB 开发的高校学籍管理系统设计与实现

标题:基于 WEB 开发的高校学籍管理系统设计与实现 内容:1.摘要 摘要&#xff1a;随着信息技术的不断发展&#xff0c;高校学籍管理系统的信息化建设已成为必然趋势。本文以高校学籍管理系统为研究对象&#xff0c;探讨了基于 WEB 开发的高校学籍管理系统的设计与实现。通过对系…...

编程日记 2025/1/10 6:39:48

阿里云发现后门webshell，怎么处理，怎么解决？

当收到如下阿里云通知邮件时&#xff0c;大部分管理员都会心里一惊吧&#xff01;出现Webshell&#xff0c;大概是网站被入侵了。 尊敬的 xxxaliyun.com&#xff1a; 云盾云安全中心检测到您的服务器&#xff1a;47.108.x.xx&#xff08;xx机&#xff09;出现了紧急安全事件…...

编程日记 2025/1/10 6:38:47

HTB：Bank[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 提取出靶机TCP开放端口 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用curl对域名进行访问…...

编程日记 2025/1/10 6:36:45

如何用数字万用表测量是否漏电？

测量电气设备或线路是否漏电是确保安全的重要步骤。台式数字万用表&#xff08;DMM&#xff09;是一种常见的测试工具&#xff0c;它可以帮助我们检测和确认是否存在漏电现象。本文将详细介绍如何使用台式数字万用表进行漏电检测&#xff0c;包括准备工作、具体操作步骤和安全注…...

编程日记 2025/1/10 6:32:40

黑马跟学.苍穹外卖.Day04

黑马跟学.苍穹外卖.Day04 苍穹外卖-day04课程内容1. Redis入门1.1 Redis简介1.2 Redis下载与安装1.2.1 Redis下载1.2.2 Redis安装 1.3 Redis服务启动与停止1.3.1 服务启动命令1.3.2 客户端连接命令1.3.3 修改Redis配置文件1.3.4 Redis客户端图形工具 2. Redis数据类型2.1 五种常…...

编程日记 2025/1/10 6:29:36

uniapp使用scss mixin抽离css常用的公共样式

1、编写通用scss样式文件 // 通用 Flex Mixin mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {display: flex;flex-direction: $direction;justify-content: $justify;align-items: $align;flex-wrap: $wrap; }// 水平居中 mixin flex-…...

编程日记 2025/1/10 6:28:35

用Python解决“A. Accounting”问题：完整教程与代码实现

引言 在这篇文章中&#xff0c;我们将深入探讨编程竞赛中的一道经典问题“A. Accounting”&#xff0c;并用Python实现一个高效的解决方案。本文将涵盖题目分析、算法设计和Python代码实现&#xff0c;以及代码的完整讲解和优化方法。 一、问题描述 在一个遥远的国家里&…...

编程日记 2025/1/10 6:25:32

FreeU: Free Lunch in Diffusion U-Net 笔记

FreeU: Free Lunch in Diffusion U-Net 摘要 作者研究了 U-Net 架构对去噪过程的关键贡献&#xff0c;并发现其主干部分主要在去噪方面发挥作用&#xff0c;而其跳跃连接主要是向解码器模块引入高频特征&#xff0c;这使得网络忽略了主干部分的语义信息。基于这一发现&#…...

编程日记 2025/1/10 6:24:31

腾讯云AI代码助手编程挑战赛-古诗词学习

一、作品介绍 在科技与文化深度交融的当下&#xff0c;“腾讯云 AI 代码助手编程挑战赛 - 每日古诗词” 宛如一颗璀璨的新星&#xff0c;闪耀登场。它绝非一场普通的赛事&#xff0c;而是一座连接编程智慧与古典诗词韵味的桥梁。 这项挑战赛以独特的视角&#xff0c;将每日古…...

编程日记 2025/1/10 6:23:29

链式二叉树，递归的暴力美学

目录 1.链式二叉树概念 2.链式二叉树的实现 3.先序遍历 4.中序遍历 5.后序遍历 6.求链式二叉树的结点个数 7.链式二叉树的叶子结点个数 8.求二叉树的k层的结点个数 9.链式二叉树求深度 10.求值为x的结点 11.链式二叉树的销毁 12.二叉树的层序遍历 13.判断二叉树是否…...

编程日记 2025/1/10 6:22:28

计算机网络之---数据传输与比特流

数据传输的概念 数据传输是指将数据从一个设备传输到另一个设备的过程。传输过程涉及将高层协议中的数据&#xff08;如包、帧等&#xff09;转化为比特流&#xff0c;在物理介质上传输。 比特流的概念 比特流是数据传输中最基本的单位&#xff0c;它是由0和1组成的连续比特…...

编程日记 2025/1/10 6:21:27

基于单片机的数字电能表（论文+源码）

1. 系统整体方案设计 数字电能表系统设计解决了传统的用电设备的应用问题&#xff0c;能够让用户通过手机等移动设备获取电器的实时工作状态及数据信息&#xff0c;能够帮助找出高能耗的电器&#xff0c;及时停用或替换高能耗用电设备。在功能上需要实现高压交流电压的测量&am…...

编程日记 2025/1/10 6:20:24

打造三甲医院人工智能矩阵新引擎（五）：精确分割模型篇 Medical SAM 2

一、引言 1.1 研究背景与意义 在当今的医疗领域，医学图像分割技术起着举足轻重的作用。它能够精准地从医学图像中分离出特定的器官、组织或病变区域，为临床诊断、手术规划、疾病监测等诸多环节提供不可或缺的支持。例如，在肿瘤疾病的诊疗过程中，通过对 CT、MRI 等影像的精…...

编程日记 2025/1/10 6:18:22

python无需验证码免登录12306抢票 --selenium(2)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 [TOC](python无需验证码免登录12306抢票 --selenium(2)) 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 就在刚刚我抢的票&#xff1a;2025年1月8日…...

编程日记 2025/1/10 6:17:21

第1章 Web系统概述 教案

谢从华&#xff0c;高蕴梅 著.Web前端设计基础入门——HTML5、CSS3、JavaScript&#xff08;微课视频版&#xff09;,2023, 清华大学出版社. ISBN&#xff1a;9787302641261. 1、教学目标 知识目标 学生能够准确阐述 Internet 的含义、发展历程、提供的网络服务&#xff0c;以…...

编程日记 2025/1/10 6:15:18

AI是IT行业的变革力量，还是“职业终结者”？

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 AI是…...

编程日记 2025/1/10 6:14:16

[git]ubuntu git 开启Verbose Mode模式

Verbose Mode 默认情况下&#xff0c;git 在终端屏幕上报告最少的信息。但是&#xff0c;如果您遇到任何类型的问题&#xff0c;启用Verbose Mode会很有帮助 开启Verbose Mode export GIT_CURL_VERBOSE1 关闭Verbose Mode export GIT_CURL_VERBOSE0 还可以通过简单地在命令…...

编程日记 2025/1/10 6:13:15

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2026/1/23 10:24:30

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59