header 元素作为通用容器时如何通过 aria-labelledby 标记
当 header 元素嵌套在 main 等分节内容中失去地标角色时，开发者无法使用 aria-label 属性进行标记。
header 元素在分节内容中的角色变化
当 header 元素被嵌套在 main、section、article 等分节内容中时，其隐含的 ARIA 地标角色会失效，转变为通用角色。根据规范，此时 header 元素不再被视为地标，而是作为介绍性内容的通用容器存在。这意味着屏幕阅读器用户无法通过跳过地标功能快速定位到该区域，该元素仅作为普通的语义容器使用。
这种变化源于规范对 header 元素上下文的定义。当 header 位于 body、article、section、nav 或 aside 等分节内容中时，它代表周围区域的介绍性内容。若嵌套在 main 内部，由于 main 本身通常被视为一个大的分节容器，header 的地标属性会被覆盖，仅保留其作为介绍性内容组的语义。
无法使用 aria-labelledby 标记的原因
由于 header 在 main 内部失去了地标角色，因此不能使用 aria-labelledby 属性对其进行标记。规范明确指出，当 header 处于上述特定上下文时，它不能被标记。这意味着开发者无法通过额外的 ARIA 属性来弥补地标角色的缺失，强制赋予其地标属性可能会违反无障碍标准。
这种限制是为了避免语义混淆。如果允许在 main 内部的 header 上添加 aria-labelledby，可能会导致屏幕阅读器错误地识别页面的结构，或者与页面其他部分的地标产生冲突。因此，浏览器和辅助技术会忽略在此上下文中对 header 元素添加地标标记的尝试。
如何验证 header 的角色状态
可以通过浏览器的开发者工具检查 header 元素的 computed style 或 ARIA 属性来验证其角色。在 Chrome 或 Firefox 的开发者工具中，选中 header 元素，查看其属性面板。如果 header 位于 main 内部，其隐含的 role 属性通常不会显示为 banner，而是显示为 generic 或 none。
另一种验证方法是使用屏幕阅读器的地标导航功能。在页面中包含 header 元素时，通常可以按快捷键跳过地标。如果 header 嵌套在 main 内部，按快捷键时可能不会朗读该 header 区域，或者将其视为普通内容而非地标区域，这直接反映了其角色已从地标变为通用容器。
正确的结构使用建议
如果希望 header 元素保持地标角色，应将其直接放置在 body 元素下，而不是嵌套在 main 内部。这种结构通常用于定义页面的全局页眉，包含网站 Logo、全局导航或搜索功能。当 header 位于 body 下时，它会被识别为 banner 地标，便于用户快速导航。
如果 header 是文章或特定区块的介绍性内容，则应将其嵌套在 article、section 或 aside 等元素内部。这种结构下，header 代表该区块的介绍性内容，虽然失去了全局地标角色，但能正确反映文档结构。避免在 main 内部使用 header 来模拟全局页眉，以免影响无障碍体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。