网页中 header 元素嵌套在 article 内部时如何影响可访问性
header 元素嵌套在 article 内部时会失去全局地标角色，仅作为所在区块的辅助导航元素。
header 元素嵌套在 article 内部的角色变化
header 元素在网页结构中的角色取决于其嵌套位置。当 header 元素直接位于 body 等顶层容器中时，它具有全局地标角色，通常包含网站 Logo、公司名称和全局导航。然而，当 header 元素被嵌套在 article、main、section 或 nav 等分节内容元素内部时，它会失去全局地标角色，转而成为通用角色。这意味着它不再代表整个页面的顶部区域，而是仅代表该特定区块的介绍性内容或导航辅助。
这种角色变化意味着 header 元素在嵌套后仅作为所在区块的辅助元素存在。它通常包含该区块的标题（如 h1 到 h6）和可选的副标题，但不再承担全局导航的功能。这种结构上的调整有助于区分页面不同部分的内容，使屏幕阅读器用户能更准确地定位信息，避免将局部导航误认为是全局导航。
嵌套后 header 元素的可访问性限制
当 header 元素嵌套在 article 等分节元素内部时，它无法再使用 aria-label 或 aria-labelledby 属性进行额外标注。这是因为其角色已经从地标角色变为通用角色，这些属性通常用于地标元素的标识。因此，开发者不能通过这种方式为嵌套的 header 元素添加额外的可访问性标签，必须依赖其自然的内容结构来传达信息。
这种限制要求开发者必须确保嵌套的 header 元素内部的内容清晰明确。由于无法通过 aria 属性进行补充说明，header 内部的标题和导航元素必须能够独立传达其功能。例如，如果 header 内包含搜索表单，表单本身必须具备良好的可访问性，因为无法通过外部标签来辅助说明其用途。
检查 header 元素嵌套位置的方法
要检查网页中的 header 元素是否正确嵌套，可以使用浏览器的开发者工具或无障碍检查工具。首先，选中 header 元素，查看其计算后的样式或属性面板，确认其隐式 ARIA 角色是否为 generic。如果角色显示为 banner，则说明 header 元素位于顶层容器中；如果显示为 generic，则说明它嵌套在 article、section 等元素内部。
另一种方法是检查 header 元素的父元素。如果 header 元素的父元素是 body、main 或 nav，则它具有全局地标角色；如果父元素是 article 或 section，则它仅作为局部辅助元素。通过这种方式，可以快速判断 header 元素的角色是否符合预期，从而确保网页的可访问性结构正确。
验证 header 元素可访问性结构的方法
验证 header 元素的可访问性结构可以通过模拟屏幕阅读器的行为来实现。使用浏览器的无障碍功能或专门的屏幕阅读器工具，浏览网页时注意 header 元素的朗读顺序。如果 header 元素嵌套在 article 内部，屏幕阅读器应将其视为该区块的辅助内容，而不是全局导航区域。
还可以通过检查 HTML 语义化标签的嵌套规则来验证。根据规范，header 元素不能作为 address、footer 或另一个 header 元素的子元素。如果发现 header 元素嵌套在上述元素内部，说明结构可能存在问题，需要重新调整。通过这种检查，可以确保 header 元素的可访问性结构符合 HTML 规范和最佳实践。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。