html <header role="menubar"> 不在 w3 验证器上验证答案

【问题标题】：html <header role="menubar"> not validating on w3 validatorhtml <header role="menubar"> 不在 w3 验证器上验证
【发布时间】：2016-12-08 23:32:43
【问题描述】：

我有这个主要的标题元素，它是一个特定于页面的导航菜单。如您所见，h1 元素是一个链接（菜单固定在页面顶部，其余部分向下滚动）。

例子：

<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 我收到消息：

错误：元素标题上属性角色的值菜单栏错误。

将我推荐给W3 recommendation page for single pages，其中标题元素允许的 ARIA 角色是：

横幅角色（默认 - 不设置）或演示。

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

“banner”和“presentation”不是正确的角色（参见banner 和presentation）

所以我的问题：

我该怎么办？最简单的方法是替换标题元素通过 div 元素。但我认为它在语义上不太好，是吗对吗？
W3C 是否真的没有考虑过这种情况？人还是这样做是 100% 错误的（我的意思是在语义层面专注于可访问性）。
还有其他选择吗？

谢谢你:)

【问题讨论】：

嗨@ChristopheStrobbe，感谢您的快速评论。我发布了一个简化版本的菜单，没有状态和属性，只有角色，因为这是我关心的。无论如何，您通过指向导航方式回答了我的问题。我认为 nav 元素应该只包含指向其他页面的链接，但检查该元素的 W3C 页面，我发现它也可能包含指向页面内部分的链接。可惜它不能是标题，因为我仍然认为，从语义的角度来看，标题比导航更正确。

标签： html accessibility backwards-compatibility w3c-validation wai-aria

【解决方案1】：

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

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

【讨论】：