Dashboard: Some links can be identified as such only by their color

[afercia]

In the Dashboard, some links can be identified as such only by their color. Specifically:

• change your theme completely
• widgets and menus within the sentence Manage widgets or menus

The color difference with adjacent text is very low. Even with moderate vision impairment or moderate color perception impairment these links are barely distinguishable from normal text.

Quoting from the WordPress accessibility coding standards:

Links: underline or no underline?
​https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#links-underline-or-no-underline

When links can be identified as such by the context, for example because they’re part of a menu, or a set of links clearly identified as user interface controls, they don’t necessarily need to be underlined. In all the other cases, especially for links surrounded by other text (in a line or block of text), links need to be always underlined.

In a few words: most of the links in the Welcome box are OK because the context clarifies they're link. They are in a list that looks like a set of links. They have icons. The whole sentence is a link.

However, the three cases mentioned above are links within a line of text thus need to be underlined.

See the second screenshot below, where I'm using Sim Daltonism (bundled with macOS) to simulate monochromacy.

[afercia]

Re: Manage widgets or menus I'd like to propose to split it in two items:

• [link]Manage widgets[/link]
• [link]Manage menus[/link]

Note: the links output depends on whether the active theme supports widgets / menus.

This way:

• they wouldn't need to be underlined
• they would make sense even when read out of context, vs. the previous links that are announced only as "widgets" and "menus"

Instead, change your theme completely needs to be underlined.

[afercia]

There's at least one more occurrence of link within a line of text that needs to be underlined: the active theme within the "At a lance" box.

Pending further review from the accessibility team.

[afercia]

48406.diff​ is a first pass to split the widgets and menu links and underline a few other links:

• change your theme completely
• active theme in the At a glance box
• View all drafts in the Quick Draft box

Regarding the widgets / menus dashicon, the current one is dashicons-welcome-widgets-menus which represents a list and some boxes. For the new two split items I used dashicons-layout and dashicons-list-view for now. See attached screenshots. Alternatively, two new icons should be created as I couldn't find better matches for widgets and menus.

[afercia]

Original dashicons welcome-widgets-menus

[afercia]

Welcome panel with the patch applied

[afercia]

Some historical background: all these links were underlined in WordPress 3.7. They changed with the WordPress 3.8 redesign. See screenshots below.

[karmatosed]

Underlining seems fine but I would recommend we use skip-ink to avoid having things be very difficult to read for some. ​https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink.

[afercia]

Sure. text-decoration-skip-ink: auto is the default since Chrome 64 (January 2018) and Firefox 70 (October 2019) so basically there's nothing we have to do in this regard. Still ​not supported by Safari, Edge, IE and various mobile browser though.

There are now other interesting CSS properties related to underline. At the time of writing they're only supported by Firefox and Safari though:

• text-decoration-thickness: sets the thickness of lines added via text-decoration.
• text-underline-offset: sets the distance between a text decoration and the text it is set on. Bear in mind that this only works on underlines.

Exploring these properties could be an interesting idea but I think it should happen in a separate ticket.

[audrasjb]

Patch applied on desktop

[audrasjb]

Patch applied on intermediate screens

[audrasjb]

Patch applied on mobile screens

[audrasjb]

I tested 48406.diff: the patch applies cleanly and fixes the issue.
Removing needs-design-feedback as @karmatosed already provided a feedback on this patch.
Adding commit keyword.

[afercia]

I'd like to have a final confirmation the icons for Manage widgets and Manage menus are OK. /Cc @karmatosed

[karmatosed]

Looks good to me. At some point, we need to think about unifying what we use to mean widgets/menus. This, for now, works though.

[SergeyBiryukov]

In 46770:

Accessibility: Administration: Underline links on Dashboard that are located within a line of text and thus need to be underlined:

• "change your theme completely"
• Active theme in the "At a Glance" box
• "View all drafts" in the Quick Draft box

Split "Manage widgets or menus" into separate items for consistency with other links.

For better accessibility, links that are a part of other text should be underlined and not rely on color alone to be distinguished.

Per accessibility coding standards:

When links can be identified as such by the context, for example because they’re part of a menu, or a set of links clearly identified as user interface controls, they don’t necessarily need to be underlined. In all the other cases, especially for links surrounded by other text (in a line or block of text), links need to be always underlined.

​https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#links-underline-or-no-underline
​https://make.wordpress.org/accessibility/handbook/design/use-of-color/#not-by-color-alone

Props afercia, audrasjb, karmatosed.
Fixes #48406.

[SergeyBiryukov]

In 46771:

Accessibility: Administration: Underline links on Dashboard that are located within a line of text and thus need to be underlined:

• "change your theme completely"
• Active theme in the "At a Glance" box
• "View all drafts" in the Quick Draft box

Split "Manage widgets or menus" into separate items for consistency with other links.

For better accessibility, links that are a part of other text should be underlined and not rely on color alone to be distinguished.

Per accessibility coding standards:

When links can be identified as such by the context, for example because they’re part of a menu, or a set of links clearly identified as user interface controls, they don’t necessarily need to be underlined. In all the other cases, especially for links surrounded by other text (in a line or block of text), links need to be always underlined.

​https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#links-underline-or-no-underline
​https://make.wordpress.org/accessibility/handbook/design/use-of-color/#not-by-color-alone

Props afercia, audrasjb, karmatosed.
Merges [46770] to the 5.3 branch.
Fixes #48406.