Web Accessibility基础：构建无障碍的前端应用
Web Accessibility（网络无障碍）是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例：
2500G计算机入门到高级架构师开发资料超级大礼包免费送！
1. 文本替代（alt属性）
确保所有非文本内容（如图片）都有描述性的alt属性，以便屏幕阅读器用户理解图片内容。
<img src="hero.jpg" alt="A smiling person holding a cup of coffee">
2. 标签和角色（ARIA roles）
使用ARIA（Accessible Rich Internet Applications）角色和属性来增强可访问性，尤其是对于复杂交互元素。
<button role="button" aria-label="Close">X</button>
3. 表单元素
确保表单元素有清晰的标签，使用
<label for="email">Email:</label>
<input type="email" id="email" required>
4. 键盘导航
所有交互元素都应可以通过键盘导航，并遵循自然的焦点顺序。
<nav><ul><li><a href="#home" tabindex="0">Home</a></li><li><a href="#about" tabindex="0">About</a></li><li><a href="#contact" tabindex="0">Contact</a></li></ul>
</nav>
5. 颜色对比
确保文本和背景之间有足够的颜色对比，避免颜色作为唯一的信息传递方式。
/* 使用颜色对比检查工具，如WCAG Color Contrast Checker */
body {color: #000; /* dark text */background-color: #f8f8f8; /* light background, good contrast */
}
6. 视觉隐藏
使用visually-hidden类隐藏内容，使其仅对屏幕阅读器可见。
.visually-hidden {position: absolute !important;clip: rect(0 0 0 0) !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;border: 0 !important;
}
<button><span class="visually-hidden">Skip to main content</span>Skip
</button>
7. ARIA live区域
使用aria-live属性通知屏幕阅读器用户关于页面动态更新的信息。
<div aria-live="polite" aria-atomic="true" class="notification"><!-- Dynamic content will be inserted here -->
</div>
8. 时间敏感内容
为时间敏感的内容提供截止日期或计时器。
<p>This offer expires in:<span id="countdown"></span>
</p><script>// 更新countdown元素的内容
</script>
9. 考虑触控设备
确保触摸目标足够大，至少44x44像素，避免过于紧密的布局。
.button {min-width: 44px;min-height: 44px;padding: 10px;
}
10. 编码语义化
使用语义化的HTML元素，如<header>, <nav>, <main>, <article>, <section>, <footer>等。
<body><header><!-- Header content --></header><main><!-- Main content --></main><footer><!-- Footer content --></footer>
</body>
11. 视觉指示器
为交互元素添加视觉反馈，如悬停、聚焦和激活状态。
.button {transition: all 0.3s;
}.button:hover,
.button:focus,
.button:active {background-color: #333;color: #fff;
}
12. 语音命令和语音输入
考虑到语音控制设备，如Siri、Google Assistant等，确保界面可以通过语音命令操作。
<form action="/search"><label for="search">Search:</label><input type="search" id="search" name="q" placeholder="Voice command: Search..."><button type="submit">Go</button>
</form>
13. 字体和文本可读性
选择易读的字体，保持足够的行高、字间距和字号。确保文本缩放不影响布局。
body {font-family: Arial, sans-serif;font-size: 16px;line-height: 1.5;letter-spacing: 0.05em;text-rendering: optimizeLegibility;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;
}
14. 交互元素的清晰状态
确保用户清楚知道何时可以与元素交互，以及交互的状态。
input[type="checkbox"]:checked + label::before {content: '\2713'; /* checkmark character */
}
html
<input type="checkbox" id="accept" />
<label for="accept">I accept the terms and conditions</label>
15. 考虑色盲用户
使用色彩对比度检查工具，确保颜色组合对色盲用户友好。
.colorblind-friendly {background-color: #008080;color: #fff;
}
16. 视觉辅助
提供视觉辅助，如放大镜、高对比度模式、色盲模拟器等。
<button id="toggle-high-contrast">Toggle High Contrast</button><script>document.getElementById('toggle-high-contrast').addEventListener('click', function() {document.body.classList.toggle('high-contrast');});
</script><style>.high-contrast {background-color: #000;color: #fff;}
</style>
17. 适配屏幕阅读器
确保所有重要信息都能被屏幕阅读器读取，例如表格的标题和摘要。
<table><caption>Employee List</caption><thead><tr><th>Name</th><th>Position</th><th>Office</th></tr></thead><!-- Table rows -->
</table>
18. 响应式设计
确保网站在不同设备和屏幕尺寸上表现良好，适应不同访问方式。
@media (max-width: 768px) {/* Mobile-specific styles */
}
19. 视频和音频内容
为视频提供字幕，为音频提供文字转录。
<video controls><source src="movie.mp4" type="video/mp4"><track kind="captions" src="movie.vtt" srclang="en" label="English">
</video>
20. 定期测试
使用自动化和人工测试工具（如axe，Pa11y，Lighthouse等）定期检查可访问性，并根据反馈进行改进。
21. 图像地图（Image Maps）
对于包含多个交互区域的图像，使用图像地图提供可点击的区域。
<img src="worldmap.png" usemap="#worldmap" alt="World Map">
<map name="worldmap"><area shape="rect" coords="0,0,82,126" alt="North America" href="#na"><area shape="circle" coords="200,100,30" alt="Europe" href="#eu"><area shape="poly" coords="330,50,380,0,450,50,400,100" alt="Asia" href="#as">
</map>
22. 语音合成（Text-to-Speech）
为用户提供语音合成选项，让他们能够听到页面内容。
<button id="tts">Read Aloud</button><script>document.getElementById('tts').addEventListener('click', function() {const textToRead = document.querySelector('main').innerText;const speech = new SpeechSynthesisUtterance(textToRead);window.speechSynthesis.speak(speech);});
</script>
23. 错误提示和反馈
提供清晰的错误消息和反馈，使用户了解如何解决问题。
<form><label for="email">Email:</label><input type="email" id="email" required><span id="email-error" class="error"></span><button type="submit">Submit</button>
</form><script>document.querySelector('form').addEventListener('submit', function(event) {event.preventDefault();const emailInput = document.getElementById('email');const errorSpan = document.getElementById('email-error');if (!emailInput.checkValidity()) {errorSpan.textContent = 'Please enter a valid email address.';} else {errorSpan.textContent = '';// Submit form or perform other actions}});
</script>
24. 交互元素的焦点管理
确保键盘焦点在页面元素之间正确流动，避免跳过或重复。
const focusableElements = 'a[href], button, input:not([type="hidden"]), textarea, select, iframe, object, embed, [tabindex="0"], [contenteditable]';
const firstFocusableElement = document.querySelector(focusableElements);document.addEventListener('DOMContentLoaded', function() {if (firstFocusableElement) {firstFocusableElement.focus();}
});document.addEventListener('keydown', function(event) {if (event.key === 'Tab') {const lastFocusableElement = document.querySelector(`${focusableElements}:last-of-type`);if (event.shiftKey && document.activeElement === document.body) {lastFocusableElement.focus();event.preventDefault();} else if (!event.shiftKey && document.activeElement === lastFocusableElement) {firstFocusableElement.focus();event.preventDefault();}}
});
2500G计算机入门到高级架构师开发资料超级大礼包免费送！
相关文章：
Web Accessibility基础：构建无障碍的前端应用
Web Accessibility（网络无障碍）是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例： 2500G计算机入门到高级架构师开发资料超级大礼包免…...
谈谈你对 SPA 的理解？
1 理解基本概念 SPA（single-page application）单页应用，默认情况下我们编写 Vue、React 都只有一个html 页面，并且提供一个挂载点，最终打包后会再此页面中引入对应的资源。（页面的渲染全部是由 JS 动态进行…...
JAVA给一个JSON数组添加对象
操作Mysql表的json字段，查询json字段的内容，将新增的内容添加到查询的json数组中 String a "[{\"name\": \"张三\", \"age\": 10, \"gender\": \"男\", \"email\": \"123qq.co…...
设计一个完美的用户角色权限表
设计一个完美的用户角色权限表需要考虑系统的安全性、灵活性和可扩展性。以下是一个详细的用户角色权限管理表设计方案，包含多个表结构和字段描述。 目录 1. 用户表（Users Table）2. 角色表（Roles Table）3. 权限表&…...
Git 基本使用
目录 Git 安装与设置 在 Windows上安装 Git git 的配置 Git 原理 git 的四个区域 git 工作流程 git 文件的状态 Git 操作 创建仓库 免密登录 基本操作 版本回退 本地仓库整理 分支命令 合并分支 解决冲突 Git 安装与设置 在 Windows上安装 Git 在 Windows上使…...
LabVIEW使用PID 控制器有哪些应用场景？
如何在LabVIEW中创建PID控制器? LabVIEW为各种控制工程任务提供了内置函数和库，包括PID控制器编程。这些功能位于控制设计和仿真调色板中，其中有用于不同类型控制器的子调色板。要在LabVIEW中创建PID控制器，需要将PID函数从PID子调色板拖放…...
UTC与GPS时间转换-[week, sow]
UTC与GPS时间转换-[week, sow] utc2gpsgps2utc测试参考 Ref: Global Positioning System utc2gps matlab源码 function res utc2gps(utc_t, weekStart)%% parameterssec_day 86400;sec_week 604800;leapsec 18; % 默认周一为一周的开始if nargin < 2weekStart d…...
JVM性能调优：内存模型及垃圾收集算法
JVM内存结构 根据Java虚拟机规范，JVM内存主要划分为以下区域： 年轻代（New Generation） 包括Eden空间，用于存放新创建的对象。Survivor区由两个相同大小的Survivor1和Survivor2组成，用于存放经过初次垃圾回…...
不靠后端，前端也能搞定接口！
嘿，前端开发达人们！有个超酷的消息要告诉你们：MemFire Cloud来袭啦！这个神奇的东东让你们不用依赖后端小伙伴们，也能妥妥地搞定 API 接口。是不是觉得有点不可思议？但是事实就是这样，让我们一起…...
如何秒杀Promise面试题
如何秒杀Promise面试题 如果你在面试的时候技术面给你出了点关于Promise的面试题首先不要慌，先问候他爹妈一套问候语！ 然后切记不要(ps:这是病句别在意!🤣) 自己想 找他要纸和笔 首先关于promise的面试题无非就是 promise 的状态和宏队列、…...
linux文件权限常用知识点，基于Linux(openEuler、CentOS8)
目录 知识点常用实例 知识点 真实环境文件显示 解读 常用实例 文件所有者 chown -R nginx:nginx /home/source目录权限(R选填必须大写<遍历子文件夹及文件>) chmod -R 755 /home/sourcechmod -R 777 /home/source...
【前端笔记】记录一个能优化Echarts Geo JSON大小的网站
前端在使用Echarts等可视化图表库会不可避免遇到的问题，渲染地图的数据太大。 而有那么一个网站能给予这个问题一个解决方案：链接在此 使用方法很简单，首先先进入网站，如果进入了会是这个页面： 接着，选择一…...
车与网络之间（V2N）简介
车与网络之间（V2N）简介 一、定义与概述 V2N，全称为Vehicle-to-Network，是指车辆与网络之间的通信和连接技术。这种技术使得车辆能够与互联网进行无缝连接，进而实现导航、娱乐、防盗等多种应用功能。在智能交通系统领…...
.Net Core WebAPI参数的传递方式
Controller继承自ControllerBase，只不过增加了视图相关的方法，一般mvc项目选用Controller而Web API项目选择ControllerBase即可。 给服务器传递参数的时候，有URL、QueryString、请求报文体3种方式 请求路径/Student/GetAll/school/MIT/class…...
10款免费黑科技软件，强烈推荐！
1.AI视频生成——巨日禄 网页版https://aitools.jurilu.com/ "巨日禄 "是一款功能强大的文本视频生成器，可以快速将文本内容转换成极具吸引力的视频。操作简单，用户只需输入文字，选择喜欢的样式和模板， “巨日禄”就会…...
DFS：解决二叉树问题
文章目录 了解DFS1.计算布尔二叉树的值思路代码展示 2.求根节点到叶节点数字之和思路代码展示 3.二叉树剪枝思路代码展示 4.验证二叉搜索树思路分析代码展示 5.二叉搜索树中第k小元素思路：代码展示 6.二叉树的所有路径思路分析代码展示 总结 了解DFS 所谓DFS就是就…...
【相机开发问题总结】曝光补偿ExposureCompensation未生效异常分析及解决
问题描述 做一款相机应用时，用户反馈相机预览界面太暗了，由于我们是嵌入式设备，没有手机那么高大上得闪光灯补光，因此只能考虑从软件层面提高界面亮度，还好找到了曝光补偿，但是开发过程中发现曝光补偿未生…...
Flutter 中的 DateRangePickerDialog 小部件：全面指南
Flutter 中的 DateRangePickerDialog 小部件：全面指南 在 Flutter 应用开发中，日期和时间的选择是一项常见的用户交互需求。DateRangePickerDialog 是一个方便的小部件，它提供了一个对话框界面，允许用户选择日期范围。这个小部件…...
MCS-51伪指令
上篇我们讲了汇编指令格式，寻址方式和指令系统分类，这篇我们讲一下单片机伪指令。 伪指令是汇编程序中用于指示汇编程序如何对源程序进行汇编的指令。伪指令不同于指令，在汇编时并不翻译成机器代码，只是会汇编过程进行相应的控制…...
vue3 vant4实现抖音短视频功能
文章目录 1. 实现效果2. 精简版核心代码3. 完整功能点（本文章不写，只写核心代码） 1. 实现效果 2. 精简版核心代码 使用的 vue3 vant4组件使用van-swipe进行轮播图切换实现 <template><div :style"{width: width px,overflo…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程 名&…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
go 里面的指针
指针 在 Go 中，指针（pointer）是一个变量的内存地址，就像 C 语言那样： a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10，通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...