内容优化 / 方法解读

网页中 figure 标签内 figcaption 元素作为可访问名称的规则

figcaption 元素必须作为 figure 标签的第一个或最后一个子元素,才能为图片提供可访问名称。

HTML5中figure和figcaption标签的用法示意图
主题资料配图,非新闻现场照片 · 配图:html5中figure和figcaption标签用法

figcaption 元素在 figure 标签中的位置要求

figcaption 元素必须作为 figure 标签的第一个或最后一个子元素,才能为 figure 提供可访问名称。如果 figcaption 元素位于 figure 标签内部的其他位置,它将无法起到为父元素提供可访问名称的作用。MDN 文档明确指出,figcaption 元素的父元素必须是 figure 元素,且该元素必须是 figure 的第一个或最后一个子元素。

在 HTML 结构中,figure 元素通常用于包含图片、图表或其他媒体内容。figcaption 元素则用于描述这些内容。为了确保屏幕阅读器能够正确识别并朗读图片的说明文字,必须严格遵守 figcaption 元素的位置限制。如果位置不符合要求,屏幕阅读器可能无法将描述文字与图片关联起来,导致可访问性降低。

figcaption 元素缺失或位置错误的影响

如果 figure 标签内没有包含 figcaption 元素,或者 figcaption 元素的位置不符合要求,figure 元素将无法获得可访问名称。这意味着屏幕阅读器在朗读页面时,可能只会朗读图片的 alt 文本,而不会朗读描述图片内容的文字,或者完全忽略该图片的可访问性信息。这会导致依赖屏幕阅读器的用户无法理解图片的具体含义。

此外,figcaption 元素必须包含 Flow content,即流内容。这意味着它不能包含块级元素以外的其他内容,如脚本或样式表。如果 figcaption 元素内包含了不符合要求的内容,浏览器可能会忽略该元素,或者导致渲染异常。因此,在编写 HTML 代码时,必须确保 figcaption 元素内只包含描述性文字,且位置正确。

如何验证 figcaption 元素是否正确提供可访问名称

要验证 figcaption 元素是否正确提供可访问名称,可以使用浏览器的开发者工具检查 DOM 结构。打开开发者工具后,选中 figure 元素,查看其子元素列表。确认 figcaption 元素是否位于列表的顶部或底部。如果 figcaption 元素位于中间位置,说明位置不符合要求,需要将其移动到第一个或最后一个位置。

另一种验证方法是使用屏幕阅读器进行测试。在页面加载后,使用屏幕阅读器朗读页面内容,找到包含图片的 figure 元素。如果屏幕阅读器正确朗读了 figcaption 中的文字,说明 figcaption 元素正确提供了可访问名称。如果屏幕阅读器没有朗读描述文字,或者朗读顺序不正确,说明 figcaption 元素的位置或内容存在问题,需要进一步检查和调整。

figcaption 元素的其他限制与注意事项

figcaption 元素只能包含全局属性,不能包含特定的 HTML 属性。这意味着它不能像其他元素那样设置特定的样式或行为。此外,figcaption 元素不能包含块级元素以外的其他内容,如脚本或样式表。如果 figcaption 元素内包含了不符合要求的内容,浏览器可能会忽略该元素,或者导致渲染异常。

figcaption 元素必须包含开始和结束标签,不能省略。如果省略了标签,浏览器可能会将 figcaption 元素的内容视为 figure 元素的直接内容,而不是描述性文字。这会导致可访问性降低。因此,在编写 HTML 代码时,必须确保 figcaption 元素包含完整的开始和结束标签,且位置正确。

资料与延伸阅读

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

  1. <figcaption> HTML figure caption element - HTML | MDN ↗
  2. 配图:html5中figure和figcaption标签用法 ↗
← 更多内容优化文章返回顶部 ↑