HTML <header role=“menubar”> 无法在W3验证器上验证

Question

I have this main header element that is a page-specific navigation menu. As you can see the h1 element is a link to (the menu is fixed to the top of the page while the rest scrolls down).

Example:

<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>

on w3 validator I get as message:

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

.

referring me to the W3 recommendation page for single pages where the allowed ARIA roles for the header element are:

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

.

'default - do not set' isn't really an option as it would not be backwards compatible because of the header element

'banner' and 'presentation' are not the correct roles (see banner and presentation )

So my questions:

• What do I have to do? Easiest would be to replace the header element by a div element. But I think it is semantically less good, is that right?

• Is it possible that this case was not really considered by the W3C people or is it 100% wrong to do so (I mean on a semantic level focusing on accessibility).

• Are there other options?

thank you :)

Answer 1

What your current code shows is not a menubar but a navigation list. Instead of <header role="menubar"> you need <nav> and you should remove the role attributes from the list elements. If you are implementing a menu bar, your code is very incomplete.

For advice on using HTML5 and WAI-ARIA for menu bars, see Recommended WAI-ARIA implementation for navigation bar/menu .