Make WordPress Core

Opened 6 years ago

Last modified 5 weeks ago

#42002 accepted defect (bug)

Improve the accordions accessibility

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 6.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots
Focuses: ui, accessibility Cc:

Description

Splitting this out from #37013, props to monikarao, xavortm, mihai2u, Kopepasah for the work done there.

In #37013 was noted that the toggle "arrows" of the accordions in the Menus screen don't have the circular shape to indicate keyboard focus. This is inconsistent with other similar controls that do use the circular focus and could be improved.

https://cldup.com/WXR2bcgPQp.png

However, the accordions in the Menus screen are generated with do_accordion_sections(): plugins or themes might use this function for their own purposes and any change here should be carefully considered and well communicated.

In core, as far as I see, the Menus screen is the only place where do_accordion_sections() is used. In other places, for example the Customizer, the accordions markup is output by a custom implementation. The JS part instead, if I'm not wrong, is still shared and uses accordion.js.

This would be also a good opportunity to improve the accordions accessibility in core and standardize all the different implementations.

I'd recommend to follow the example on the ARIA Authoring Practices, see https://www.w3.org/TR/wai-aria-practices/#accordion and see the example on https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html where the accordion "titles" use a button inside a heading (note: the example uses <dt role="heading" aria-level="3"> because it's an ARIA example :) that's equivalent to a heading).

Attachments (2)

42002.patch (1.3 KB) - added by rishishah 6 years ago.
42002.2.patch (1.3 KB) - added by rishishah 6 years ago.
Here is the proper patch from src.

Download all attachments as: .zip

Change History (15)

@rishishah
6 years ago

#1 @rishishah
6 years ago

Hello afercia,

Please review my patch and let me know if anything.

Please see changes here: https://ibb.co/gfniB5

Thanks,

@rishishah
6 years ago

Here is the proper patch from src.

#2 @afercia
6 years ago

@rishishah thanks for the patch! What I meant is a bit more substantial chance though, making the heading contain just a button with some proper text. This would require some more changes. Basically something like:
<h3><button ...>accordion title here<span aria-hidden="true" class="toggle-indicator"></span></button></h3>

The span with icon should go inside the button.

This would match the aria example and allow to remove some of the screen reader text there. Also, it would be nice to remove the word "toggle" sinte it's difficult or impossible to translate in some languages, see #34753

With this changes, also the JS part should be reviewed to ensure it works properly.

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


6 years ago

#4 @afercia
6 years ago

  • Milestone changed from Awaiting Review to Future Release

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


6 years ago

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


5 years ago

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


5 years ago

#8 @afercia
5 years ago

Note: the new Site Health feature that is going to land in WordPress 5.2 adds some new accordions, see #46573.

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


5 years ago

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


3 years ago

#11 @joedolson
7 weeks ago

  • Milestone changed from Future Release to 6.5
  • Owner set to joedolson
  • Status changed from new to accepted

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


7 weeks ago

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


5 weeks ago

Note: See TracTickets for help on using tickets.