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

Web无障碍

news 2025/9/19 3:42:17

文章目录

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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/9/17 21:27:15

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/17 8:08:37

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/9/3 23:20:22

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/9 10:10:28

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/9/5 6:01:52

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/9/16 9:40:57

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/9/12 2:31:56