网页中 figure 标签内嵌套 img 元素时 figcaption 如何提供可访问名称
figcaption 元素作为 figure 的第一个或最后一个子元素时，能为父元素提供可访问名称，帮助屏幕阅读器识别图片上下文。
figcaption 元素在 figure 中的位置要求
figure 元素内嵌套图片时，figcaption 元素必须作为 figure 的第一个或最后一个子元素。MDN 规定 figcaption 元素必须是其父 figure 元素的第一或最后一个子元素，这意味着图片不能位于 figcaption 之前或之后。如果图片在 figcaption 之前，浏览器会将其视为 figure 的第一个子元素，从而破坏了 figcaption 作为标题或说明的功能。同样，如果图片在 figcaption 之后，figcaption 就不再是最后一个子元素，导致其无法正确提供可访问名称。因此，图片必须被包裹在 figcaption 元素之外，且 figcaption 必须位于图片之前或之后。
这种位置要求确保了 figcaption 能够正确地描述其父 figure 元素中的内容。当 figcaption 位于图片之前时，它充当了图片的标题；当位于图片之后时，它充当了图片的说明。无论哪种情况，figcaption 都能提供清晰的结构，使得屏幕阅读器能够正确地朗读图片及其上下文。如果违反这一规则，figcaption 将无法提供预期的可访问性支持，导致屏幕阅读器无法识别图片与说明之间的关系。
figcaption 提供可访问名称的机制
figcaption 元素的主要作用之一是为父 figure 元素提供可访问名称。根据 MDN 的描述，figcaption 元素代表一个标题或图例，用于描述其父 figure 元素中其余内容的描述，从而为 figure 提供一个可访问名称。这意味着当屏幕阅读器遇到一个 figure 元素时，它会优先读取其中的 figcaption 内容，并将其作为 figure 的名称。这对于嵌套了图片的 figure 元素尤为重要，因为图片本身通常没有文本内容，无法提供上下文信息。通过 figcaption，屏幕阅读器可以知道图片是关于什么的，从而向用户传达更完整的信息。
这种机制确保了图片的可访问性。例如，如果一个 figure 元素包含一张图片，但没有 figcaption，屏幕阅读器可能只会朗读图片的 alt 文本，而不会告诉用户这张图片的作用。然而，如果添加了 figcaption，屏幕阅读器会先朗读 figcaption 中的内容，然后朗读图片，从而让用户理解图片的功能。这种结构化的方式使得图片更容易被理解，特别是对于依赖屏幕阅读器的用户来说，figcaption 提供了关键的上下文信息。
图片嵌套在 figure 中的结构示例
在 HTML 中，图片通常使用 img 元素来表示。当这些元素被嵌套在 figure 元素中时，必须确保 figcaption 位于图片之前或之后。例如，以下是一个正确的结构示例，figcaption 位于图片之前：figure>figcaption>图片。这种结构确保了 figcaption 能够正确地描述图片。相反，如果结构变为 figure>图片>figcaption，figcaption 将不再是最后一个子元素，从而无法提供可访问名称。因此，开发者必须仔细检查代码结构，确保 figcaption 的位置符合规范。
正确的结构不仅有助于可访问性，还能提高代码的可读性和维护性。通过将图片与说明文字（figcaption）一起包裹在 figure 元素中，开发者可以清晰地表达图片及其上下文之间的关系。这种结构化的方式使得代码更易于理解和维护，同时也符合 HTML 的语义化标准。开发者应始终遵循这一规则，以确保图片的可访问性和语义化。
验证 figcaption 可访问性效果的方法
要验证 figcaption 是否正确提供了可访问名称，可以使用屏幕阅读器进行测试。打开包含 figure 元素和 figcaption 的网页，使用屏幕阅读器导航到该元素。如果 figcaption 位于图片之前，屏幕阅读器会先朗读 figcaption 中的内容，然后朗读图片。如果 figcaption 位于图片之后，屏幕阅读器会先朗读图片，然后朗读 figcaption。无论哪种情况，figcaption 都应该被正确识别为 figure 的可访问名称。如果屏幕阅读器没有朗读 figcaption，或者没有将其作为 figure 的名称，那么说明 figcaption 的位置可能不符合规范。
此外，开发者还可以使用浏览器的开发者工具检查 DOM 结构，确保 figcaption 是 figure 的第一个或最后一个子元素。如果 DOM 结构正确，但屏幕阅读器仍然没有正确识别 figcaption，那么可能是浏览器或屏幕阅读器的兼容性问题。根据 MDN 的信息，figcaption 元素在 2015 年 7 月起在浏览器中广泛可用，因此兼容性问题应该较少。如果遇到问题，可以查阅浏览器的兼容性列表，确保所使用的浏览器和屏幕阅读器支持 figcaption 元素。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。