尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
freeCodeCamp 课程实战:用 HTML5 audio 元素提升音频内容的可访问性
freeCodeCamp 课程实战用 HTML5 audio 元素提升音频内容的可访问性【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 课程applied-accessibility应用可访问性块中的一道实战练习展开讲解如何用 HTML5 的audio元素为页面引入语义化音频、如何通过controls属性获得浏览器原生的播放控制与键盘支持以及如何为音频内容提供文本替代方案使听障用户也能访问同等信息。读完后你将掌握audio与source的正确嵌套写法、布尔属性的使用方式、音频可访问性的完整要求文本替代 同步字幕 文字记录并能通过课程内置的断言测试验证自己的实现。在课程中的位置这道练习的 ID 是587d7789367417b2b2512aa4位于 applied-accessibility 挑战文件 中。从 课程结构定义 可以看到该块挑战的完整顺序为为图片添加文本替代alt 文本了解何时 alt 文本应留空用标题元素展示内容层级使用main元素直达主要内容用article元素包裹内容使用header/nav/footer地标帮助屏幕阅读器导航使用audio元素提升音频内容可访问性本篇主角后续还有figure、label、fieldset、日期选择器、对比度等主题也就是说本篇练习承接了前面地标与语义结构的学习成果是给非视觉媒体内容补上可访问通道这一脉络中的音频篇——前面解决了让屏幕阅读器知道页面结构这里解决让屏幕阅读器用户听到/读到音频内容。audio 元素给音频内容赋予语义课程的 description 部分给出了核心定义HTML5 的audio元素在标记中包裹声音或音频流内容时赋予内容语义。这一语义意义有两层价值浏览器行为识别出这是媒体资源提供原生的媒体播放能力辅助技术屏幕阅读器可以据此识别页面中存在音频并配合替代内容向用户传达信息。音频内容同样需要**文本替代text alternative**才能对听障或重听用户可访问实现方式有两种页面附近的文字说明如本练习中p元素里的 A sound clip of Zersiaxs screen reader in action.指向完整文字记录transcript的链接。课程给出的基础示例如下注意source元素支持多个来源的写法——浏览器会按顺序挑选自己能解码的格式audio idmeowClip controls source srcaudio/meow.mp3 typeaudio/mpeg source srcaudio/meow.ogg typeaudio/ogg /audio其中type属性声明了资源的 MIME 类型如audio/mpeg对应 MP3、audio/ogg对应 OGG让浏览器在下载文件之前就能判断是否可播放从而在多来源场景中快速跳过不支持的格式。controls 属性布尔属性的典型用法audio标签支持controls属性作用是显示浏览器默认的播放、暂停及其他控件并支持键盘操作——这对无障碍至关重要自绘的播放按钮如果不额外处理焦点与键盘事件键盘用户将无法操作。controls是一个布尔属性boolean attribute不需要值写在标签上即表示开启audio controls ... /audio课程还特别强调了一条多媒体内容的通用要求注意原文 Note多媒体内容通常同时包含视觉与听觉成分需要同步字幕synchronized captions和文字记录transcript视觉和/或听觉障碍用户才能访问它。网页开发者一般不负责制作字幕或 transcript 本身但必须知道要包含它们。实战为屏幕阅读器录音添加 audio 元素练习的 instructions 部分让学习者放下 Camper Cat认识可访问性领域推广者、屏幕阅读器使用者 Zersiaxzersiax并添加一段他使用屏幕阅读器的真实录音直观感受屏幕阅读器的工作方式。课程提供的起始代码seed如下main中已有说明文字但缺少音频本体body header h1Real Coding Ninjas/h1 /header main pA sound clip of Zersiaxs screen reader in action./p /main /body操作步骤与 instructions 完全对应在p元素之后添加一个audio元素在audio标签上加入controls属性在audio内部放入一个source元素src属性设为https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3type属性设为audio/mpeg。课程附带的 Note 值得记住这段录音听起来可能很快、难以听清但这正是屏幕阅读器用户的正常使用速度。这是课程刻意保留原汁原味体验的设计。完成后的参考解答对应课程的 solutions 部分body header h1Real Coding Ninjas/h1 /header main pA sound clip of Zersiaxs screen reader in action./p audio controls source srchttps://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3 typeaudio/mpeg/ /audio /main /body测试断言平台如何验证你的实现课程的 hints 部分内置了一组基于断言的自动测试逐一检查实现是否达标这也是该练习的验收标准可以直接抄来作为自己写 HTML 时的检查清单检查项断言逻辑有且仅有一个audio标签document.querySelectorAll(audio)长度为 1audio必须有闭合标签正则匹配audio.*[\s\S]*/audio且/audio恰好出现 1 次controls属性存在document.querySelector(audio)?.getAttribute(controls)不为空有且仅有一个source标签document.querySelectorAll(source)长度为 1source必须位于audio内部在 audio 节点作用域内:scope source查询结果为 1src值必须与题目给定的 URL 完全一致与https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3做相等比较type值必须为audio/mpegsource的type属性等于audio/mpeg从断言设计可以看出几个容易踩的坑audio必须是成对标签不能自闭合source必须嵌套在audio里而不是放在外面src与type的取值必须逐字符匹配。平台实现佐证transcript 概念在 freeCodeCamp 中的落地课程文档要求开发者知道要包含 transcript而 freeCodeCamp 自身的客户端代码把这个理念落实成了真实功能。ChallengeTranscript 组件 用原生details/summary结构渲染挑战的字幕/文字记录默认折叠summary上标注aria-expanded{isOpen}状态供辅助技术感知展开状态对话类isDialoguetranscript 走富文本渲染普通 transcript 则通过PrismFormatted展示并对不同语言的 superBlock 附加getChallengeContentLangProps提供的lang等属性确保屏幕阅读器用正确的语言读取内容。这正是音频/视频挑战 可访问文字记录模式在平台产品侧的实现。从 E2E 测试夹具 还能看到平台对音频题目的数据建模audioData中同时包含audiofilename、startTimestamp、finishTimestamp与transcript按说话人组织的文本数组即音频片段必须随附文字记录这一约定被固化进了数据结构和端到端测试之中。这与课程 Note 中开发者须保证 transcript 被包含的要求形成呼应。小结audio为声音内容提供语义source提供来源与typeMIME 类型支持多格式回退controls是布尔属性其存在即开启浏览器原生控件并自带键盘支持音频可访问性的完整闭环 语义化audio标签 近邻文本说明或 transcript 链接多媒体场景下的同步字幕与文字记录本课程练习的七条断言可直接作为自查清单audio 成对出现且唯一、controls 存在、source 位于 audio 内部且 src/type 精确匹配freeCodeCamp 客户端的 challenge-transcript 组件 与 quiz-audio 夹具 展示了 transcript 从课程理念到产品实现与测试覆盖的完整链路。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

