Make WordPress Core

Opened 9 months ago

Last modified 8 months ago

#40677 reopened defect (bug)

Widgets page is not accessible for keyboard users

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



I noticed that widgets page is not accessible for users that navigate with keyboard.

A good point is that drag and drop is not the only solution to add a widget into an area but this page needs some enhancements to be accessible for keyboard users (blind people, people with motor disability, and even people with no handicap).

This is my list:

  • Available widgets can't be focused.

Solution : If we add a "tabindex="0"" attribute on ".widget.ui-draggable" elements, we can focus them and open it just like a click. And we need to add a focus style to see focus on elements.

  • A keyboard user can't select the area where he wants to add the widget because a TAB or arrow navigation automatically select the following choice. So he can just add widgets in the last area.

Solution : deactivate TAB navigation on elements and just allow arrow navigation. This would be equivalent to radio buttons navigation. TAB would be just to go to "Cancel" or "Add widget" button. Also add a screen reader text to tell which choice is selected (blind people can't see the checked icon).

  • This page is divided into 3 parts : "Available widgets", "Inactive widgets" and all widgets areas. The "all widgets areas" has not title to quickly navigate into it.

Solution : add a "h2" title on the third zone ("Widgets areas" for example) and replace "h2" title of widgets areas by "h3" (logical, right?)

  • Widgets in areas can't be deactivated with keyboard because we need to drag them back.

Solution : Add a link "Deactivate" next to the "Delete" one.

  • Widgets areas can't be opened with keyboard because arrows are "div"s and not buttons.

Solution : be inspired by the left column of the page to add menus (there is tabindex and screen reader text to explain)

  • Widgets in areas also have an arrow to hide / show. The arrow is a link and that's a good point but there no text in it.

Solution : add a screen reader text to explain what that link does (blind people can't see the arrow)

Thank you for your help

Change History (7)

#1 @joedolson
9 months ago

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

Thanks for your ticket, @juliemoynat! This issue was being tracked in #31476, and should be entirely fixed as of 2 days ago in 40569. If you can install the beta version of WordPress 4.8 and verify that all your issues are addressed, that would be great, but if there are further issues, please comment on #31476 to address them!

Thanks for sharing and helping out!

#2 @afercia
9 months ago

  • Version 4.7.4 deleted

See [40569] and [40480]. However, they fix just a part of the accessibility issues in the Widgets screen. Worth noting this screen has also an alternate mode, can be enabled from the Screen Options, see Enable accessibility mode, that's recommended especially for keyboard users and screen reader users.

#3 @juliemoynat
9 months ago


Thank you for your replies.

@joedolson I've installed WordPress 4.8-alpha-40576. Can you confirm that #31476 correction is in that version?
If so, I confirm that my ticket is not a duplicate of #31476 because Widgets page doesn't work better with keyboard.

@afercia I didn't know this option exists and users can't imagine there is some accessibility options in it. I never remind of this "screen options" button...
An accessibility mode should be accessible into the screen, not hidden into an accordion. I will test this accessibility mode as well.

#4 @afercia
9 months ago

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

An accessibility mode should be accessible into the screen, not hidden into an accordion.

Yep, right. Ideally, the same content should be served to all users. Personally, I don't support alternative modes or "accessible versions" as a viable solution for better accessibility. The Widgets screen "accessibility mode" is there for historical reasons, and I guess it was implemented years ago with a good intent. However, modern applications should be accessible out of the box. As noted in #40678 this screen, together with the Menus one, the media views, and the customizer, are the most critical areas in WordPress for accessibility. The Widgets screen would need some big refactoring primarily because the drag and drop functionality is hard to use with a keyboard. I really hope there will be the chance to improve this screen in the next future and contributors interested in helping out.

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

9 months ago

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

8 months ago

#7 @afercia
8 months 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 points outlined here are already fixed. Some of the other suggestions would be very simple and there are no reasons why they shouldn't be implemented :)

Note: See TracTickets for help on using tickets.