在 W3C ARIA 示例页面中 Banner Landmark HTML Techniques 选项卡中有这样的文本:(强调我的)
- The HTML5
headerelement defines abannerlandmark when its context is thebodyelement.- The HTML5
headerelement is not considered abannerlandmark when it is descendant of any of following elements:
articleasidemainnavsection
据我了解，此代码中的 header 不会自动设置横幅角色:
<body>
<main>
<article>
<header><!-- ... --></header>
</article>
</main>
</body>
但是，如果 header 不嵌套在上述任何元素中，同时不是 body 元素的直接后代，那又怎么样呢？
这段代码中的header是否自动设置了banner角色？
<body>
<div>
<header><!-- ... --></header>
<main></main>
</div>
</body>
元素/header 元素的上下文是什么？
它只是元素的直接父元素吗？
或者它是设置上下文的最接近的祖先元素？
我在 Roles documentation 中找不到任何提示在 w3.org 上，该页面上多次提到了“上下文”一词，但与示例页面上提到的上下文不同(双关语)。
最佳答案
official <header> element spec提供了更多的说明，尽管您可能需要阅读几次才能理解。
When a
<header>element’s nearest ancestor sectioning root element is the<body>element, and it is not a descendant of the<main>element or a sectioning content element, then that<header>is scoped to the<body>element and represents mostly site-oriented content, or introductory content for the page as a whole.
接着说:
Assistive Technology may convey to users the semantics of the header element when it applies to the whole page. This information can provide a hint as to the type of content. For example, the role of the element, which in this case is "banner", can be announced by screen reader software when a user navigates to a header element that is scoped to the body element.
所以如果你的<header>不属于 <body> 的范围，屏幕阅读器很可能不会将标题宣布为横幅地标，但这取决于屏幕阅读软件来决定。
关于html - 角色="banner"的上下文是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56983798/