WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 2 days ago

#40678 new defect (bug)

Editing menus in WP admin for blind people

Reported by: juliemoynat Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Menus Keywords: needs-patch
Focuses: accessibility Cc:

Description

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?

Change History (6)

#1 @afercia
3 weeks ago

  • Version 4.7.4 deleted

Hello @juliemoynat and thanks for your ticket. I'd definitely agree this screen needs improvements. Unfortunately, the menus screen, together with the widgets one (see #40677), the media views, and the customizer, are the most critical areas in WordPress for accessibility.

Your suggestions make perfectly sense, I really hope there will be the chance to implement at least some of them in the next future. Regarding the tabs, an ARIA tabbed interface would probably be the best option. Accordions could benefit from some ARIA patterns. These are solutions that require a bit of time to be implemented, and a big refactoring of this screen. The main issue would still be the drag and drop functionality, that should be really replaced by something simpler and more accessible.

#2 @juliemoynat
3 weeks ago

Hi @afercia
Thank you for your reply. I know that using ARIA needs time to implement it. That's why I suggest first to implement some screen reader texts to help users without doing a lot of refactoring.
Blind people can't use this screen properly and this is one of the most important screen when you're doing a website. This is quite a blocking situation. Don't you think?

#3 @afercia
2 weeks ago

I'd definitely agree this screen needs improvements.

@juliemoynat I agree :) Noting that the accessibility team meetings are on Mondays at 17:00 UTC in the Slack #accessibility channel and any new contributor is very welcome!

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 weeks ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 days ago

#6 @afercia
2 days ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

Moving to future release as something that should be addressed, as per today's bug scrub. Some of the suggestions here would be very simple and there are no reasons why they shouldn't be implemented :) Note: the "tabs" would need a true ARIA treatment.

Note: See TracTickets for help on using tickets.