[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:  5.0
Component:  Menus         |     Version:
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  accessibility
--------------------------+----------------------------

Comment (by juliemoynat):

 Hi @audrasjb

 Thank you for all you're doing!

 I've read your "diff" and here are my observations:

 * '''add a title before each block:''' I thought more of adding a "h2" tag
 (instead of a "span") because people can navigate through titles with
 their screen readers. I know that sighted persons who use screen readers
 don't like to have hidden titles but that can be a real help for blind
 persons, in my opinion.
 * '''add a screen reader text to “Add to menu” button:''' good job. You
 find the right words ;-)
 * '''add a screen reader text to links in the right column (just like in
 the left one):''' the text added is not at the right place (in the diff,
 it is in a "div" that can not receive focus). For this text being
 readable, we should add it in the link that have "item-edit" class. But...
 now, I see that this link has an aria-label attribute. (For information,
 an "aria-label" text overrides the content inside tags in a screen
 reader.) This attribute is suddenly modified with JavaScript... So this is
 more a bug to fix in JS.
     * Before JS:
 {{{
 <a class="item-edit" id="edit-140" href="/wp-admin/nav-menus.php?edit-
 menu-item=140#menu-item-settings-140" aria-label="Edit menu item"><span
 class="screen-reader-text">Edit</span></a>
 }}}
     * After JS:
 {{{
 <a class="item-edit" id="edit-140" href="/wp-admin/nav-menus.php?edit-
 menu-item=140#menu-item-settings-140" aria-label="Mentions légales. Menu
 item 2 of 3."><span class="screen-reader-text">Edit</span></a>
 }}}
     * What we should have: The script should add its text to the first one
 instead of override it: that's the only way to have a relevant link for
 screen reader users.
 {{{
 <a class="item-edit" id="edit-140" href="/wp-admin/nav-menus.php?edit-
 menu-item=140#menu-item-settings-140" aria-label="Mentions légales. Menu
 item 2 of 3. - Edit menu item"><span class="screen-reader-text">Mentions
 légales. Menu item 2 of 3. - Edit menu item</span></a>
 }}}
 * '''add a screen reader text after the 2 first tabs:''' I'm looking for
 the "add-edit-menu-action" class in my browser web developer tool to see
 where the text is added but I can't find it. Is the text adding to the
 right place? I think this text could be placed just before the "div
 .manage-menus" element in a "p" tag (because it's a paragraph ;-) ).

 I hope my comment is enough clear. Don't hesitate to contact me if you
 have any question :)

 Cheers,
 Julie

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