用途:这是一条前端代码检查规则,针对带可见说明文字的图片。用 <p> 等普通标签做说明时,辅助技术无法把它识别为图片描述;而 <figure>/<figcaption> 能在图片与说明之间建立机器可读的关系,屏幕阅读器会将其与图片关联播报,搜索引擎也能据此理解说明,有利于图片 SEO。
主要能力与检查点:把图片与可见说明成对包裹在 <figure> 中,说明文字放在 <figcaption> 内,且 <figcaption> 必须是 <figure> 的第一个或最后一个子元素;不要把 alt 文本与 figcaption 内容重复,alt 是回退描述,figcaption 是可见描述;<figure> 适用于图片、代码块、图表等自包含内容,并非每张图片都需要。检查时会扫描代码库中“图片紧邻描述性可见文字”的模式,确认是否已正确包裹、说明是否在 figcaption 内、figcaption 是否为直接子元素、alt 是否与说明重复。
修复方式:将图片与说明文字包进 <figure>,把说明移入 <figcaption> 并置于 figure 内;再审视 alt,若 figcaption 已完整描述图片且对屏幕阅读器也足够,可缩短或留空(alt=""),否则保留简洁 alt;最后把 figcaption 放在 figure 的第一个或最后一个子元素位置。
适用场景与限制:适用于图片加标题的语义化与无障碍审查,也可覆盖图表、代码示例等自包含内容;规则明确不建议对每张图片机械套用。资料未提供具体框架实现细节与完整代码示例,可通过规则页获取。