html <header role="menubar"> 未在 w3 验证器上验证

Question

我有一个主要的 header 元素，它是一个 page-specific 导航菜单。如您所见，h1 元素是一个 link 到（菜单固定在页面顶部，其余部分向下滚动）。

示例：

<header role="menubar">
    <a href="#top">
        <h1>Main Title</h1>
    </a>
    <ul role="menu">
        <li role="menuitem">
            <a href="#presentation">presentation</a>
        </li>
        <li role="menuitem">
            <a href="#picture">picture</a>
        </li>
        <li role="menuitem">
            <a href="#downloads">downloads</a>
        </li>
    </ul>
</header>

在 w3 validator 我收到消息：

Error: Bad value menubar for attribute role on element header.

.

让我参考 W3 recommendation page for single pages，其中 header 元素允许的 ARIA 角色是：

banner role (default - do not set) or presentation.

.

'default - do not set' 并不是一个真正的选项，因为它不会向后兼容，因为 header 元素

'banner' 和 'presentation' 不是正确的角色（参见 banner and presentation）

所以我的问题：

• 我需要做什么？最简单的方法是替换 header 元素 通过 div 元素。但我认为它在语义上不太好，是吗 对吧？

• 有没有可能W3C并没有真正考虑到这个案例 人们还是这样做是 100% 错误的（我的意思是在语义层面上 专注于可访问性）。

• 还有其他选择吗？

谢谢你:)

Answer 1

您当前的代码显示的不是菜单栏，而是导航列表。您需要 <nav> 而不是 <header role="menubar">，并且您应该从列表元素中删除角色属性。如果你正在实现一个菜单栏，你的代码是非常不完整的。

有关将 HTML5 和 WAI-ARIA 用于菜单栏的建议，请参阅 Recommended WAI-ARIA implementation for navigation bar/menu。