html <header role="menubar"> not validating on w3 validator

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.