Back to home

Testing the menu element

Dummy link above

The <menu> element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).

The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items.

The related <menuitem> element has been deprecated.

Example

    •  
    <menu>
  <li><button>Inject Hello</button></li>
  <li><button>Inject Goodbye</button></li>
  <li><button>Clear</button></li>
</menu>

<div class="menu-example" aria-live="polite">
  <!-- Visible message -->
</div>

<div class="announcement" aria-live="polite">
  <!-- Message for screen readers -->
</div>

    Expected results for screen readers

    1. The <menu> element should be announced as a list (for example, "list, 3 items") when the screen reader enters it. It should not be announced as a menu
    2. All button names should be announced
    3. Activating "Inject Hello" should present "Hello world" into container below
    4. The injected information should be announced to screen readers
    5. Activating "Inject Goodbye" should present "Goodbye world" into container below
    6. The injected information should be announced to screen readers
    7. Activating the "Clear" button should clear any information from the container below
    8. "Your message has been cleared" should be announced

    Back to home