Question

我有这个主页眉元素是特定于页面的导航菜单。正如您所看到的那样，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角色为：

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

＆＃39;默认 - 不设置＆＃39;并不是一个真正的选项，因为它不会向后兼容，因为标题元素

＆＃39;旗帜＆＃39;和＆＃39;演示＆＃39;不是正确的角色（请参阅banner和presentation）

所以我的问题：

我该怎么办？最简单的是替换header元素通过div元素。但我认为它在语义上不太好，就是这样右
是否有可能W3C并未真正考虑此案例人或者这样做是否100％错误（我的意思是在语义层面上关注可访问性）。
还有其他选择吗？

谢谢你：）

Answer 1

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

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

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

1 个答案: