文章目录
- 🟢Web Accessibility-Web无障碍
- 🟢一、Web Accessibility-Web
- 1. web无障碍设计
- 2. demo
- 3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢)
- 如有其他更好方案，可以私信我哦
- ✒️总结
🟢Web Accessibility-Web无障碍
🟢一、Web Accessibility-Web
本文主要记录一下，前端如何实现无障碍设计，以及相关功能，首先了解一下无障碍是什么？Web无障碍在确保所有用户，包括残疾人士，都能平等地访问和利用网络资源。这一计划对于促进社会包容性至关重要，因为它确保了残疾人士不会因为技术障碍而受到排斥，能够平等地参与教育、工作、娱乐和政治等各个方面。
- 提升用户体验：无障碍的Web能够吸引更多的用户，包括那些有临时或永久性残疾的用户，从而提供更广泛的用户体验。
- 法律要求：许多国家和地区都有法律要求公共网站和服务必须达到一定的无障碍标准。例如，美国的《美国残疾人法案》（ADA）和欧盟的《残疾人无障碍指令》都明确规定了公共网站必须对残疾人士无障碍。
1. web无障碍设计
- 可访问性 元素的内容字段 + 元素状态 + 元素类型
- 语义化HTML：使用正确的HTML元素表达内容的结构和含义，如使用语义化标签、标题标签、列表元素等。
<header>定义页面或区块的头部内容，通常包含导航链接、网站标题等。
<nav>定义导航链接部分，用于放置页面的主要导航链接。
<main>定义页面的主体内容，通常包含文章、博客帖子等主要内容。
<article>定义独立的内容块，如博客文章、新闻报道等。
<section>定义内容分区，用于将页面内容划分为不同的部分。
<footer>定义页面或区块的底部内容，通常包含版权信息、联系方式等。
- 文本替代：为所有非文本内容（如图片）提供描述性的alt属性，以便屏幕阅读器用户理解图片内容。
<img
class="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 API
if (!('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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨🔧 个人主页 : 前端初见
