Consider removing the underline on the post titles to improve readability.

[marctison75]

As a person who has dyslexia, underline makes it harder for me to read. For the posts page I find it difficult to read the titles. I’ve checked the Figma files, and there is no underline for the post titles. This ticket #110 has been closed, but I’m not sure if there was a consensus.

[melchoyce]

We'll need a definitive answer from the a11y team about whether or not the site title and post titles need to have explicit link indicators.

[sarahricker]

Hey @marcduluc and @melchoyce!

In our new joint office hours, the Design and Accessibility teams discussed ways to help make the titles more readable, while still meeting the WCAG AAA guidelines to the best of our ability. However, different disabilities can create the need for a balancing act regarding overlapping issues. For instance, it is important to have a visual cue on the resting state for all links.

So far, our recommendations are to:

• [ ] Remove the link on the post title, if possible It would be ideal to avoid duplicate links to the same page and this would solve the need for underlined titles all together.

• [x] Ensure use of text-decoration-skip-ink across all links for the site This should be on by default in most browsers, but just in case, let's double check. The text-decoration-skip-ink feature can improve readability for dyslexic users, though it is not a 100% guarantee that it will work for everyone.

  Can we try the above and see if that helps? If not, we can do a deeper dive if needed.

[melchoyce]

Hey @sarahricker!

It would be ideal to avoid duplicate links to the same page and this would solve the need for underlined titles all together.

I think @marcduluc means the archives, not single posts:

Single posts don't link to their own titles.

Ensure use of text-decoration-skip-ink across all links for the site

It looks like we don't have this explicitly defined, but I'm still seeing the gap on Chrome, Firefox, and Safari. What browser are you testing in?

Thanks for reviewing!

[sarahricker]

Ahh, thanks @melchoyce !

Maybe a button below the excerpt, or other discernable treatment on the archive post title links (like ellipses) would help? I'm not opposed to removing the underline, so long as there is still an obvious link (more than color only).

Re text-decoration-skip-ink I see it as well, but thinking we should define it just in case older/ less common browsers don't use it by default. :)

[melchoyce]

Thanks @sarahricker!

[aristath]

@sarahricker following up from a Slack discussion I saw earlier today, could we please have a clear decision for this?

Maybe a button below the excerpt, or other discernable treatment on the archive post title links (like ellipses) would help? I'm not opposed to removing the underline, so long as there is still an obvious link (more than color only).

Right now, post-archives look like this:

So there is a "Read More" link at the end of excerpts. Post-titles are focusable by tabbing the keyboard, and the read-more link has the default (underlined) style for links.

If we remove underlines from titles (pending PR: #461), then posts in the archive will look like this:

In that gif I included normal, hover & focus just to get an idea of how it would look.

[carolinan]

@aristath Did you mean If we remove underlines from titles?

There are 3 links to the post here: Title, continue reading, and date.

If logged in, the post title is repeated 3 times: Post title, continue reading post title, edit post title

The exception is the aside that does not show the title.

There is a filter for the title so there is always a title text even if the user does not enter one. Because of that, the link on the date is not needed. Scratch that, it is needed because the aside does not have a read more link or a title. Hmmm. Maybe only link the date for the aside format?

[aristath]

@aristath Did you mean If we remove underlines from titles?

:facepalm: I did, thank you! Fixed the typo :+1:

[enriquesanchez]

We need some kind of visual treatment for links in order to comply with WCAG guidelines, which is a goal of this theme. The most common and obvious method is the default underline style.

@marcduluc Do you find that the skip-ink effect in underlines helps with readability?

We can also try a few different variations of underline, with properties such as text-underline-offset and text-decoration-thickness (though they are not supported in all browser versions):

@marcduluc Do you find any of the above to be easier to read?

[afercia]

~Because of that, the link on the date is not needed.~ Scratch that, it is needed because the aside does not have a read more link or a title. Hmmm. Maybe only link the date for the aside format?

Will create a new issue for this. Rationale: a link text like, for example, "October 14, 2020" that links to the post permalink doesn't make much sense for all users (visually and semantically) and also for SEO. Also, it would be nice to reduce the amount of redundant links in the archive pages and find a workaround for the Aside (and the Status).

[afercia]

An in-depth analysis on link underlines:

On Link Underlines https://adrianroselli.com/2016/06/on-link-underlines.html

It includes references and considerations about dyslexia as well. To my understanding, the most important part is to make sure the underline doesn't have a big impact ("overlaps") on the ability to recognize the characters shape as in: the underline should never intersect the typeface descenders. The CSS property text-decoration-skip-ink goes in the right direction. The article author also suggests to explore underlines with a lighter color using text-decoration-color, as long as the contrast ratio is sufficient.

[marctison75]

@enriquesanchez Yes the skip-ink effect in underlines helps with readability. But for me, underline titles with skip-ink are more difficult to read than titles with no underline. As blog post pages have many titles, it would be a bit complicated for me to browse the page.

But I understand that there are also other requirements to take into consideration 🙂

[kjellr]

Based on the conversation above, it seems to me that keeping an underline present is our best solution.

I'd advise against using a border-bottom here — we've removed that from all other links already. And since we cannot control the text-underline-thickness in Chrome, using a border-bottom for just the post title would introduce a weird situation where the post title underline would be less thick than other underlines on the page:

Given that, I think our best bet is to just modify the offset of the underline, so that it's not as mixed up with the text at a glance. Yes, this will have no effect in Chrome, but it appears that all these text decoration modifications are likely to arrive in Chrome at some point, so I'm not sure it makes sense to work around them too much at this point.

I opened #502 to try this out.

Current (Firefox/Safari):

Updated:

[pattonwebz]

I wanted to re-open this issue here because, while wo do have a working solution for some instances it's not ideal and the support level that it has is really quite small. Basically current support is only safari and firefox for desktop (neither support it on mobile).

The merged solution is only suitable for less than 10% of total users (consider collectively their desktop market share is just 10.7% and if we added mobile users to that it is really a much smaller share of total users).

[enriquesanchez]

@pattonwebz I think that keeping the underline is the best option we have now. There's not a one size fits all solution here.

We can improve on it where possible, with things such as skip-ink, text-underline-thickness, and text-underline-offset and let users adjust after that to their needs.

I highly recommend the article shared by @afercia above: https://adrianroselli.com/2016/06/on-link-underlines.html

It's highly informative and explores many different approaches, and the underline ends up being the most solid solution.

[pattonwebz]

@enriquesanchez I am inclined to agree we have the best solution we can have here however I reopened the issue to give a little extra time to explore more and maybe find another solution. After my own very quick explore so far I haven't found anything that workws better but I'd still like to keep this open a little longer to give a bit more time (and so that I don't forget to circle back :smile: ).

[joyously]

I noticed that the link looks a lot like inserted text (using <ins>).

[sarahricker]

Discussed again in a11y + Design office hours (see slack conversation).

Those present agreed that the underline is the most solid solution, but also understand the desire to finesse the approach some more. @joyously your screenshot is another good example, probably just needs a small tweak. 😄

Given that today is Beta 1, I don't think much more will make it in. However, will keep this issue open for future theme updates.

[pattonwebz]

I spent a bit of time looking at this and cannot find any better solutions. Closing for now as I don't think any better solutions.