WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 11 months ago

Last modified 11 months ago

#48406 closed defect (bug) (fixed)

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

Reported by: afercia Owned by: audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility Cc:

Description

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.

Attachments (11)

dashboard links.png (141.0 KB) - added by afercia 12 months ago.
dashboard links monochromacy example.png (376.7 KB) - added by afercia 12 months ago.
at a glance active theme.png (33.0 KB) - added by afercia 12 months ago.
48406.diff (2.6 KB) - added by afercia 12 months ago.
welcome widgets menus dashicon.png (47.6 KB) - added by afercia 12 months ago.
Original dashicons welcome-widgets-menus
dashboard links proposal.png (133.6 KB) - added by afercia 12 months ago.
Welcome panel with the patch applied
welcome panel wp 3.7.png (179.6 KB) - added by afercia 12 months ago.
welcome panel wp 3.8.png (150.1 KB) - added by afercia 12 months ago.
48406-haspatch-desktop.png (64.4 KB) - added by audrasjb 12 months ago.
Patch applied on desktop
48406-haspatch-intermediate.png (82.7 KB) - added by audrasjb 12 months ago.
Patch applied on intermediate screens
48406-haspatch-mobile.png (43.8 KB) - added by audrasjb 12 months ago.
Patch applied on mobile screens

Download all attachments as: .zip

Change History (27)

#1 @afercia
12 months ago

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.

Last edited 12 months ago by afercia (previous) (diff)

#2 @afercia
12 months ago

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
12 months ago

#3 @afercia
12 months ago

  • Keywords has-patch added; needs-patch removed

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
12 months ago

Original dashicons welcome-widgets-menus

@afercia
12 months ago

Welcome panel with the patch applied

#4 @afercia
12 months ago

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

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


12 months ago

#6 @afercia
12 months ago

  • Milestone changed from Awaiting Review to 5.3.1

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


12 months ago

#8 @karmatosed
12 months ago

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.

#9 @afercia
12 months ago

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
12 months ago

Patch applied on desktop

@audrasjb
12 months ago

Patch applied on intermediate screens

@audrasjb
12 months ago

Patch applied on mobile screens

#10 @audrasjb
12 months ago

  • Keywords commit added; needs-design-feedback removed
  • Owner set to audrasjb
  • Status changed from new to accepted

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.

#11 @afercia
11 months ago

  • Keywords needs-design-feedback added; commit removed

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

#12 @karmatosed
11 months ago

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.

#13 @audrasjb
11 months ago

  • Keywords commit added; needs-design-feedback removed

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


11 months ago

#15 @SergeyBiryukov
11 months ago

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

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.

#16 @SergeyBiryukov
11 months ago

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.

Note: See TracTickets for help on using tickets.