A11y: Learn.wordpress.org / learning pathways links

[joedolson]

Type of feedback

//dev

Description

The links for learning pathways do not look like links, and have insufficient hover state.

First, I only realized these were links when I was doing testing with a screen reader; prior to doing the screen reader testing, I had simply scanned past them assuming they were ornamental content. This suggests a design problem that might need some clarification.

Second, the hover state is a color-only change to the background from #fff to #f6f6f6, which is a nominal contrast difference. For low vision or in bright ambient light, particularly with low contrast vision, this change may not be noticeable. In itself, not an accessibility violation, because of the cursor change, but worth noting given how hard it is to recognize that these are links in the first place.

This is a very minor issue, overall, but I think it could be improved.

Step-by-step reproduction instructions (optional)

Screenshots or screen recording (optional)

[adamwoodnz]

@WordPress/meta-design your input please

[marko-srb]

Can we simply underline the title on hover (together with the background gray change - it should stay) and have it solved like that? I think visually that works well. We can always reconsider it after the launch if we want some different treatment.

[joedolson]

That would definitely make the interactive state more obvious; I still don't feel that there's a lot of affordance to tell me that this is a link in the first place.

[marko-srb]

@joedolson

I am not sure I can fully follow the issue at hand. Firstly I do recognize this isn't looking like a link, but more like a notification or banner to read (on some very abstract level). Yet, this does look like a card that could have some interaction — other sites have cards that only provide shadow when hovered — meaning: if we underline the title + already present cursor change, I think we solved the problem entirely.

I am now trying to guess: you might want to see some more drastic change (like blue color - white text on hover, etc) but that won't work due to the style of the page visually. It will not be appropriate. Then, there's another guess: we might zoom in the illustration when hovered — but again this doesn't fit to anything we are doing with hover states, so it's a no go for me.

—

Let me know why underline + cursor switch + light gray switch doesn't do it for you?

[ryelle]

This sounds like the same problem we talked about on the main site homepage (latest news section), where the black headings don't look like links.

Let me know why underline + cursor switch + light gray switch doesn't do it for you?

As I understand it, those things only appear once you've hovered/interacted with the content, but with just looking at the page, you wouldn't know those were links.

What if the headings were blue to match the other links on this page? The hover could stay the same. This matches how we've used cards on other sites, like Developer Resources.

[joedolson]

Yes, that's what I was calling out; the proposed hover state is great, but the problem is in the static state.

I think that going to blue would be sufficient, and matches many other patterns used elsewhere in the redesign, which helps with learnability, as well.

[marko-srb]

Yes, switching to blue works well!

[fcoveram]

Agree with switching the title to blue. Thanks for raising this.