freeCodeCamp 响应式设计课程中的无障碍要点用 h1–h6 标题表达内容的层级关系【免费下载链接】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应用无障碍板块的官方挑战文档Use Headings to Show Hierarchical Relationships of Content完整讲解 HTML 标题元素的语义层级规则、屏幕阅读器对标题的使用方式以及“每页仅一个 h1”、禁止跳跃层级等核心约束并结合该挑战的原始 Markdown 源文件、板块结构与课程数据模式Schema剖析这道练习题的题干、种子代码、四条测试断言与参考解法的完整设计帮助读者掌握可直接复用的无障碍标题书写规范。挑战在课程中的位置与元数据这道挑战位于课程结构 applied-accessibility 板块配置 中challengeOrder数组的第三个位置前两道分别是Add a Text Alternative to Images与Know When Alt Text Should be Left Blank是该板块 21 道题的第三题。该板块的helpCategory为HTML-CSSblockLayout为legacy-challenge-list说明它在学员端以经典挑战列表形式呈现。再往上一层responsive-web-design 超级板块配置 显示applied-accessibility排在basic-html-and-html5、basic-css、applied-visual-design之后属于响应式网页设计认证Responsive Web Design Certification课程的一部分——即先打好 HTML/CSS 基础再学习视觉设计与无障碍这与本文主题的前置依赖关系一致你需要已经熟悉 HTML 标签的嵌套写法。挑战本体由 Markdown 文件 587d774d367417b2b2512a9e.md 定义其 YAML frontmatter 中的关键字段为字段值含义id587d774d367417b2b2512a9e挑战唯一标识与板块配置中的id对应titleUse Headings to Show Hierarchical Relationships of Content展示给学员的标题challengeType0挑战类型编号dashedNameuse-headings-to-show-hierarchical-relationships-of-content课程 URL 使用的 slugvideoUrlScrimba 视频地址配套讲解视频关于challengeType: 0仓库共享包 challenge-types.ts 第 1 行定义了const html 0即这类挑战属于纯 HTML 编辑题学员在代码编辑器中直接修改 HTML 标记而不是操作 JavaScript 或构建项目。核心概念标题是内容的骨架不是字号开关以下是该文档description部分阐述的全部核心知识点也是本挑战要求内化的规则h1到h6是提供结构与标注的主力标签workhorse tags。屏幕阅读器screen reader可以被设置为只朗读页面上的标题用户借此快速获得全页内容摘要。正因为如此标题标记必须具有**语义意义semantic meaning**并彼此构成关联关系而不能仅仅为了这个标签显示出来的字号好看来选择。语义意义的定义包裹某段内容所用的标签应当表明这段内容所承载的信息类型。大纲类比如果写一篇包含引言、正文和结论的文章你不会在大纲里把结论写成正文的子小节——它应该是自己独立的一节。同理网页中的标题必须按顺序出现体现内容的层级父级/子级关系。层级规则关键句同级或更高排级的标题开启一个新的隐含节section更低排级的标题开启上一标题的子节subsection。 因此一个h2之后直接跟着多个h4子节会让屏幕阅读器用户感到困惑。虽然有 6 个排级可选很容易因为浏览器里看着更顺眼就跳级使用但正确做法是用 CSS 调整标题的相对字号而不是破坏标记中的层级。每页有且只有一个h1。它是整页内容的主主题。它和其他标题还会被搜索引擎部分地用来理解页面主题。这条规则可以概括成一条可执行的检查标准相邻标题的排级差最多为 1向下跳级不可跳过中间级且整页h1恰好一个。题面修正 Camper Cat 忍者页面的标题层级文档instructions部分给出的任务场景是Camper Cat 想要在自己网站上做一个关于成为忍者的页面。请帮他修正标题使标记具有语义意义并正确展示各节之间的父子关系。把所有h5标签改成正确的标题排级以表明它们是h2标题的子节——用h3标签来实现。种子代码需要修改的起点来自文档seed部分初始 HTML 中h5直接挂在h2之下跳过了h3违反上述层级规则h1How to Become a Ninja/h1 main h2Learn the Art of Moving Stealthily/h2 h5How to Hide in Plain Sight/h5 h5How to Climb a Wall/h5 h2Learn the Art of Battle/h2 h5How to Strengthen your Body/h5 h5How to Fight like a Ninja/h5 h2Learn the Art of Living with Honor/h2 h5How to Breathe Properly/h5 h5How to Simplify your Life/h5 /main参考解法solutions 部分唯一的修改点把 6 个h5开闭标签全部替换为h3其余结构原封不动h1How to Become a Ninja/h1 main h2Learn the Art of Moving Stealthily/h2 h3How to Hide in Plain Sight/h3 h3How to Climb a Wall/h3 h2Learn the Art of Battle/h2 h3How to Strengthen your Body/h3 h3How to Fight like a Ninja/h3 h2Learn the Art of Living with Honor/h2 h3How to Breathe Properly/h3 h3How to Simplify your Life/h3 /main四条测试断言答案如何被自动验证文档hints部分完整收录了判定这道题是否通过的 4 条断言值得逐条读懂——它们本身就是对层级规则的可执行化代码中应有 6 个h3元素assert.lengthOf(document.querySelectorAll(h3), 6);代码中应有 6 个h3闭合标签assert.lengthOf((code.match(/\/h3/g) || []), 6);代码中不应再有任何h5元素assert.isEmpty(document.querySelectorAll(h5));代码中不应再有任何h5闭合标签assert.notMatch(code, /\/h5/);注意断言 2 和 4 是对源码文本的正则匹配统计/h3、排除/h5而断言 1 和 3 是对渲染后 DOM 的查询。两者并用是为了防止元素存在但标签写法不规范之类的边缘情况也侧面说明了这道题要求修改的是标记本身开标签和闭标签都要改而不是用 CSS 或 JS 做外观伪装。源码级佐证挑战文件是如何被解析和校验的从仓库结构看这道挑战并非孤立的一篇笔记而是被课程体系当作结构化数据处理Markdown 分区约定。挑战文件以# --description--、# --instructions--、# --hints--、# --seed--、## --seed-contents--、# --solutions--等标记分段seed段内嵌的就是学员编辑器的初始代码solutions段内嵌的是判定通过的参考答案可多组支持多解。解析器位于 challenge-parser 目录例如其中的 validate-sections 插件 负责校验各分区是否完整合法。解析结果必须通过 Joi Schema 校验。challenge-schema.js 定义了每条挑战必须满足的字段约束例如id: Joi.objectId().required()挑战 id 必须是合法 ObjectId正好对应文件名587d774d367417b2b2512a9e、title: Joi.string().required()、challengeType: Joi.number().min(0).max(33).required()、solutions: Joi.array().items(Joi.array().items(fileJoi).min(1))solutions 是若干组文件的数组每组至少一个文件即允许多种解法等。可以推断本挑战的solutions段解析后即为上文那段修正后的 HTML 代码文件对象。课程顺序由 JSON 结构文件维护。如前所述applied-accessibility.json 中按challengeOrder固定了本挑战的次序学员端课程导航与进度即以此为准而blockLayout: legacy-challenge-list决定了它在前端使用旧版挑战列表布局渲染。实战要点清单综合该挑战文档与课程源码可以提炼出编写无障碍标题时的检查清单整页只保留一个h1内容是页面主主题本例为 How to Become a Ninja按文档大纲选排级父节用h2其子节用h3孙节用h4逐级递进不得跳级h2之后不能直接出现h4同级或更高排级 开启新节文档中并列的 Learn the Art of Moving Stealthily / Battle / Living with Honor 三个h2就是三个平级章节需要视觉上的小字号时改 CSS不改标签字号是表现层职责标题排级是语义层职责二者解耦用屏幕阅读器只读标题模式自检读出的标题序列应当是一份完整、无跳级的内容大纲标题层级同时服务于搜索引擎理解页面主题因此这也是 SEO 与无障碍的共同基础。掌握以上内容后你可以对照仓库中 applied-accessibility 板块 的其余挑战如main元素、header/nav/footer地标、label、tabindex等继续深入它们与本标题主题共同构成 freeCodeCamp 无障碍章节的完整知识体系。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考