phpcms网站音乐代码存放在什么位置,h5页面制作app,家用电脑做网站教程,郑州手机网站开发文章目录 #x1f7e2;Web Accessibility-Web无障碍#x1f7e2;一、Web Accessibility-Web1. web无障碍设计2. demo3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢) 如有其他更好方案#xff0c;可以私信我哦✒️总结 #x1f7e2;Web Accessibility-Web无障碍… 文章目录 Web Accessibility-Web无障碍一、Web Accessibility-Web1. web无障碍设计2. demo3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢) 如有其他更好方案可以私信我哦✒️总结 Web Accessibility-Web无障碍
一、Web Accessibility-Web 本文主要记录一下前端如何实现无障碍设计以及相关功能首先了解一下无障碍是什么Web无障碍在确保所有用户包括残疾人士都能平等地访问和利用网络资源。这一计划对于促进社会包容性至关重要因为它确保了残疾人士不会因为技术障碍而受到排斥能够平等地参与教育、工作、娱乐和政治等各个方面。 提升用户体验无障碍的Web能够吸引更多的用户包括那些有临时或永久性残疾的用户从而提供更广泛的用户体验。法律要求许多国家和地区都有法律要求公共网站和服务必须达到一定的无障碍标准。例如美国的《美国残疾人法案》ADA和欧盟的《残疾人无障碍指令》都明确规定了公共网站必须对残疾人士无障碍。 1. web无障碍设计
可访问性 元素的内容字段 元素状态 元素类型语义化HTML使用正确的HTML元素表达内容的结构和含义如使用语义化标签、标题标签、列表元素等。
header定义页面或区块的头部内容通常包含导航链接、网站标题等。
nav定义导航链接部分用于放置页面的主要导航链接。
main定义页面的主体内容通常包含文章、博客帖子等主要内容。
article定义独立的内容块如博客文章、新闻报道等。
section定义内容分区用于将页面内容划分为不同的部分。
footer定义页面或区块的底部内容通常包含版权信息、联系方式等。文本替代为所有非文本内容如图片提供描述性的alt属性以便屏幕阅读器用户理解图片内容。
imgclassmore-imagealt提示文字src../../../assets/images/ntwb-more.png/
ARIA属性使用ARIAAccessible Rich Internet Applications角色和属性来增强可访问性尤其是对于复杂交互元素。 a hrefjavascript:void(0) aria-label进入老年模式span classright-line长者版/span/a无障碍键盘访问 添加tabindex属性可以通过添加tabindex“0属性使其可通过键盘聚焦。同时可以使用tabindex”-1来隐藏元素但仍允许通过JavaScript聚焦。 ullia href#section1section1/a/lilia href#section2section2/a/li/ulsection idsection1h2section1/h2p文本/pbutton idbtn1按钮1/button/sectionsection idsection2h2section2/h2p文本/pbutton idbtn2按钮2/button/section
在上方代码中用户可以通过Tab键和ShiftTab键在链接和按钮之间导航。当元素获得焦点时会显示一个蓝色的轮廓以帮助用户了解当前焦点位置。
2. demo
语音识别 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title无障碍/titlestyle/* 简单的样式设置 */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
bodydiv classcontainerh1无/h1p使用麦克风说话文字将显示在下方。点击按钮可以听到预设的文本。/p!-- 语音输入区域 --button idstart-speech aria-label开始语音输入按住说话/buttondiv idstatus aria-livepolite/div!-- 语音输出区域 --button idspeak-button aria-label朗读文本朗读文本/buttondiv idoutput/div/divscript// 检查浏览器是否支持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
/html3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢)
使用的是太阳湾的无障碍工具条代码地址https://gitee.com/tywAmblyopia/ToolsUI 在项目public文件下index.html文件引入jquery.js和拉取下的项目下canyou 文件夹中的 wza.min.js文件
jquery 建议1.8.1以上版本 script srchttps://code.jquery.com/jquery-1.8.3.min.js/scriptscript idrrbayJs src/canyou/js/wza.min.js referrerpolicyorigin/script调用
a idwzayd title网站信息无障碍工具条 hrefjavascript:; classwzayd accesskeyg无障碍阅读/a
如有其他更好方案可以私信我哦
✒️总结 如果这篇【文章】有帮助到你希望可以给我点个赞创作不易如果有对前端端或者对python感兴趣的朋友,请多多关注咱们一起探讨和努力 个人主页 : 前端初见
