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

Web Accessibility基础：构建无障碍的前端应用

news 2025/11/9 3:46:28

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&#xff08;网络无障碍&#xff09;是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例&#xff1a; 2500G计算机入门到高级架构师开发资料超级大礼包免…...

编程日记 2024/5/26 8:45:40

谈谈你对 SPA 的理解？

1 理解基本概念 SPA&#xff08;single-page application&#xff09;单页应用&#xff0c;默认情况下我们编写 Vue、React 都只有一个html 页面&#xff0c;并且提供一个挂载点&#xff0c;最终打包后会再此页面中引入对应的资源。&#xff08;页面的渲染全部是由 JS 动态进行…...

编程日记 2024/5/26 8:44:38

JAVA给一个JSON数组添加对象

操作Mysql表的json字段&#xff0c;查询json字段的内容&#xff0c;将新增的内容添加到查询的json数组中 String a "[{\"name\": \"张三\", \"age\": 10, \"gender\": \"男\", \"email\": \"123qq.co…...

编程日记 2024/5/26 8:43:37

设计一个完美的用户角色权限表

设计一个完美的用户角色权限表需要考虑系统的安全性、灵活性和可扩展性。以下是一个详细的用户角色权限管理表设计方案&#xff0c;包含多个表结构和字段描述。 目录 1. 用户表&#xff08;Users Table&#xff09;2. 角色表&#xff08;Roles Table&#xff09;3. 权限表&…...

编程日记 2024/5/26 8:42:36

Git 基本使用

目录 Git 安装与设置 在 Windows上安装 Git git 的配置 Git 原理 git 的四个区域 git 工作流程 git 文件的状态 Git 操作 创建仓库 免密登录 基本操作 版本回退 本地仓库整理 分支命令 合并分支 解决冲突 Git 安装与设置 在 Windows上安装 Git 在 Windows上使…...

编程日记 2024/5/26 8:41:35

LabVIEW使用PID 控制器有哪些应用场景？

如何在LabVIEW中创建PID控制器? LabVIEW为各种控制工程任务提供了内置函数和库&#xff0c;包括PID控制器编程。这些功能位于控制设计和仿真调色板中&#xff0c;其中有用于不同类型控制器的子调色板。要在LabVIEW中创建PID控制器&#xff0c;需要将PID函数从PID子调色板拖放…...

编程日记 2024/5/26 8:40:35

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…...

编程日记 2024/5/26 8:39:33

JVM性能调优：内存模型及垃圾收集算法

JVM内存结构 根据Java虚拟机规范&#xff0c;JVM内存主要划分为以下区域&#xff1a; 年轻代&#xff08;New Generation&#xff09; 包括Eden空间&#xff0c;用于存放新创建的对象。Survivor区由两个相同大小的Survivor1和Survivor2组成&#xff0c;用于存放经过初次垃圾回…...

编程日记 2024/5/26 8:38:32

不靠后端，前端也能搞定接口！

嘿&#xff0c;前端开发达人们&#xff01;有个超酷的消息要告诉你们&#xff1a;MemFire Cloud来袭啦&#xff01;这个神奇的东东让你们不用依赖后端小伙伴们&#xff0c;也能妥妥地搞定 API 接口。是不是觉得有点不可思议&#xff1f;但是事实就是这样&#xff0c;让我们一起…...

编程日记 2024/5/26 8:36:30

如何秒杀Promise面试题

如何秒杀Promise面试题 如果你在面试的时候技术面给你出了点关于Promise的面试题首先不要慌&#xff0c;先问候他爹妈一套问候语&#xff01; 然后切记不要(ps:这是病句别在意!&#x1f923;) 自己想 找他要纸和笔 首先关于promise的面试题无非就是 promise 的状态和宏队列、…...

编程日记 2024/5/26 8:35:28

linux文件权限常用知识点，基于Linux(openEuler、CentOS8)

目录 知识点常用实例 知识点 真实环境文件显示 解读 常用实例 文件所有者 chown -R nginx:nginx /home/source目录权限(R选填必须大写<遍历子文件夹及文件>) chmod -R 755 /home/sourcechmod -R 777 /home/source...

编程日记 2024/5/26 8:32:24

【前端笔记】记录一个能优化Echarts Geo JSON大小的网站

前端在使用Echarts等可视化图表库会不可避免遇到的问题&#xff0c;渲染地图的数据太大。 而有那么一个网站能给予这个问题一个解决方案&#xff1a;链接在此 使用方法很简单&#xff0c;首先先进入网站&#xff0c;如果进入了会是这个页面&#xff1a; 接着&#xff0c;选择一…...

