内容优化 / 方法解读

网页中 figure 元素内嵌套 figcaption 时如何提供可访问名称

figcaption 元素作为 figure 的子元素时,能够为父元素提供可访问名称,帮助屏幕阅读器正确识别图片内容。

figcaption 元素作为 figure 的可访问名称来源

figure 元素通常用于包裹图片或图表等独立内容,而 figcaption 元素则用于描述这些内容。根据规范,figcaption 元素必须作为 figure 的第一个或最后一个子元素。当 figcaption 存在时,它不仅提供视觉上的说明文字,还能为 figure 元素提供可访问名称。这意味着屏幕阅读器在朗读图片时,会优先读取 figcaption 中的内容作为图片的描述,而不是仅依赖 img 标签的 alt 属性。这种机制确保了视觉障碍用户能够获取图片的语义信息。

figcaption 元素本身只包含全局属性,不包含特定的属性集。它代表一个说明或图例,描述其父 figure 元素其余内容的含义。这种结构化的方式使得内容不仅对人类读者友好,也对辅助技术友好。通过将说明文字放在独立的 figcaption 标签中,开发者可以更清晰地组织内容,并确保辅助技术能够准确解析图片的上下文信息。

figcaption 元素在 figure 中的位置要求

figcaption 元素必须作为 figure 元素的第一个或最后一个子元素。这意味着在 figure 内部,figcaption 不能被其他元素(如 img、div 或其他文本节点)分隔。如果 figcaption 被放置在中间位置,它将无法正确提供可访问名称,因为规范要求它必须是 figure 内容流的起始或结束部分。这种严格的父子关系确保了可访问名称的连贯性和准确性。

figure 元素本身不包含特定的内容类别,但允许包含流内容。这意味着 figure 可以包含多种类型的子元素,如 img、video、audio 或其他结构化内容。然而,figcaption 的位置限制确保了它始终与父元素的内容紧密关联。这种设计使得开发者可以灵活地使用 figure 来包裹各种媒体内容,同时通过 figcaption 提供统一的说明文字。

figcaption 元素与 img 标签的配合使用

最常见的用法是将 figcaption 与 img 标签结合使用,以提供图片的可访问名称。例如,figure 元素包含一个 img 标签和一个 figcaption 标签,其中 img 标签提供图片本身,figcaption 标签提供图片的说明文字。在这种情况下,屏幕阅读器会优先读取 figcaption 中的内容作为图片的描述,而不是仅依赖 img 标签的 alt 属性。这种配合使用确保了图片的可访问性,同时保持了内容的语义清晰。

figcaption 元素还可以与视频、音频或其他媒体元素结合使用。例如,figure 元素可以包含一个 video 标签和一个 figcaption 标签,figcaption 提供视频的标题或说明。这种结构化的方式使得媒体内容不仅对人类读者友好,也对辅助技术友好。通过将说明文字放在独立的 figcaption 标签中,开发者可以更清晰地组织媒体内容,并确保辅助技术能够准确解析媒体内容的上下文信息。

检查 figcaption 元素是否正确提供可访问名称的方法

要验证 figcaption 元素是否正确提供可访问名称,可以使用浏览器的开发者工具或屏幕阅读器进行测试。首先,打开网页并使用开发者工具检查 figure 元素的 DOM 结构,确保 figcaption 是 figure 的第一个或最后一个子元素。然后,使用屏幕阅读器朗读页面内容,检查屏幕阅读器是否优先读取 figcaption 中的内容作为图片或媒体的描述。如果屏幕阅读器正确读取了 figcaption 中的内容,则说明 figcaption 元素正确提供了可访问名称。

如果屏幕阅读器没有正确读取 figcaption 中的内容,可能是因为 figcaption 的位置不符合规范(例如,被其他元素分隔)或浏览器不支持该特性。此时,可以尝试调整 figcaption 的位置,确保它是 figure 的第一个或最后一个子元素。此外,还可以检查浏览器兼容性,因为 figcaption 元素自 2015 年 7 月起在大多数浏览器中可用。如果问题仍然存在,可能需要考虑使用其他可访问性技术,如 ARIA 标签,来补充说明文字。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. <figcaption> HTML figure caption element - HTML | MDN ↗
← 更多内容优化文章返回顶部 ↑