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

Web无障碍

news 2025/11/10 8:57:47

文章目录

  • 🟢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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/11/7 19:36:19

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/11/7 20:34:59

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/10/30 6:37:10

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/10/28 1:35:57

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/11/8 9:59:27

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/11/8 10:55:21

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/11/7 14:06:19

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/11/7 20:31:27

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02