freeCodeCamp 实战用 figure 与 figcaption 提升图表的可访问性Applied Accessibility 挑战详解【免费下载链接】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实用可访问性模块的挑战 Improve Chart Accessibility with the figure Element 为主体完整讲解figure/figcaption语义元素在数据可视化场景中的用法包括课程给出的原始任务说明、全部自动化测试断言、初始代码与参考解答并结合后续挑战源码分析figure与屏幕阅读器专用表格如何配合为视觉障碍用户提供图表的文本替代方案。挑战在课程体系中的位置该挑战的源文件位于挑战源文件从课程结构文件 applied-accessibility.json 可以确认它在该 block 的challengeOrder中排在第 10 位共 21 个挑战前一个挑战是 Improve Accessibility of Audio Content with the audio Element后一个挑战是 Improve Form Field Accessibility with the label Element而紧随其后第 15 位的挑战 Make Elements Only Visible to a Screen Reader by Using Custom CSS 则是本挑战的自然延续。front matter 中还包含challengeType: 0普通 HTML/CSS/JS 交互编辑器挑战dashedName: improve-chart-accessibility-with-the-figure-element用于生成 URL 的短横线命名forumTopicId: 301015对应的官方论坛主题编号课程挑战文件统一遵循描述—说明—提示—初始代码—解答的分段结构# --description--、# --instructions--、# --hints--、# --seed--、# --solutions--这套结构由仓库的 Joi 校验模式定义见 challenge-schema.js 中对description、hints、challengeFiles等字段的约束。核心概念figure 与 figcaption 的双重可访问性收益课程原文--description--段给出的定义是HTML5 引入了figure元素及其配套的figcaption。两者配合使用可以将视觉表示如图片、示意图、图表与其说明文字包裹在一起。把这两个元素组合起来能带来双重可访问性收益一是语义化地分组合并了相关内容二是提供了一个解释figure内容的文本替代。这句话包含两个可以拆开理解的技术点语义分组figure将图表和对图表的说明在文档大纲中绑定为一个整体。屏幕阅读器与辅助技术可以基于文档结构landmark、heading、figure来导航页面而非像div那样毫无语义。文本替代figcaption本身就是可读文本视觉障碍用户即使看不见图表也能获得对图表内容的描述。针对数据可视化charts场景课程进一步指出caption 可以被用来简要标注趋势或结论briefly note the trends or conclusions服务于视觉障碍用户。并且课程明确预告了另一道挑战——用 CSS 把图表数据的表格版本移到屏幕之外供屏幕阅读器用户访问。这正是后面小节要讲的内容。课程给出的示例注意figcaption位于figure标签内部且可以与其它元素组合figure img srcroundhouseDestruction.jpeg altPhoto of Camper Cat executing a roundhouse kick br figcaption Master Camper Cat demonstrates proper form of a roundhouse kick. /figcaption /figure任务说明instructions课程以 Camper Cat 的故事线给出任务Camper Cat 正在努力制作一个堆叠条形图stacked bar chart展示每周用于 stealth潜行、combat战斗、weapons武器训练的时间分配。请帮助他更好地组织页面结构把他使用的div标签改为figure标签把包裹 caption 的p标签改为figcaption标签。也就是说本挑战的改动范围非常小且明确只替换一对标签div→figurep→figcaption不改动文本内容。这种最小 diff式的挑战设计是 freeCodeCamp 课程的特点保证测试断言能精确验证目标语义结构。自动化测试断言hints 全量解读--hints--段中的每一条提示实际上就是挑战的验收测试基于 DOM 查询与源码正则。逐条说明1. 页面中必须有且只有一个figure标签assert.lengthOf(document.querySelectorAll(figure) , 1);2. 页面中必须有且只有一个figcaption标签assert.lengthOf(document.querySelectorAll(figcaption) , 1);3. 不允许残留任何div标签assert.lengthOf(document.querySelectorAll(div), 0);4. 不允许残留任何p标签assert.lengthOf(document.querySelectorAll(p) , 0);第 3、4 条是负向断言初始代码里的div和p必须被替换掉而不是简单地在旁边新增figure/figcaption。这防止学习者用新增语义标签 保留旧标签的方式蒙混过关。5.figcaption必须是figure的直接子元素const figure document.querySelector(figure); const children figure?.querySelectorAll(:scope ${figcaption}); assert.lengthOf(children, 1);这里的:scope是关键:scope figcaption等价于以当前figure元素为上下文根仅在其后代中查找figcaption。它确保figcaption确实位于figure内部而不是被放到页面上的其它位置。6.figure开闭标签必须成对assert.isTrue( code.match(/\/figure/g)?.length code.match(/figure/g)?.length );与前 5 条基于解析后的 DOM 不同这条断言直接对编辑器中的源码字符串code做正则匹配比较figure与/figure的出现次数。其用意是强制书写显式闭合标签——figure不像img、br那样是自闭合元素缺少/figure虽然浏览器解析时能容忍但会被这里判为不通过。初始代码seed以下是挑战提供的完整初始 HTML--seed--段其中!-- Only change code below/above this line --注释标出了允许编辑的区域body header h1Training/h1 nav ul lia href#stealthStealth amp; Agility/a/li lia href#combatCombat/a/li lia href#weaponsWeapons/a/li /ul /nav /header main section !-- Only change code below this line -- div !-- Stacked bar chart will go here -- br pBreakdown per week of time to spend training in stealth, combat, and weapons./p /div !-- Only change code above this line -- /section section idstealth h2Stealth amp; Agility Training/h2 articleh3Climb foliage quickly using a minimum spanning tree approach/h3/article articleh3No training is NP-complete without parkour/h3/article /section section idcombat h2Combat Training/h2 articleh3Dispatch multiple enemies with multithreaded tactics/h3/article articleh3Goodbye world: 5 proven ways to knock out an opponent/h3/article /section section idweapons h2Weapons Training/h2 articleh3Swords: the best tool to literally divide and conquer/h3/article articleh3Breadth-first or depth-first in multi-weapon training?/h3/article /section /main footercopy; 2018 Camper Cat/footer /body观察初始代码的整体结构可以发现它本身就是本 block 前几个挑战的成果header里已用h1nav地标对应 Make Screen Reader Navigation Easier with the nav Landmark 等挑战main内用section/article组织内容对应 Wrap Content in the article Element 挑战。此时唯一不合语义的就是图表容器一个裸div装着将来放图表的位置、一个br、以及一个p装的说明文字。参考答案与 diff 解析完整解答--solutions--段只改动编辑区域内的一对小标签其余保持不变body header h1Training/h1 nav ul lia href#stealthStealth amp; Agility/a/li lia href#combatCombat/a/li lia href#weaponsWeapons/a/li /ul /nav /header main section figure !-- Stacked bar chart will go here -- br figcaptionBreakdown per week of time to spend training in stealth, combat, and weapons./figcaption /figure /section section idstealth h2Stealth amp; Agility Training/h2 articleh3Climb foliage quickly using a minimum spanning tree approach/h3/article articleh3No training is NP-complete without parkour/h3/article /section section idcombat h2Combat Training/h2 articleh3Dispatch multiple enemies with multithreaded tactics/h3/article articleh3Goodbye world: 5 proven ways to knock out an opponent/h3/article /section section idweapons h2Weapons Training/h2 articleh3Swords: the best tool to literally divide and conquer/h3/article articleh3Breadth-first or depth-first in multi-weapon training?/h3/article /section /main footercopy; 2018 Camper Cat/footer /body与 seed 相比diff 只有两处- div figure !-- Stacked bar chart will go here -- br - pBreakdown per week of time to spend training in stealth, combat, and weapons./p figcaptionBreakdown per week of time to spend training in stealth, combat, and weapons./figcaption - /div /figure这一小段改动恰好满足了全部 6 条断言figure/figcaption各出现一次断言 1、2div/p被完全移除断言 3、4figcaption位于figure之内断言 5且/figure闭合标签显式写出断言 6。后续挑战的衔接figure 屏幕阅读器专用表格课程在本挑战描述中提到的另一道挑战即 block 内紧随其后的 Make Elements Only Visible to a Screen Reader by Using Custom CSS展示了figure方案的完整落地形态。其 seed/solution 中的图表区域长这样h2Master Camper Cats Beginner Three Week Training Program/h2 figure !-- Stacked bar chart of weekly training -- p[Stacked bar chart]/p br / figcaptionBreakdown per week of time to spend training in stealth, combat, and weapons./figcaption /figure table classsr-only captionHours of Weekly Training in Stealth, Combat, and Weapons/caption thead tr th/th th scopecolStealth amp; Agility/th th scopecolCombat/th th scopecolWeapons/th th scopecolTotal/th /tr /thead tbody tr th scoperowWeek One/th td3/tdtd5/tdtd2/tdtd10/td /tr tr th scoperowWeek Two/th td4/tdtd5/tdtd3/tdtd12/td /tr tr th scoperowWeek Three/th td4/tdtd6/tdtd3/tdtd13/td /tr /tbody /table可以看到本挑战建立好的figure/figcaption结构被原样保留图表的真实数据则以表格形式放在figure之后通过sr-only类用 CSS 移出可视区域.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; }两道挑战组合起来就构成了一条完整的图表可访问性路径figurefigcaption语义分组 给出趋势/结论级的文本描述本挑战离屏数据表格让屏幕阅读器用户能逐格读取图表背后的精确数据后续挑战。该后续挑战还特别警告了两个常见误区display: none;和visibility: hidden;会把内容对包括屏幕阅读器在内的所有用户隐藏把宽高设为 0如width: 0px; height: 0px;则会把元素从文档流中移除同样会被屏幕阅读器忽略——所以必须采用绝对定位到视口外 1px 尺寸 overflow: hidden的方案。小结与延伸阅读本挑战的核心要点可以归纳为三条图表、示意图等自包含视觉内容应包裹在figure中而不是放在无语义的div里图表的说明文字应使用figcaption且必须位于figure内部这样辅助技术既能感知分组又能读到文本替代对数据可视化caption 负责讲结论离屏表格负责给数据两者配合才是完整方案。仓库内可以继续深入的相关文件本挑战全文587d778a367417b2b2512aa5.md配套 sr-only 挑战587d778d367417b2b2512aaa.mdblock 结构与挑战顺序applied-accessibility.json挑战文件的 Joi 校验模式challenge-schema.js【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
