使用figure与figcaption构建图片与图注的语义关联——Front-End-Checklist 无障碍图片规则实战指南【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist在现代化前端开发中为图片提供可被机器解析的图注caption是无障碍Accessibility与图片 SEO 的基础能力之一。本文基于 Front-End-Checklist 仓库中的figure-figcaption技能文档与同名规则SKILL.md、references/rule.md、figure-figcaption.mdx系统讲解figure/figcaption的语义价值、alt 与 figcaption 的分工、正确放置规则、复杂图片处理、何时不应使用该结构以及如何结合 W3C HTML Validator、axe DevTools 与 VoiceOver 完成代码审查与验证。读完本文你将能独立完成一次针对图片图注结构的全面审查与修复并可在代码评审中给出精准、可验证的改进意见。规则概览这是什么、针对谁、需要多长时间在 Front-End-Checklist 仓库中该规则被定义为一条面向图片images类别、无障碍accessibility子类的审查规则元数据如下来自 SKILL.md 的 frontmatter优先级prioritymedium中等难度difficultybeginner入门级适合初级开发者快速上手预估耗时estimatedTime10 分钟一句话定义带可见图注的图片应包裹在figure中并使用figcaption子元素从而在图片与图注之间建立语义关联。在仓库的规则系统中它还通过relatedRules与其他图片类规则建立了联动见 figure-figcaption.mdxalt-textalt 与 figcaption 用途不同——alt 是回退文本figcaption 是可见描述picture-element、dimensions、error-images这些规则都与图片质量相关通常放在同一次审查中一起执行。该规则的 AI 上下文aiContext也提醒审查者在使用本规则审查时应将编码尺寸、渲染尺寸、加载策略以及首屏影响放在一起综合检查而不是孤立地只看标签结构。核心语义为什么p充当图注不够好figure元素用于包裹自包含内容self-contained content——一张图片、一段代码示例、一个图表或示意图它们被主内容引用但即便移动到别处也不会破坏文档的语义流。figcaption则为该 figure 提供可见的标题或图例legend。关键在于使用p标签做图注对辅助技术assistive technology来说是不可见的图片描述。视觉效果上图片下方的一段文字确实像图注但在无障碍 API 中这段p与它上方的img之间没有任何程序化关联。屏幕阅读器用户只会听到 alt 文本完全不知道页面上还存在一段可见图注。而figure/figcaption组合在图片与描述之间建立了机器可读的关系屏幕阅读器会将 figcaption 与图片一同播报为用户提供上下文。同时这种结构也向搜索引擎传递该图注在描述这张图片的信号对图片 SEO 有正向作用。!-- ❌ 错误图注视觉上相邻但语义上与图片毫无关联 -- img srcwaterfall.jpg altWaterfall in Costa Rica pNauyaca Waterfalls, Dominical, Costa Rica, 2023/p !-- ✅ 正确通过 figure/figcaption 建立语义关联 -- figure img srcwaterfall.jpg altNauyaca Waterfalls, a wide two-tier waterfall surrounded by rainforest figcaptionNauyaca Waterfalls, Dominical, Costa Rica — March 2023/figcaption /figure快速参考清单Quick Reference在进行任何代码改动前先记住这条规则的四个要点与 SKILL.md 的 Quick Reference 一致将图片 可见图注的组合包裹在figure中figcaption作为其直接子元素figcaption必须是figure的第一个或最后一个子元素不要在 figcaption 中重复 alt 文本——alt 是回退figcaption 是可见描述二者分工不同figure适合图片、代码块、示意图和图表——并非每张图片都需要。Check如何扫描代码库中的违规结构按 SKILL.md 与规则文档中的checkprompt 定义审查步骤如下扫描代码库找出图片下方紧邻可见描述文本的组合典型形态是img下面紧跟一个p或span描述它逐一验证四点这类图片-图注组合是否被figure包裹图注文本是否位于figcaption元素内figcaption是否为figure的直接子元素img上的 alt 文本与figcaption文本是否相同二者用途不同不应重复标记所有img后跟描述性文本、但未使用 figure/figcaption 结构的代码位置。Fix逐步修复到合规结构按 SKILL.md 的fixprompt对每一处图片 相邻图注执行将img与其图注文本一起包裹进figure元素把图注文本移入figure内部的figcaption元素重新审视img的 alt 属性——如果 figcaption 已为有视力的用户完整描述了图片且仅凭 figcaption 也足以让屏幕阅读器用户理解则 alt 可以更短甚至为空alt否则保留简洁的 alt将figcaption放在figure的第一个或最后一个子元素位置展示修复后的完整 HTML。alt 与 figcaption 的分工两者服务于不同目的这是本规则最容易出错的地方见 rule.mdaltfigcaption目的图片无法查看时的文本替代描述或标注图片的可见图注受众屏幕阅读器用户、禁用图片的浏览器所有用户内容传达图片的含义或功能上下文、出处或补充信息可见性不可见可见!-- ✅ alt 与 figcaption 承载不同信息 -- figure img srcchart.png altLine chart showing website traffic doubled between January and June 2024 figcaption Figure 1: Monthly unique visitors, January–June 2024. Source: Google Analytics. /figcaption /figurefigcaption 的放置规则figcaption必须是figure的第一个或最后一个子元素置于中间属于无效结构!-- ✅ figcaption 在图片之后最常见 -- figure img srcportrait.jpg altPortrait of Ada Lovelace figcaptionAda Lovelace, the worlds first computer programmer/figcaption /figure !-- ✅ figcaption 在图片之前例如用于编号图注 -- figure figcaptionFigure 2: System architecture overview/figcaption img srcarchitecture.png altDiagram showing three-tier architecture with database, API, and frontend layers /figure !-- ❌ 错误figcaption 成为中间子元素 -- figure img srcportrait.jpg altPortrait figcaptionCaption text/figcaption citeSource: Wikipedia/cite !-- cite 应放在 figcaption 内部而不是作为兄弟节点 -- /figure注意最后一个反例cite之类的附加信息应当内嵌在figcaption中而不是与它并排作为figure的子元素。复杂图片用 figcaption 承载长描述对于图表或示意图figcaption可以承载完整描述以补充较短的 alt 文本。此时可以通过aria-labelledby将图片与图注关联起来figure img srcorg-chart.png altCompany organisational chart aria-labelledbyorg-caption figcaption idorg-caption strongOrganisational structure as of Q1 2024:/strong The CEO oversees three departments. Engineering (12 staff) led by the CTO handles product development. Marketing (8 staff) led by the CMO handles growth. Operations (5 staff) led by the COO handles logistics. /figcaption /figure这与仓库中另一条规则 alt-text 的定位互补alt-text 规则要求复杂图片图表、信息图提供长描述而本规则的图注结构正是承载这种长描述的语义容器。这也是两条规则在relatedRules中互相引用、通常一起审查的原因。Explain向开发者解释语义价值审查与修复之外规则文档还要求审查者能够解释其语义背景见 SKILL.md 的explainpromptfigure代表自包含内容——图片、代码示例、图表它们被主内容引用但移动位置不会影响文档流figcaption为 figure 提供标题或图例屏幕阅读器会在播报 figure 时一并播报 figcaption让用户获得上下文缺少该标记时有视力用户能看到图注但屏幕阅读器用户只听到 alt 文本且没有任何迹象表明页面上存在可见图注——这就是用p做图注对无障碍不可见的直观后果。When NOT to Use并非每张图片都需要figure规则明确强调只有当图片带有可见图注时才使用figure。以下场景保持普通img即可见 rule.md!-- ✅ 无图注的 Hero 图——普通 img 是正确的 -- img srchero.jpg altTeam members collaborating in a modern office width1200 height600 !-- ✅ 装饰性图标——不需要 figure -- img srccheckmark.svg alt aria-hiddentrue从代码结构看figure在 HTML 语义中属于流内容容器适合承载文档主体中可独立引用的内容块把没有图注的装饰图、横幅图强行包进figure反而会增加无障碍树中的无意义分组得不偿失。Styling为 figure/figcaption 提供一致的样式不同浏览器的默认样式差异较大规则文档给出了一份可直接落地的基准样式见 rule.md/* 浏览器默认样式不一——先重置以保证一致性 */ figure { margin: 0; } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: 0.875rem; color: #666; margin-top: 0.5rem; font-style: italic; }要点说明重置figure的默认外边距可以避免布局意外偏移figure img使用display: block可消除行内元素常见的基线间隙height: auto保证图片按宽度等比缩放不拉伸。这些只是推荐起点实际项目中应按设计系统调整。Verification自动化与人工双重验证修复完成后需要通过工具与人工两条路径确认合规见 rule.md。自动化检查W3C HTML Validator能够捕获figcaption出现在figure之外、或作为非首/末子元素的结构错误axe DevTools会标记缺少文本替代的图片这可能间接提示 figcaption 结构缺失与本规则相关的图片 alt 问题axe 同样覆盖规则元数据中的tools字段也记录了这两个工具。人工检查在 macOS 上启用 VoiceOver按W键在图片之间跳转——结构正确的 figure 会将 figcaption 作为附加上下文一并播报如果只听到 alt 而没有任何图注播报说明图注仍未正确关联。Standards落地前的最后一道校验规则文档要求在判定规则满足前将最终实现与两份权威参考对照MDN: Responsive images——确认响应式图片的最终形态、交付方式与渲染行为web.dev: Image performance——确认图片性能表现达标。这与规则的aiContext提醒一致图片审查不应只停留在标签结构还应把编码尺寸、渲染尺寸、加载策略和首屏影响纳入同一轮检查。Code Review如何在评审中给出可验证的意见最后SKILL.md 的codeReviewprompt 定义了对 AI 与人类审查者同样适用的评审要求审查与图片图注语义化相关的图片资源、标记和交付配置精确定位违反规则的具体文件或组件——指出格式选择、尺寸或加载行为在何处违背了规则说明如何在 DevTools 中确认修复是否生效例如检查无障碍树中 figure 分组是否出现、figcaption 是否与 img 关联播报或使用 W3C Validator 对修复后的 HTML 片段做校验。将以上 Check、Fix、Explain、Verification 四个环节串起来就构成了一次完整的figure-figcaption规则闭环扫描定位 → 语义化改造 → 向团队解释原理 → 自动化加人工验证。在 Front-End-Checklist 仓库中这条规则的完整形态含 prompts、relatedRules、tools、resources、sources 等结构化元数据位于 packages/content/rules/en/images/figure-figcaption.mdxSkill 形态位于 skills/figure-figcaption/SKILL.md两者都值得作为团队内部规范与审查清单的落地模板直接使用。【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/19 6:10:47 · 阅读 1.2k 使用 `＜figure＞` 与 `＜figcaption＞` 构建图片与图注的语义关联——Front-End-Checklist 无障碍图片规则实战指南
使用figure与figcaption构建图片与图注的语义关联——Front-End-Checklist 无障碍图片规则实战指南【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist在现代化前端开发中为图片提供可被机器解析的图注caption是无障碍Accessibility与图片 SEO 的基础能力之一。本文基于 Front-End-Checklist 仓库中的figure-figcaption技能文档与同名规则SKILL.md、references/rule.md、figure-figcaption.mdx系统讲解figure/figcaption的语义价值、alt 与 figcaption 的分工、正确放置规则、复杂图片处理、何时不应使用该结构以及如何结合 W3C HTML Validator、axe DevTools 与 VoiceOver 完成代码审查与验证。读完本文你将能独立完成一次针对图片图注结构的全面审查与修复并可在代码评审中给出精准、可验证的改进意见。规则概览这是什么、针对谁、需要多长时间在 Front-End-Checklist 仓库中该规则被定义为一条面向图片images类别、无障碍accessibility子类的审查规则元数据如下来自 SKILL.md 的 frontmatter优先级prioritymedium中等难度difficultybeginner入门级适合初级开发者快速上手预估耗时estimatedTime10 分钟一句话定义带可见图注的图片应包裹在figure中并使用figcaption子元素从而在图片与图注之间建立语义关联。在仓库的规则系统中它还通过relatedRules与其他图片类规则建立了联动见 figure-figcaption.mdxalt-textalt 与 figcaption 用途不同——alt 是回退文本figcaption 是可见描述picture-element、dimensions、error-images这些规则都与图片质量相关通常放在同一次审查中一起执行。该规则的 AI 上下文aiContext也提醒审查者在使用本规则审查时应将编码尺寸、渲染尺寸、加载策略以及首屏影响放在一起综合检查而不是孤立地只看标签结构。核心语义为什么p充当图注不够好figure元素用于包裹自包含内容self-contained content——一张图片、一段代码示例、一个图表或示意图它们被主内容引用但即便移动到别处也不会破坏文档的语义流。figcaption则为该 figure 提供可见的标题或图例legend。关键在于使用p标签做图注对辅助技术assistive technology来说是不可见的图片描述。视觉效果上图片下方的一段文字确实像图注但在无障碍 API 中这段p与它上方的img之间没有任何程序化关联。屏幕阅读器用户只会听到 alt 文本完全不知道页面上还存在一段可见图注。而figure/figcaption组合在图片与描述之间建立了机器可读的关系屏幕阅读器会将 figcaption 与图片一同播报为用户提供上下文。同时这种结构也向搜索引擎传递该图注在描述这张图片的信号对图片 SEO 有正向作用。!-- ❌ 错误图注视觉上相邻但语义上与图片毫无关联 -- img srcwaterfall.jpg altWaterfall in Costa Rica pNauyaca Waterfalls, Dominical, Costa Rica, 2023/p !-- ✅ 正确通过 figure/figcaption 建立语义关联 -- figure img srcwaterfall.jpg altNauyaca Waterfalls, a wide two-tier waterfall surrounded by rainforest figcaptionNauyaca Waterfalls, Dominical, Costa Rica — March 2023/figcaption /figure快速参考清单Quick Reference在进行任何代码改动前先记住这条规则的四个要点与 SKILL.md 的 Quick Reference 一致将图片 可见图注的组合包裹在figure中figcaption作为其直接子元素figcaption必须是figure的第一个或最后一个子元素不要在 figcaption 中重复 alt 文本——alt 是回退figcaption 是可见描述二者分工不同figure适合图片、代码块、示意图和图表——并非每张图片都需要。Check如何扫描代码库中的违规结构按 SKILL.md 与规则文档中的checkprompt 定义审查步骤如下扫描代码库找出图片下方紧邻可见描述文本的组合典型形态是img下面紧跟一个p或span描述它逐一验证四点这类图片-图注组合是否被figure包裹图注文本是否位于figcaption元素内figcaption是否为figure的直接子元素img上的 alt 文本与figcaption文本是否相同二者用途不同不应重复标记所有img后跟描述性文本、但未使用 figure/figcaption 结构的代码位置。Fix逐步修复到合规结构按 SKILL.md 的fixprompt对每一处图片 相邻图注执行将img与其图注文本一起包裹进figure元素把图注文本移入figure内部的figcaption元素重新审视img的 alt 属性——如果 figcaption 已为有视力的用户完整描述了图片且仅凭 figcaption 也足以让屏幕阅读器用户理解则 alt 可以更短甚至为空alt否则保留简洁的 alt将figcaption放在figure的第一个或最后一个子元素位置展示修复后的完整 HTML。alt 与 figcaption 的分工两者服务于不同目的这是本规则最容易出错的地方见 rule.mdaltfigcaption目的图片无法查看时的文本替代描述或标注图片的可见图注受众屏幕阅读器用户、禁用图片的浏览器所有用户内容传达图片的含义或功能上下文、出处或补充信息可见性不可见可见!-- ✅ alt 与 figcaption 承载不同信息 -- figure img srcchart.png altLine chart showing website traffic doubled between January and June 2024 figcaption Figure 1: Monthly unique visitors, January–June 2024. Source: Google Analytics. /figcaption /figurefigcaption 的放置规则figcaption必须是figure的第一个或最后一个子元素置于中间属于无效结构!-- ✅ figcaption 在图片之后最常见 -- figure img srcportrait.jpg altPortrait of Ada Lovelace figcaptionAda Lovelace, the worlds first computer programmer/figcaption /figure !-- ✅ figcaption 在图片之前例如用于编号图注 -- figure figcaptionFigure 2: System architecture overview/figcaption img srcarchitecture.png altDiagram showing three-tier architecture with database, API, and frontend layers /figure !-- ❌ 错误figcaption 成为中间子元素 -- figure img srcportrait.jpg altPortrait figcaptionCaption text/figcaption citeSource: Wikipedia/cite !-- cite 应放在 figcaption 内部而不是作为兄弟节点 -- /figure注意最后一个反例cite之类的附加信息应当内嵌在figcaption中而不是与它并排作为figure的子元素。复杂图片用 figcaption 承载长描述对于图表或示意图figcaption可以承载完整描述以补充较短的 alt 文本。此时可以通过aria-labelledby将图片与图注关联起来figure img srcorg-chart.png altCompany organisational chart aria-labelledbyorg-caption figcaption idorg-caption strongOrganisational structure as of Q1 2024:/strong The CEO oversees three departments. Engineering (12 staff) led by the CTO handles product development. Marketing (8 staff) led by the CMO handles growth. Operations (5 staff) led by the COO handles logistics. /figcaption /figure这与仓库中另一条规则 alt-text 的定位互补alt-text 规则要求复杂图片图表、信息图提供长描述而本规则的图注结构正是承载这种长描述的语义容器。这也是两条规则在relatedRules中互相引用、通常一起审查的原因。Explain向开发者解释语义价值审查与修复之外规则文档还要求审查者能够解释其语义背景见 SKILL.md 的explainpromptfigure代表自包含内容——图片、代码示例、图表它们被主内容引用但移动位置不会影响文档流figcaption为 figure 提供标题或图例屏幕阅读器会在播报 figure 时一并播报 figcaption让用户获得上下文缺少该标记时有视力用户能看到图注但屏幕阅读器用户只听到 alt 文本且没有任何迹象表明页面上存在可见图注——这就是用p做图注对无障碍不可见的直观后果。When NOT to Use并非每张图片都需要figure规则明确强调只有当图片带有可见图注时才使用figure。以下场景保持普通img即可见 rule.md!-- ✅ 无图注的 Hero 图——普通 img 是正确的 -- img srchero.jpg altTeam members collaborating in a modern office width1200 height600 !-- ✅ 装饰性图标——不需要 figure -- img srccheckmark.svg alt aria-hiddentrue从代码结构看figure在 HTML 语义中属于流内容容器适合承载文档主体中可独立引用的内容块把没有图注的装饰图、横幅图强行包进figure反而会增加无障碍树中的无意义分组得不偿失。Styling为 figure/figcaption 提供一致的样式不同浏览器的默认样式差异较大规则文档给出了一份可直接落地的基准样式见 rule.md/* 浏览器默认样式不一——先重置以保证一致性 */ figure { margin: 0; } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: 0.875rem; color: #666; margin-top: 0.5rem; font-style: italic; }要点说明重置figure的默认外边距可以避免布局意外偏移figure img使用display: block可消除行内元素常见的基线间隙height: auto保证图片按宽度等比缩放不拉伸。这些只是推荐起点实际项目中应按设计系统调整。Verification自动化与人工双重验证修复完成后需要通过工具与人工两条路径确认合规见 rule.md。自动化检查W3C HTML Validator能够捕获figcaption出现在figure之外、或作为非首/末子元素的结构错误axe DevTools会标记缺少文本替代的图片这可能间接提示 figcaption 结构缺失与本规则相关的图片 alt 问题axe 同样覆盖规则元数据中的tools字段也记录了这两个工具。人工检查在 macOS 上启用 VoiceOver按W键在图片之间跳转——结构正确的 figure 会将 figcaption 作为附加上下文一并播报如果只听到 alt 而没有任何图注播报说明图注仍未正确关联。Standards落地前的最后一道校验规则文档要求在判定规则满足前将最终实现与两份权威参考对照MDN: Responsive images——确认响应式图片的最终形态、交付方式与渲染行为web.dev: Image performance——确认图片性能表现达标。这与规则的aiContext提醒一致图片审查不应只停留在标签结构还应把编码尺寸、渲染尺寸、加载策略和首屏影响纳入同一轮检查。Code Review如何在评审中给出可验证的意见最后SKILL.md 的codeReviewprompt 定义了对 AI 与人类审查者同样适用的评审要求审查与图片图注语义化相关的图片资源、标记和交付配置精确定位违反规则的具体文件或组件——指出格式选择、尺寸或加载行为在何处违背了规则说明如何在 DevTools 中确认修复是否生效例如检查无障碍树中 figure 分组是否出现、figcaption 是否与 img 关联播报或使用 W3C Validator 对修复后的 HTML 片段做校验。将以上 Check、Fix、Explain、Verification 四个环节串起来就构成了一次完整的figure-figcaption规则闭环扫描定位 → 语义化改造 → 向团队解释原理 → 自动化加人工验证。在 Front-End-Checklist 仓库中这条规则的完整形态含 prompts、relatedRules、tools、resources、sources 等结构化元数据位于 packages/content/rules/en/images/figure-figcaption.mdxSkill 形态位于 skills/figure-figcaption/SKILL.md两者都值得作为团队内部规范与审查清单的落地模板直接使用。【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考