Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#32721 closed enhancement (duplicate)

Customizer Menus: Accessibility: improve markup for the menu items search results list

Reported by: designsimply's profile designsimply Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Customize Keywords: needs-patch
Focuses: accessibility Cc:


/hat tip @afercia for the original report at

Searching for menu items will present a list of search results (or no results). Ideally, since this is a list, should be marked up as a list. Currently, each item is a definition list dl without a dd required element that's invalid markup.

About the "add" control, happy to see it's now a button.

About the text, I'm not sure "Add Menu Item" is appropriate. We should try to consider what will be read out by screen readers together with the other text, for example:

  1. When tabbing, only the button will be focused and the text read out will be just "Add Menu Item" without any reference to the link

  2. When arrowing, the text read out will be something like:
    Post Hello World button Add Menu Item

    Probably, I would consider to completely hide from assistive technologies the item title and repeat the title in the button itself, something like:
    Post <span aria-hidden="true">Hello World</span> button Add Hello World to the Menu

This technique is used in several places in core, for example in the Post publish box:

<a href="#edit_timestamp" ... >
<span aria-hidden="true">Edit</span>
<span class="screen-reader-text">Edit date and time</span>

Change History (7)

This ticket was mentioned in Slack in #core-customize by sheri. View the logs.

9 years ago

#2 @afercia
9 years ago

@designsimply thanks for the excellent description :) See also related #32715

#3 @ocean90
9 years ago

  • Milestone set to Awaiting Review

#4 @designsimply
9 years ago

  • Keywords needs-patch added

#5 @ocean90
9 years ago

Related: #31817

#6 @ocean90
9 years ago

In 32889:

Customizer: Use valid markup for menu items.

Replace <d(l|t)> with <div> for .menu-item-bar and .menu-item-handle.

see #32724, #32721, #31817.

#7 @celloexpressions
9 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

This is a duplicate of #32724 - search results and other available items are rendered from the same html template, which I'm patching now.

Note: See TracTickets for help on using tickets.