header 元素嵌套在 main 内部时如何影响可访问性
当 header 元素嵌套在 main 内部时，它将失去横幅地标角色，仅作为通用角色，且不能使用 aria-label 或 aria-labelledby 属性。
main 元素作为容器时 header 的角色变化
当 header 元素位于 main 元素内部时，它不再被视为全局横幅地标，而是转变为通用角色。这意味着它仅代表周围部分的介绍性或导航辅助内容的组，不再提供全局导航信息。这种变化确保了屏幕阅读器用户不会将其错误识别为整个网站的入口点，而是将其视为特定内容区域的辅助信息。
根据规范，这种嵌套结构下的 header 元素通常包含该部分或文章的标题，如 h1 到 h6 元素，以及可选的副标题。它不再被标记为横幅地标，因此不能使用 aria-label 或 aria-labelledby 属性进行标记。这种限制确保了可访问性工具不会错误地将其识别为全局导航区域，从而保持页面结构的清晰性。
验证嵌套 header 元素的角色与属性限制
要验证嵌套在 main 内部的 header 元素的可访问性，可以使用浏览器的开发者工具检查其隐式 ARIA 角色。在 main 元素内部，header 元素应显示为通用角色，而不是横幅角色。同时，检查是否可以成功添加 aria-label 或 aria-labelledby 属性，确认它们是否被忽略。
如果尝试为嵌套的 header 添加 aria-label 或 aria-labelledby 属性，浏览器或屏幕阅读器可能会忽略这些标记，导致可访问性标记失效。这是因为此时它已经具有通用角色，这些属性仅适用于具有横幅角色的元素。验证时应确保页面结构符合规范，避免因属性冲突导致可访问性标记失效。
区分全局 header 与局部 header 的实践建议
在构建页面结构时，应明确区分全局 header 和局部 header。全局 header 位于 body 中，提供网站级别的导航；局部 header 位于 main、article 或 section 中，提供特定内容的介绍。这种区分有助于保持页面结构的清晰性和可访问性，确保屏幕阅读器用户能够准确识别页面不同区域的功能。
如果需要为嵌套的 header 提供额外的可访问性标记，应考虑使用其他元素或属性，如 aria-describedby 或 aria-details，而不是 aria-label。这确保了可访问性标记不会与隐式角色冲突，从而保持页面的正确渲染和可访问性。正确的结构设计能够提升用户体验，避免因角色混淆导致的导航问题。
历史用法与规范对 header 元素的影响
header 元素最初存在于 HTML 的早期版本中，用于表示标题。随着 h1 到 h6 标题元素的引入，header 元素获得了新的角色，即作为介绍性或导航辅助内容的容器。这种演变使得 header 元素能够灵活地适应不同的页面结构，同时保持其作为内容分组元素的功能。
规范明确指出，header 元素不能是 address、footer 或另一个 header 元素的子元素。这种限制确保了页面结构的逻辑性和可访问性，防止嵌套过深导致用户迷失。了解这些历史用法和规范限制，有助于开发者正确使用 header 元素，避免常见的结构错误。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。