Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#42778 closed defect (bug) (fixed)

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

Reported by: afercia's profile afercia Owned by: afercia's profile 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 7 years ago.
Created patch to Enable accessibility mode link more discoverable
42778.2.patch (2.4 KB) - added by antonioeatgoat 7 years 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 7 years ago.
Created patch for solution agreed by design team.
42778.3.diff (3.7 KB) - added by afercia 7 years ago.
42778.4.diff (3.2 KB) - added by afercia 7 years ago.

Download all attachments as: .zip

Change History (26)

@chetan200891
7 years ago

Created patch to Enable accessibility mode link more discoverable

#1 @chetan200891
7 years 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 7 years ago by chetan200891 (previous) (diff)

#2 @afercia
7 years 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
7 years 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
7 years 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
7 years ago

  • Keywords ux-feedback added; ui-feedback removed

#5 @afercia
7 years 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.


7 years ago

#7 @chetan200891
7 years 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.


7 years ago

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


7 years ago

#10 @boemedia
7 years 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 nice solution. Looking forward to seeing the patch implemented!

Version 0, edited 7 years ago by boemedia (next)

@chetan200891
7 years ago

Created patch for solution agreed by design team.

@afercia
7 years ago

#11 @afercia
7 years 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.


7 years ago

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


7 years ago

#14 @azaozz
7 years 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
7 years 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
7 years ago

#16 @afercia
7 years ago

  • Keywords needs-dev-note needs-refresh removed

42778.4.diff restores the screen_settings filter.

#17 @afercia
7 years 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.


6 years ago

#19 @afercia
6 years ago

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

Re-opening for 4.9.9 consideration.

#20 @SergeyBiryukov
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#21 @pento
6 years 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.