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计算机入门到高级架构师开发资料超级大礼包免费送!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/13490.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

list stream 改变list属性的值

在Java中&#xff0c;如果你想使用Stream API来改变List中对象的某个属性值&#xff0c;需要注意的是&#xff0c;Stream API本身设计为不可变操作&#xff0c;即它不直接修改原有的集合&#xff0c;而是产生一个新的流或集合。但是&#xff0c;你可以通过流操作来创建一个新的…

java文档管理系统的设计与实现源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的文档管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 文档管理系统的…

第二证券今日投资参考:5月国产游戏版号发放 猪价加速上涨

昨日&#xff0c;两市股指盘中震荡上扬&#xff0c;沪指盘中续创年内新高&#xff0c;创业板指一度涨超1%。到收盘&#xff0c;沪指涨0.54%报3171.15点&#xff0c;深证成指涨0.43%报9750.82点&#xff0c;创业板指涨0.59%报1875.93点&#xff0c;上证50指数涨0.34%&#xff1b…

小程序-收货地址管理模块实现

页面结构代码&#xff1a; address-form.vue --->新建地址和修改地址页面 <template><view class"content"><form><!-- 表单内容 --><view class"form-item"><text class"label">收货人</text>…

注册/认证小程序为什么验证失败

​很多商家在注册/认证小程序时&#xff0c;经常会出现各种验证失败的情况。其中可能是工商总局数据没更新&#xff0c;也有可能是商家填写的信息有误。下面具体分析一下这些情况。 一、工商数据没有更新或存在异常。 微信平台是直接拉取国家工商总局的数据&#xff0c;工商数…

Python 中文编码问题

Python 输出 "Hello, World!"&#xff0c;英文没有问题&#xff0c;但是如果你输出中文字符 "你好&#xff0c;中国" 就有可能会碰到中文编码问题。 Python 文件中如果未指定编码&#xff0c;在执行过程会出现报错&#xff1a; print ("你好&#x…

登录安全分析报告:创蓝云智注册

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

vue 组件中 data 为什么必须是函数

在 Vue 中&#xff0c;组件的 data 必须是一个函数而不是一个对象&#xff0c;这是因为 Vue 组件是可复用的&#xff0c;并且每个组件实例都需要拥有自己独立的数据状态。如果 data 是一个对象&#xff0c;那么这个对象在多个组件实例之间将是共享的&#xff0c;这会导致所有的…

# 分布式链路追踪_skywalking_学习(1)

分布式链路追踪_skywalking_学习&#xff08;1&#xff09; 一、APM 系统概述 1、什么是 APM 系统&#xff1f; APM &#xff1a;全称 Application Performance Management 即应用性能管理系统。是对企业系统即时监控以实现对应用程序性能管理和故障管理的系统化的解决方案。…

移动端常用meta

在移动端开发中&#xff0c;<meta> 标签用于提供关于HTML文档的元数据&#xff0c;这些元数据不会显示在页面上&#xff0c;但可以被浏览器解析&#xff0c;用于控制页面的行为和外观。以下是一些在移动端开发中常用的 标签&#xff1a; 1. 视口设置 这是移动端开发中最…

安卓手机APP开发__Wi-Fi扫描概述

安卓手机APP开发__Wi-Fi扫描概述 目录 概述 Wi-Fi的扫描过程 限制 权限 Android 8.0 and Android 8.1: Android 9: Android 10 (API 级别 29) 和 更高版本: 扫描频率的限制 Android 8.0 and Android 8.1: Android 9: Android 10 and higher: 概述 你能使用Wi-Fi的…

Flutter 中的 ValueListenableBuilder 小部件:全面指南

Flutter 中的 ValueListenableBuilder 小部件&#xff1a;全面指南 在 Flutter 应用开发中&#xff0c;响应数据变化并更新 UI 是一个常见的需求。ValueListenableBuilder 是 Flutter 提供的一个非常有用的小部件&#xff0c;它允许你根据 ValueListenable 的值自动更新 widge…

JS对象超细

目录 一、对象是什么 1.对象声明语法 2.对象有属性和方法组成 二、对象的使用 1.对象的使用 &#xff08;1&#xff09;查 &#xff08;2&#xff09;改 &#xff08;3&#xff09;增 &#xff08;4&#xff09;删&#xff08;了解&#xff09; &#xff08;5&#xf…

算网融合,移动云加速形成新质生产力

文章目录 一.移动云介绍1.政策支持2.产品介绍image-20240522164613917 二.云主机ESC使用1.实名认证2.云主机订购3.登录方式4.控制台登录5.Xshell登录6.简单使用 三.产品使用评价1.真伪测评2.产品优势 一.移动云介绍 1.政策支持 ​ 正所谓家事国事天下事&#xff0c;事事关心&…

访问列表元素

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;如果想将列表的内容输出也比较简单&#xff0c;可以直接使用print()函数即可。例如&#xff0c;创建一个名称为untitle的列表…

将PCD点云投影到BEV平面得到图片

前言 点云数据作为一种丰富的三维空间信息表达方式&#xff0c;通常用于自动驾驶、机器人导航和三维建模等领域。然而&#xff0c;点云数据的直观性不如二维图像&#xff0c;这限制了它在一些需要快速视觉反馈的应用场景中的使用。本文将探讨如何将点云数据转换为二维图像&…

医药进出口交易|基于SSM+vue的医药进出口交易系统的设计与实现(源码+数据库+文档)

医药进出口交易系统 目录 基于SSM&#xff0b;vue的医药进出口交易系统的设计与实现 一、前言 二、系统设计 三、系统功能设计 5.1系统登录 5.2管理员功能模块 5.3仓储部门功能模块 5.4业务部门功能模块 5.5供应部门功能模块 5.6财务部功能模块 5.7客户功能模块 …

Linux:IPC - 管道

Linux&#xff1a;IPC - 管道 管道原理匿名管道管道读写机制管道特性命名管道mkfifo指令mkfifo接口 进程间通信的目的&#xff0c;是为了让两个进程看到同一份资源&#xff0c;在Linux中&#xff0c;主要的进程间通信有管道&#xff0c;system V&#xff0c;POSIX&#xff0c;本…

adb卸载系统垃圾应用

//获取包名 输入如下代码&#xff0c;然后在打开和关闭要获取包名的app就会打印出该app的包名 adb shell am monitor //卸载系统应用 -k会保留用户数据&#xff0c;不包含-k则不会保留用户数据 adb shell pm uninstall -k --user 0 包名 &#xff08;包名一般为&#xff1a;c…

OPPO Reno12 系列正式发布,仅2699元起售

5月23日&#xff0c;OPPO发布科技潮品 Reno12 系列&#xff0c;包含 Reno12 与 Reno12 Pro&#xff0c;以超美小直屏设计&#xff0c;以及行业首发的新科技&#xff0c;引领全新潮流方向。 据「TMT星球」了解&#xff0c;首次亮相的全新配色 Reno12 「千禧银」与Reno12 Pro的「…