WordPress.org

Make WordPress Core

Opened 15 months ago

Closed 4 months ago

#42778 closed defect (bug) (fixed)

Widgets page: consider to make the Enable accessibility mode link more discoverable

Reported by: afercia Owned by: afercia
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-patch has-screenshots has-ux-feedback
Focuses: ui, accessibility Cc:

Description

During WCUS contributor day we've tested the Widget page with Alex Stine and found that the placement of the Enable accessibility mode link could be improved a lot. Alex uses Firefox and NVDA and he's an experienced WordPress uses but he just didn't know about the Enable accessibility mode link.

The point is this link is hard to find (hidden by default in the screen options tab) and could be placed in a more discoverable place. Right after the main heading would be a good option because screen reader uses often use headings for navigation.

Attachments (5)

42778.diff (970 bytes) - added by chetan200891 15 months ago.
Created patch to Enable accessibility mode link more discoverable
42778.2.patch (2.4 KB) - added by antonioeatgoat 15 months ago.
Removed the screen options tab from the widgets page and moved the link near the page title, with the same style of "Manage with Live Preview" button
42778.2.diff (3.3 KB) - added by chetan200891 13 months ago.
Created patch for solution agreed by design team.
42778.3.diff (3.7 KB) - added by afercia 12 months ago.
42778.4.diff (3.2 KB) - added by afercia 12 months ago.

Download all attachments as: .zip

Change History (26)

@chetan200891
15 months ago

Created patch to Enable accessibility mode link more discoverable

#1 @chetan200891
15 months ago

@afercia I have created patch 42778.diff to make the Enable accessibility mode link more discoverable. So it will look like this.

https://s.nimbus.everhelper.me/attachment/1286793/hyk75xbap00qclkqzfgq/703358-ErAdMYYD4TKVFDPk/screen.png

Last edited 15 months ago by chetan200891 (previous) (diff)

#2 @afercia
15 months ago

  • Owner set to afercia
  • Status changed from new to assigned

@chetan200891 thanks for the patch, it's a good start! I'd consider to completely remove the Screen Options tab and place the new link after the main h1 in the page. I guess this would require some feedback from the design team :)

@antonioeatgoat
15 months ago

Removed the screen options tab from the widgets page and moved the link near the page title, with the same style of "Manage with Live Preview" button

#3 @antonioeatgoat
15 months ago

  • Keywords has-patch ui-feedback added; needs-patch removed

What about handle it as the "Manage with Live Preview" button? Working like that in the second patch.

https://serving.photos.photobox.com/7377601263ad72fa001b310b54b3dbaf8b7482dc868be444c48eb98a45f096eff1f53b01.jpg

#4 @antonioeatgoat
15 months ago

  • Keywords ux-feedback added; ui-feedback removed

#5 @afercia
14 months ago

  • Focuses ui added
  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to 5.0

What about handle it as the "Manage with Live Preview" button?

Yes, that's an option. Personally, i don't have a strong preference about the visual part, that needs some design feedback /cc @karmatosed @melchoyce. Trying to recap what's important from an accessibility perspective:

  • this link should always be visible: many users don't even know there's an "accessibility mode"
  • it doesn't make much sense to have a "Screen Options" section that contains just one link anyways
  • the link should be placed in the source after the main H1
  • it should never be hidden, not even in the responsive view

For the visual part, one more option could be placing the link in the source after the H1 and then moving it with CSS to the top right, close to the Help button (with float right and some margin adjustments):

https://cldup.com/AgieMqTD0s.png

https://cldup.com/RbqCxmN0pw.png

It could also look like the Help tab, but maybe a simple link look would be best:

https://cldup.com/nKvw7Zi_G6.png

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


14 months ago

#7 @chetan200891
14 months ago

@afercia I like the idea to placing the link in the source after the H1 and then moving it with CSS to the top right, close to the Help button. I have made it in my local and created a video. Patch is ready but still waiting from design team feedback. Here is how it will look like https://youtu.be/h2ihcxAl1hA

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


13 months ago

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


13 months ago

#10 @boemedia
13 months ago

  • Keywords has-ux-feedback added; ux-feedback removed

The design team discussed the solution given in @chetan200891 's video and we all agreed to this being a really good solution. Looking forward to seeing the patch implemented!

Last edited 13 months ago by boemedia (previous) (diff)

@chetan200891
13 months ago

Created patch for solution agreed by design team.

@afercia
12 months ago

#11 @afercia
12 months ago

  • Keywords needs-dev-note commit added

42778.3.diff refreshes the patch and removes a switch statement in class-wp-screen.php, as using a switch for only 1 case (plus the default) seems a bit excessive.

Not sure if it will need a dev notes post for the removal of the screen_settings filter, as it seems it was only used in this page for internal purposes. Going to add the needs-dev-note keyword to be sure it gets considered.

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


12 months ago

This ticket was mentioned in Slack in #core-committers by afercia. View the logs.


12 months ago

#14 @azaozz
12 months ago

Looking at 42778.3.diff I don't see why we need to remove the screen_settings filter. Thinking we should keep it. A plugin can use it to add any screen settings to any screen.

The rest looks good.

#15 @afercia
12 months ago

  • Keywords needs-refresh added; commit removed

@azaozz thanks. Will restore the filter. It was removed based on the comment This filter is currently only used on the Widgets screen to enable accessibility mode. :) I guess it's safer to keep it.

@afercia
12 months ago

#16 @afercia
12 months ago

  • Keywords needs-dev-note needs-refresh removed

42778.4.diff restores the screen_settings filter.

#17 @afercia
12 months ago

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

In 42790:

Accessibility: Make the Widgets screen "Enable accessibility mode" link more discoverable.

For a number of years, the link to the Widgets screen "Accessibility mode" lived
in the Screen Options panel, hidden by default. Many users, including assistive
technologies users, weren't able to find it or even aware it existed. By bringing
the link in the main screen, visible by default, this change makes the
"Accessibility mode" easily discoverable for everyone.

Props chetan200891, antonioeatgoat.
Fixes #42778.

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


5 months ago

#19 @afercia
5 months ago

  • Keywords fixed-major added
  • Milestone changed from 5.0 to 4.9.9

Re-opening for 4.9.9 consideration.

#20 @SergeyBiryukov
5 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#21 @pento
4 months ago

  • Keywords fixed-major removed
  • Milestone changed from 4.9.9 to 5.1
  • Resolution set to fixed
  • Status changed from reopened to closed
Note: See TracTickets for help on using tickets.