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 role should be announced when the element is in focus
    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" biutton should clear any information from the container below
    8. After a short pause, "Your message has been cleared" shpould be announced

    Back to home