内容优化 / 方法解读

figure 标签内嵌套代码块时 figcaption 如何影响可访问性

figure 元素内的 figcaption 元素会自动成为父级 figure 的可访问名称,帮助屏幕阅读器识别代码块的整体含义。

展示HTML代码块及其标题说明的示意图
主题资料配图,非新闻现场照片 · 配图:图片或代码清单,以及它们的标题或说明_ figure> figcaption>

figcaption 元素作为可访问名称的机制

figure 元素本身没有默认的可访问名称,浏览器无法直接识别其语义。当 figure 内部包含 figcaption 元素时,该元素会被视为 figure 的标签名称。屏幕阅读器在朗读 figure 内容时,会优先读取 figcaption 中的文本。这意味着 figcaption 提供了 figure 的可访问名称,帮助用户理解图片或代码块的整体含义。

figcaption 元素作为可访问名称的规则是:figure 内的第一个 figcaption 元素会被呈现为 figure 的标题。如果 figure 内没有 figcaption,浏览器将无法提供可访问名称。这种机制确保了视觉上的标题与屏幕阅读器中的朗读内容保持一致。开发者应确保 figcaption 包含描述性文本,以提升内容的可访问性。

figcaption 元素在 figure 中的位置要求

figcaption 元素在 figure 内部的位置并不影响其作为可访问名称的规则。无论 figcaption 是 figure 的第一个子元素还是最后一个子元素,浏览器都会将其识别为 figure 的标题。这种灵活性允许开发者根据布局需求调整 figcaption 的位置,同时保持其可访问性功能不变。

figure 元素允许 figcaption 出现在内容之前或之后。无论哪种情况,浏览器都会将 figcaption 视为 figure 的可访问名称。这种设计使得开发者可以灵活组织 figure 的内容结构,同时确保屏幕阅读器能够正确识别和朗读 figure 的标题。开发者应避免在 figcaption 之外添加额外的标题元素,以免造成混淆。

验证 figcaption 作为可访问名称的方法

使用屏幕阅读器验证 figcaption 作为可访问名称的效果。打开网页,将焦点移动到包含 figure 元素的区域,然后使用屏幕阅读器的朗读功能。如果 figcaption 正确设置,屏幕阅读器会先朗读 figcaption 中的文本,然后再朗读 figure 的其他内容。如果 figcaption 缺失,屏幕阅读器将无法提供可访问名称。

使用浏览器开发者工具检查 figure 元素的 ARIA 标签。在开发者工具中,选中 figure 元素,查看其 ARIA 属性。如果 figcaption 存在,figure 元素可能会自动获得一个隐式的 ARIA 标签,其值与 figcaption 的内容一致。如果 figcaption 缺失,figure 元素将没有可访问名称。这种方法可以快速验证 figcaption 是否正确设置。

figcaption 元素的内容规范与注意事项

figcaption 元素的内容应简洁明了,准确描述 figure 的内容。figcaption 可以包含文本、链接或其他流内容,但应避免包含与 figure 内容无关的信息。例如,在引用诗歌的 figure 中,figcaption 可以包含作者和标题,而诗歌内容则放在 p 元素中。这种结构确保了 figcaption 的可访问名称与 figure 的内容相关。

figcaption 元素不能包含交互式元素,如按钮或链接。如果需要在 figcaption 中提供链接,应将链接放在 figure 的其他部分。figcaption 的内容应保持静态,避免动态内容干扰屏幕阅读器的朗读。开发者应确保 figcaption 的文本易于理解,以便所有用户都能正确识别 figure 的内容。

资料与延伸阅读

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

  1. <figure> HTML figure with optional caption element - HTML | MDN ↗
  2. 配图:图片或代码清单,以及它们的标题或说明_ figure> figcaption> ↗
← 更多内容优化文章返回顶部 ↑