HTML Guide for menubar

An element with “role=menuitem” must be contained in, or owned by, an element with “role=menubar” or “role=menu”.

To fix the W3C HTML Validator issue stating that an element with a role="menuitem" must be contained in, or owned by, an element with role="menubar" or role="menu", you need to ensure that your menuitem elements are properly nested within a menubar or menu element. This is important for accessibility, as it helps assistive technologies understand the structure and relationship of the elements.

The menuitem role indicates the element is an option in a set of choices contained by a menu or menubar.

Here is a step-by-step guide to fixing this issue:

1. Using role="menubar"

If your menuitem elements are part of a horizontal menu (like a navigation bar), they should be nested within an element with role="menubar".

Example:

<nav role="menubar">
  <div role="menuitem">Home</div>
  <div role="menuitem">About</div>
  <div role="menuitem">Contact</div>
</nav>

2. Using role="menu"

If your menuitem elements are part of a submenu or a vertical menu, they should be contained within an element with role="menu".

Example:

<div role="menu">
  <div role="menuitem">Item 1</div>
  <div role="menuitem">Item 2</div>
  <div role="menuitem">Item 3</div>
</div>

Ensuring Proper Nesting

Ensure that all your menuitem elements are either directly or indirectly (via a child-parent relationship) contained within a menubar or menu element.

Complete Example with Nested Menus:

Here is a more complex example, including nested menus for a drop-down scenario.

Example:

<nav role="menubar">
  <div role="menuitem">Home</div>
  <div role="menuitem">
    About
    <div role="menu">
      <div role="menuitem">Team</div>
      <div role="menuitem">History</div>
    </div>
  </div>
  <div role="menuitem">Contact</div>
</nav>

In this example, the main navigation (menubar) contains menuitem elements, and one of those menuitem elements contains a nested menu with additional menuitem elements inside it.

By ensuring your menuitem elements are contained within appropriate parent elements (menubar or menu), you will resolve the W3C HTML Validator issue and improve your web page’s accessibility.