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

[afercia]

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.

[chetan200891]

Created patch to Enable accessibility mode link more discoverable

[chetan200891]

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

[afercia]

@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]

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

[antonioeatgoat]

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

[afercia]

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):

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

[chetan200891]

@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

[boemedia]

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!

[chetan200891]

Created patch for solution agreed by design team.

[afercia]

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.

[azaozz]

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.

[afercia]

@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]

42778.4.diff​ restores the screen_settings filter.

[afercia]

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.

[afercia]

Re-opening for 4.9.9 consideration.