基于单片机的智能火灾报警烟雾报警系统设计

基于单片机的智能火灾报警烟雾报警系统设计

文章目录一、摘要二、功能设计三、总体设计方案四、效果图资料获取一、摘要 随着社会和经济的发展,防火工作越来越重要,但是目前国内的许多研发都侧重于大型场所的火灾报警。因此,研发一种小型智能报警器是十分必要的,报警器是用…

📅 2026/9/11 8:05:47
STM32标准库USART2串口printf/scanf重定向完整指南

STM32标准库USART2串口printf/scanf重定向完整指南

简介:一套基于STM32神舟IV号开发板的库函数版UART2串口通信工程,专注实现格式化输出与格式化输入功能,适合学习STM32串口通信或需要串口调试例程的嵌入式开发者。压缩包共161个文件,大小约3.07MB,以C源码、头文件、MDK…

📅 2026/9/11 21:37:06
PCB设计从入门到进阶:概念、层叠、布线到生产全流程解析

PCB设计从入门到进阶:概念、层叠、布线到生产全流程解析

你是电子爱好者或者刚开始入门硬件开发的新人,大概率听过一句话:PCB 是电子产品之母。听起来很厉害,但真要问一句到底什么是 PCB,很多人会简单回答一句“就是那块绿色的板子”。这个回答不算错,但它把 PCB 想得太简单了…

📅 2026/9/15 10:32:20
MORE NEWS

更多资讯

📰

企业评审电工证怎么考?上岗必备实操技巧全解析

企业评审电工证怎么考?上岗必备实操技巧全解析 实操考试心里没底怕挂科,特别是对于刚接触电工证的新人来说,面对企业评审电工证的考试流程和内容,往往感到无从下手。很多人一听到“上岗必备”这个词就紧张,生怕自己因为一点小失误就错失机会。别担心,今…

📰

宣城电工证复怎么准备?上岗必备实操技巧全解析

宣城电工证复怎么准备?上岗必备实操技巧全解析 实操考试心里没底怕挂科?你不是一个人,这正是很多准备【宣城电工证复】的电工最真实的焦虑。特别是对于已经在一线工作的电工来说,复审不仅是对过去工作的总结,也是对未来职业发展的铺垫,而 上岗必备…

📰

工地太忙根本没时间复习考试?电工证考试在哪考的官方报名入口怎么找

工地太忙根本没时间复习考试?电工证考试在哪考的官方报名入口怎么找 工地太忙根本没时间复习考试,这是很多电工工友的共同烦恼。尤其在商丘这样的劳务大市,班组负责人每天要面对工期压力、人员调配和现场管理,电工证考试又不是随随便便就能通过的。你有没…

📰

苏州市电工证补办多久拿证 证书过期了不知道怎么复审延期

苏州市电工证补办多久拿证 证书过期了不知道怎么复审延期 证书过期了不知道怎么复审延期,这种焦虑你肯定不是第一个遇到,也不是最后一个。特别是在苏州这样的制造业大市,电工证是从事电气作业的“硬门槛”。很多人在工作中疏忽了证件的时效管理,等到发现…

📰

考电工证要读书吗实操考试考什么多少钱

考电工证要读书吗实操考试考什么多少钱 之前考的证在外省能不能转过来?很多人在报名前都会有这个疑问,特别是那些在外省工作、生活多年的人,担心自己之前考的电工证无法在本地使用,或者需要重新考一次。其实,这跟 多少钱…

📰

哪里查电工证证书真假证全国通用吗

实操考试心里没底怕挂科?考前押题+查电工证真假全攻略 实操考试心里没底怕挂科?考前押题能不能押到重点?这事儿咱们得从头理清,特别是像你这种在郑州金水区做市政公用工程的,手里有个真电工证,不仅找工作有底气,项目现场也敢上手操作,干得安心,拿钱…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