header 元素嵌套在 main 内部时 aria-label 属性为何失效
header 元素在 main 内部嵌套时会失去地标角色，此时无法通过 aria-label 属性进行标记。
嵌套后的角色变化机制
header 元素在 body 等非分区内容上下文中会获得 banner 地标角色，代表全局站点头部。当 header 被嵌套在 main、section、article 等分区内容元素内部时，其隐含的 ARIA 角色会从 banner 变为 generic。这意味着它不再被视为全局导航或介绍性区域，而是周围分区的辅助性容器。这种变化是浏览器和辅助技术根据元素嵌套关系自动推断的结果，不需要额外代码干预。
这种角色转换确保了文档结构的语义一致性。例如，文章内部的 header 通常包含文章标题和发布信息，此时它作为文章的介绍性辅助，而非整个网站的导航入口。如果此时仍将其视为全局 banner，可能会干扰屏幕阅读器对文档结构的理解，导致用户无法快速定位当前阅读内容的上下文。因此，浏览器强制将嵌套后的 header 角色降级为通用容器，以符合 HTML 规范对分区内容的语义要求。
aria-label 属性的失效限制
当 header 元素失去 banner 地标角色后，它无法再通过 aria-label 或 aria-labelledby 属性进行标记。这是因为辅助技术在处理通用容器时，通常忽略这些标签，或者将其视为对容器内容的重复描述。如果尝试在嵌套的 header 上添加 aria-label，浏览器不会报错，但屏幕阅读器可能不会将其作为新的地标角色朗读，导致标记失效。
开发者应利用 header 内部包含的标题元素（如 h1-h6）来提供上下文信息。例如，在文章 header 中放置 h2 标题，屏幕阅读器会自动将其识别为文章标题。这种基于内容的标记方式比使用 aria-label 更可靠，因为它直接利用了 HTML 的语义结构。因此，在嵌套场景下，应专注于优化内部内容的可访问性，而非依赖属性标签来改变其角色。
嵌套结构的可访问性验证步骤
使用浏览器开发者工具的 Accessibility 面板检查 header 元素。在 Elements 面板中选中嵌套在 main 内部的 header，查看其 Computed ARIA Roles 属性。如果显示为 'generic'，则说明角色转换生效。同时，检查是否显示 aria-label 属性，如果存在但未生效，则验证其是否符合通用容器的限制规则。
使用屏幕阅读器进行实际朗读测试。在页面加载后，使用快捷键导航到该 header 区域，观察屏幕阅读器是否将其朗读为 'banner' 或 'generic'。如果朗读为 'generic'，则确认角色转换符合预期。随后，尝试朗读 header 内部的标题元素，验证其是否正确识别为文章或章节的标题，从而确认辅助技术对嵌套结构的正确解析。
避免嵌套冲突的规范建议
根据规范，header 元素不能是 address、footer 或另一个 header 元素的子元素。这意味着在构建页面结构时，应避免多层嵌套 header，以免造成语义混乱。例如，一个页面通常只有一个全局 header，而每个 section 或 article 可以有自己的 header。这种层级结构有助于辅助技术区分全局导航和局部内容。
如果需要在 header 内部放置多个标题，应确保它们属于同一层级或逻辑分组。例如，使用 hgroup 元素包裹多个标题，或者仅使用一个主标题。避免在 header 内部放置与外部 section 同级的标题，因为这可能导致文档大纲的层级关系不清晰。通过遵循这些规范，可以确保 header 元素在不同嵌套场景下都能提供清晰、一致的可访问性支持。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。