[wp-trac] [WordPress Trac] #32724: Customizer Menus: Accessibility: improve markup for menu item lists

[WordPress Trac]

#32724: Customizer Menus: Accessibility: improve markup for menu item lists
---------------------------+-------------------------
 Reporter:  designsimply   |      Owner:
     Type:  enhancement    |     Status:  new
 Priority:  normal         |  Milestone:
Component:  Customize      |    Version:
 Severity:  normal         |   Keywords:  needs-patch
  Focuses:  accessibility  |
---------------------------+-------------------------
 /hat tip @afercia for the original report at
 https://github.com/voldemortensen/menu-customizer/issues/91

 Posts, Pages, Categories, etc. present a list of available items and
 ideally should be marked up as lists. Currently, each item is a `dl`
 missing a required `dd` element.

 The same considerations about the text "Add Menu Item" and the suggested
 technique from #32721 apply here.

 > 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[[br]][[br]]
 > 1. When arrowing, the text read out will be something like:[[br]]`Post
 Hello World button Add Menu Item`[[br]][[br]]Probably, I would consider to
 completely hide from assistive technologies the item title and repeat the
 title in the button itself, something like:[[br]]`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>
 </a>
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32724>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform