[wp-trac] [WordPress Trac] #40678: Editing menus in WP admin for blind people

[WordPress Trac]

#40678: Editing menus in WP admin for blind people
---------------------------+-----------------------------
 Reporter:  juliemoynat    |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Menus          |    Version:  4.7.4
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 Hi,

 I've first created this ticket in WordPress accessibility support
 (https://wordpress.org/support/topic/editing-menus-in-wp-admin-for-blind-
 people/) but this is not a support ticket so I re-post it here.

 With a blind person, we noticed that navigate through the page to create
 menus with a keyboard and a screen reader is not easy. Then, I tried to
 help him by giving him a page description.

 We noticed that :

 * this page lacks titles at the top of blocks to explain what these blocks
 are. This would help blind people to better find each block and to
 navigate easily from one block to another.
 * there are some masked explanations but not everywhere so, for example,
 he can’t imagine that clicking on links in “Menu structure” would have
 opened an accordion
 * there are some tabs navigation (at the top: “Edit menus” and “Manage
 locations”, in the left column: “Most recent”, “View all”, “Search”) but
 blind people can’t know which one is active not either that they are tabs.

 So, I think there are 2 steps to enhance editing menus in WP admin :

 1. giving more informations by screen reader texts
 2. using ARIA design patterns for tabs and accordions:
 https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex

 For step 1, we could :

 * for all tabs: add a screen reader text on the active one “(current tab)”
 * for tabs at the top (“Edit menus” and “Manage locations”): remove the
 “h2” tag and use an unordered list (“ul”) with an “aria-label” attribute
 that would tell “Main tabs for editing menus”
 * add a title before each block: for left column, this could be “Choose
 which links you want to have in your menu”, for right column, this could
 be “Change parameters for the links you added in your menu (order, label,
 title…)”
 * add a screen reader text to “Add to menu” button, like “(after that,
 don’t forget to active “Save menu” button)”
 * add a screen reader text to links in the right column (just like in the
 left one): “Press return or enter to open this section”
 * add a screen reader text after the 2 first tabs, in a paragraph that
 would tell users something like “don’t forget to active “Save menu” button
 to save all your modifications”. So, if they don’t find that button, they
 could search it with their screen reader thanks to its name.

 These texts would help blind people to navigate title by title and to
 understand how it works.

 What do you think about it? Could it be added to WordPress admin?

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