编程日记 2024/5/26 8:30:23

车与网络之间（V2N）简介

车与网络之间&#xff08;V2N&#xff09;简介 一、定义与概述 V2N&#xff0c;全称为Vehicle-to-Network&#xff0c;是指车辆与网络之间的通信和连接技术。这种技术使得车辆能够与互联网进行无缝连接&#xff0c;进而实现导航、娱乐、防盗等多种应用功能。在智能交通系统领…...

编程日记 2024/5/26 8:29:21

.Net Core WebAPI参数的传递方式

Controller继承自ControllerBase&#xff0c;只不过增加了视图相关的方法&#xff0c;一般mvc项目选用Controller而Web API项目选择ControllerBase即可。 给服务器传递参数的时候&#xff0c;有URL、QueryString、请求报文体3种方式 请求路径/Student/GetAll/school/MIT/class…...

编程日记 2024/5/26 8:28:20

10款免费黑科技软件，强烈推荐！

1.AI视频生成——巨日禄 网页版https://aitools.jurilu.com/ "巨日禄 "是一款功能强大的文本视频生成器&#xff0c;可以快速将文本内容转换成极具吸引力的视频。操作简单&#xff0c;用户只需输入文字&#xff0c;选择喜欢的样式和模板&#xff0c; “巨日禄”就会…...

编程日记 2024/5/26 8:26:18

DFS：解决二叉树问题

文章目录 了解DFS1.计算布尔二叉树的值思路代码展示 2.求根节点到叶节点数字之和思路代码展示 3.二叉树剪枝思路代码展示 4.验证二叉搜索树思路分析代码展示 5.二叉搜索树中第k小元素思路&#xff1a;代码展示 6.二叉树的所有路径思路分析代码展示 总结 了解DFS 所谓DFS就是就…...

编程日记 2024/5/26 8:25:17

【相机开发问题总结】曝光补偿ExposureCompensation未生效异常分析及解决

问题描述 做一款相机应用时&#xff0c;用户反馈相机预览界面太暗了&#xff0c;由于我们是嵌入式设备&#xff0c;没有手机那么高大上得闪光灯补光&#xff0c;因此只能考虑从软件层面提高界面亮度&#xff0c;还好找到了曝光补偿&#xff0c;但是开发过程中发现曝光补偿未生…...

编程日记 2024/5/26 8:24:15

Flutter 中的 DateRangePickerDialog 小部件：全面指南

Flutter 中的 DateRangePickerDialog 小部件&#xff1a;全面指南 在 Flutter 应用开发中&#xff0c;日期和时间的选择是一项常见的用户交互需求。DateRangePickerDialog 是一个方便的小部件&#xff0c;它提供了一个对话框界面&#xff0c;允许用户选择日期范围。这个小部件…...

编程日记 2024/5/26 8:23:14

MCS-51伪指令

上篇我们讲了汇编指令格式&#xff0c;寻址方式和指令系统分类&#xff0c;这篇我们讲一下单片机伪指令。 伪指令是汇编程序中用于指示汇编程序如何对源程序进行汇编的指令。伪指令不同于指令&#xff0c;在汇编时并不翻译成机器代码&#xff0c;只是会汇编过程进行相应的控制…...

编程日记 2024/5/26 8:22:12

vue3 vant4实现抖音短视频功能

文章目录 1. 实现效果2. 精简版核心代码3. 完整功能点&#xff08;本文章不写&#xff0c;只写核心代码&#xff09; 1. 实现效果 2. 精简版核心代码 使用的 vue3 vant4组件使用van-swipe进行轮播图切换实现 <template><div :style"{width: width px,overflo…...

编程日记 2024/5/26 8:21:11

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/11/8 9:01:43

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/11/7 7:59:32

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/11/7 9:00:41

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/11/6 2:17:56

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2025/11/7 20:51:43

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

编程新知 2025/7/7 1:11:39

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...

编程新知 2025/11/7 19:13:35

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题 2025/6/9 20:54 缘起&#xff0c;为了跨网段推流&#xff0c;千辛万苦配置好了网络参数。 但是命令iptables -t filter -F tetherctrl_FORWARD可以在调试串口/DEBUG口正确执行。…...

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

Excel 怎么让透视表以正常Excel表格形式显示

目录 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总...

编程新知 2025/11/7 23:47:29