header 元素嵌套在 article 内部时如何影响可访问性
header 元素嵌套在 article 内部时，其隐式 ARIA 角色会从全局标识符变为通用组，不再作为屏幕阅读器的地标区域。
header 元素在 body 中的默认角色与作用
当 header 元素位于 body 根元素下时，它具有全局标识符作用。根据资料说明，此时该元素定义了全局站点页眉，通常包含网站标志、公司名称、搜索功能和可能的全球导航或口号。它一般位于页面顶部，作为整个页面的入口导航区域。这种结构下，屏幕阅读器会将 header 识别为地标区域，帮助用户快速定位页面主要导航信息。
如果 header 元素未被 sectioning content（如 main 或 section）包裹，它就保持这种全局标识符的角色。这意味着它不仅仅是一组介绍性内容，而是整个页面的重要结构组成部分。在可访问性方面，它为用户提供了一个明确的起点，便于理解页面的整体布局和主要功能入口。这种设计符合用户对网页顶部导航的普遍认知习惯。
header 元素嵌套在 article 内部时的角色变化
当 header 元素被嵌套在 article、main、section、nav 或 aside 等元素内部时，其隐式 ARIA 角色会发生改变。资料指出，在这种情况下，header 元素失去了地标状态，转而代表周围区域的介绍性或导航辅助内容的组。它不再作为全局站点页眉，而是变成了特定文章或区块的头部信息。这种变化意味着它不再被屏幕阅读器视为独立的区域地标。
这种角色变化对可访问性有直接影响。由于 header 元素不再具有地标角色，它不能使用 aria-label 或 aria-labelledby 属性进行额外标记。资料明确说明，在这种情况下，它无法被标记为地标。因此，屏幕阅读器在朗读时，会将 header 内的内容视为文章或区块内部的一部分，而不是一个独立的导航区域。这要求开发者依赖 header 内部的标题元素来提供结构信息。
嵌套结构中 header 内部内容的可访问性处理
在 header 元素嵌套在 article 内部时，虽然其角色变为通用组，但内部仍可包含标题元素。资料提到，它通常包含周围区域的标题（h1-h6 元素）和可选的副标题，但这并非强制要求。在可访问性处理上，这些标题元素仍然是重要的结构标记。屏幕阅读器会通过这些标题来帮助用户理解当前文章或区块的主题，从而弥补 header 失去地标角色带来的信息缺失。
此外，资料指出 header 元素可以包含作者姓名、发布日期等其他元素。在嵌套结构中，这些内容同样作为文章或区块的辅助信息存在。由于 header 不再是地标，用户无法通过跳转到 header 来快速定位这些信息。因此，确保 header 内部有清晰的标题结构，对于保持内容的可访问性至关重要。开发者应利用 h1-h6 元素来构建清晰的层级关系。
验证 header 元素角色变化的方法
要验证 header 元素在不同嵌套结构下的角色变化，可以使用浏览器的开发者工具检查其隐式 ARIA 角色。在 body 根元素下，header 元素应显示为 banner 角色。当 header 被嵌套在 article 内部时，其角色应显示为 generic。这种检查可以通过在开发者工具的 Elements 面板中选中 header 元素，并在 Computed 或 Attributes 面板中查看 aria-role 属性来实现。
另一种验证方法是使用屏幕阅读器进行测试。在 body 根元素下，屏幕阅读器通常会朗读“页眉”或“地标”等提示。而在 header 嵌套在 article 内部时，屏幕阅读器可能不会将其作为独立区域朗读，而是将其内容作为文章的一部分处理。通过对比这两种情况，可以确认 header 元素的角色变化及其对可访问性的影响。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。