WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#38086 closed defect (bug) (fixed)

Themes Feature Filter accessibility improvements

Reported by: afercia Owned by: afercia
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Themes Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description

The themes "Feature Filter" would need some accessibility improvements. When activated, it opens a form with several checkboxes for several themes features:

https://cldup.com/E_Dgrx1SPj.png

For keyboard users and assistive technologies users, navigation is mostly a linearised process so they navigate through all the checkboxes, select some features and then they would expect to find some controls to submit the search at the end of the form. However, the controls are placed before the form. This forces users to navigate backwards with the keyboard, screen reader users would also have to figure out the controls are actually only on the top of the form. Controls to submit forms are usually at the end of the form, it's a pretty common pattern and users would likely expect that. In this specific case there's some value in having them also at the top so placing them both before and after the form is probably the best option.

Additionally, for better accessibility:

  • all the buttons that behave like buttons should be... buttons and not <a href="#"
  • the toggle button should indicate if the panel is expanded or collapsed via an aria-expanded attribute
  • a few controls text should be expanded a bit: "Clear" what? "Edit" what?
  • currently, it is possible to submit a search with no features selected: this breaks the UI (see screenshot below) and should be avoided; also, a wp.a11y.speak() message here would be useful to give feedback to users

https://cldup.com/aK_3Itn6TR.png

Worth mentioning that, for better accessibility, the "toggle" button should be immediately followed by the expanding panel. Instead, the search field is placed in between and when navigating content using the keyboard or a screen reader this can be confusing. Ideally, the search field should be placed in a different order in the markup. Considering also there's a layout issue in the responsive view as pointed out in #32558 I'd rather fix this there or in a separate ticket.

Attachments (1)

38086.diff (10.5 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (9)

#1 @afercia
4 years ago

One more thing to fix: when on the "Favorites" view and then pressing the "Feature Filter" button, the favorites form should be hidden:

https://cldup.com/6afqaGL3n5.png

@afercia
4 years ago

#2 @afercia
4 years ago

  • Keywords has-patch added; needs-patch removed
  • Owner set to afercia
  • Status changed from new to assigned

First pass. There are pre-existing edge cases in the interaction that may lead to unexpected behaviours but they're outside of the scope of this ticket. Also, the responsive view should be improved but this is outside of the scope of this ticket as well.

  • the "Feature Filter" button behaves now just like a toggle and doesn't do anything else, also removed a leftover from [27963]
  • the "Apply Filters", "Clear", and "Edit" buttons are now <button> elements too
  • changes one button text and adds an aria-label attribute
  • adds a wp.a11y.speak() message

#3 @afercia
4 years ago

Screenshots with the patch applied: the "Apply" and "Clear" buttons are now also at the end of the form:

https://cldup.com/svVwt-jZBZ.png

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


4 years ago

#5 follow-up: @rianrietveld
4 years ago

Tested patch 38086.diff

Mac/Safari with VoiceOver: this works much beter, the feedback is good.

Some remarks, in the case you do not select anything:

  • The wp.a11y.speak message "Select one or more filter to filter by" is only announced once. When you select the button for the second time, nothing is announced. You have to move focus and go back to get the message again.
  • For none screen reader users, the filter button does nothing, but there is also no warning that you should select something.

Keyboard only tested on Safari/Firefox/Chrome
All works fine. Nice work Andrea :-)

#6 in reply to: ↑ 5 @afercia
4 years ago

Replying to rianrietveld:
Rian thanks very much for testing.

  • The wp.a11y.speak message "Select one or more filter to filter by" is only announced once.

I think this is the VoiceOver bug with identical messages, see #36853.

#7 @afercia
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 38640:

Accessibility: Add Themes Feature Filter form improvements.

  • adds "Apply Filters" and "Clear" at the end of the form
  • changes the "Feature Filter", "Apply Filters", "Clear", and "Edit" links in <button> elements
  • removes a leftover from [27963]
  • clarifies one button text and adds an aria-label attribute
  • adds a wp.a11y.speak() message when clicking on "Apply Filters" and no features are selected

Fixes #38086.

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


4 years ago

Note: See TracTickets for help on using tickets.