Links on 'blog page, to individual posts, are not visually apparent
matatk opened this issue · 9 comments
On https://brew.sh/blog/ there are a series of post titles and abstracts, where the post titles link to the full text of each 'blog post.
However, there are no visual affordances that the posts' titles are actually links to the full posts, or that there is any more of the post to read than the initial paragraph. An example of this is the post announcing v1.0.0 - it contains quite a bit of detail about the release, but it's not clear that all that information is there, because the heading of the post is not visually styled like a link, and there's no ~"read the full v1.0.0 article" link below the first paragraph.
Just having a "read more" link below each article's abstract would not be good for accessibility, because people using assistive technologies to browse the web often navigate through the links in a page (e.g. using Tab, or via a list of all links on the page) and in that case they'd just be presented with a series of identical "read more" links, rather than "read more about the v1.0.0 release" and so-on. It is possible to include extra text in links to give such users the context of the link, without having it appear visually, as per Example 1 in the Web Content Accessibility Guidelines (WCAG) Technique for hiding some link text with CSS.
If you would like to address this, then a good simple approach would be to include such "read more about X" links (with sufficient context for users of assistive technologies, as above) rather than having the headers for each post as links, as doing so overloads their purpose (generally, heading elements are for navigation within the current page; links are for navigation to other pages). However, if the heading links are to be kept, styling them in the same way as the other links on the site would be appropriate, so at least users know they're links.
A further, related issue [if you like I can file this separately] is that the contrast between link text and the page background is only 4.3:1, whereas 4.5:1 is recommended by WCAG as a minimum, and the contrast between body (non-link) text and link text is only 2.3:1, whereas at least 3:1 is a good minimum (and 4.5:1 is preferable if possible). One solution to this would be to lighten the link text a bit to get it to 4.5:1 and also have links visually underlined, so that even people who can't distinguish them from the body text by colour will still be able to tell they're links, due to the underline.
rather than having the headers for each post as links, as doing so overloads their purpose (generally, heading elements are for navigation within the current page; links are for navigation to other pages)
I don't agree with this, I'm afraid. I don't think I've seen many mainstream blogs where the headers for each post aren't links. It may well be they are doing it wrong too, I admit.
styling them in the same way as the other links on the site would be appropriate, so at least users know they're links.
Could you be more specific here and consider pasting some images, ideally annotated?
One solution to this would be to lighten the link text a bit to get it to 4.5:1
I'm up for this.
and also have links visually underlined
Similarly, I don't agree as it doesn't seem to be a mainstream requirement on the internet now for links to be underlined.
Any chance you'd be able to submit a pull request for any of these changes? That'd be the easiest way to discuss this further.
Thanks for your quick reply. Happy to do a PR, though won't be able to until next week, so for now I'll answer what I can...
This image shows that there are two different types of links on the page (the heading links and the links in the body text). Currently the only indication that the heading links are links is that the mouse pointer becomes a hand shape when resting over them (the other links are a different colour to the body text):
This also leads into underlines (or similar)… there ought to be a way to distinguish links from body text that does not rely on colour; some users may be using low-end monitors that can't display colours accurately; others may not be able to see the difference between colours very clearly. The contrast between body text and link text is very low (only 2.3:1) and there's no visual clue that links are links, other than colour. WCAG has more info on why using colour alone can be problematic for users. There is also a suggested technique to distinguish links from surrounding text however this mainly relies on a stronger contrast between body and link text and thus does not fully solve the problem for users who are browsing on a touch-based device, as they have no :focus or :hover to rely upon to show the text decoration (though it would still be an improvement, of course).
Here is what the page looks like in in Mac greyscale mode (which sort-of approximates poor colour perception). Imagine how it might look when on a mobile, perhaps out in daylight, or just on a desktop with sub-optimal lighting the difference between links and the rest of the text would be lost on some people):
The links' text is has only a ratio of 4.3:1 with the page background; glad to hear you're up for increasing this. However, if you do increase the link text brightness so that the links are more easily readable (i.e. 4.5:1 against the page background) then the contrast between link text and body text would drop even lower than the present 2.3:1 and it will be even harder for people to distinguish links from the body text.
I would recommend some sort of decoration on links to indicate they're links (as this would keep the 'feel' of the site closer to how it is presently), but maybe it would be possible to find a different colour scheme under which links contrast clearly (>=4.5:1) with the background and at least 3:1 with the body text (though this could still leave out users who don't see the difference between colours so well, it would be an improvement, as above).
Happy to do a PR, though won't be able to until next week
That'd be perfect, thanks and no rush.
Currently the only indication that the heading links are links is that the mouse pointer becomes a hand shape when resting over them (the other links are a different colour to the body text)
Gotcha. I agree this should be improved.
there's no visual clue that links are links, other than colour
They are also bold, I think?
I'd missed the bold-ness of the link text at first, though yes, they are. (My sight isn't perfect, though that's not the only reason I am really for underlines on links :-).)
Just want to check the parameters for the PR I'm going to do; I understand they are:
- Improve indication that some headings are also links.
- Improve contrast between link text and page background.
- Improve contrast between link text and non-link body text.
Are there any colours that you would rather I don't change? I am not sure if it'll be possible, but thought I should check; I'm thinking priorities would be:
- Page background colour
- Body text colour
- Link colour
I'm assuming that I won't be adding underlines or similar to links (though doing so may give more flexibility with respect to not changing the colours), and will of course try to keep as many of the colours the same/as close as possible, so the character of the site is the same.
If this sounds OK, I'll give it a go...
I'd missed the bold-ness of the link text at first, though yes, they are. (My sight isn't perfect, though that's not the only reason I am really for underlines on links :-).)
Ah, cool. Could make them even more bold, perhaps? Would underline-on-hover be any good?
Just want to check the parameters for the PR I'm going to do; I understand they are:
Improve indication that some headings are also links.
Improve contrast between link text and page background.
Improve contrast between link text and non-link body text.
Sounds good 👍 I expect there will be some back-and-forth.
Are there any colours that you would rather I don't change?
Basically the overall theme look should remain the same but we should just adjust specific colours as much as required.
will of course try to keep as many of the colours the same/as close as possible, so the character of the site is the same.
Sounds perfect.
If this sounds OK, I'll give it a go...
Full speed ahead, thanks again!
Sorry for the delay, though I believe I've finally got a got set of colours that increases the contrast between links and non-link text. I used http://jxnblk.com/colorable/demos/matrix/ to tweak the background, body text and link text colours.
I've just noticed that you've added underlines to the links—this is excellent; it makes them much clearer to read (for me and I'm sure others). I was thinking of simply making the links in headings the same colour as normal links, but I think your solution is better.
Was planning to submit a PR this evening with the new colours. However my only concern about them was that, whilst increasing the contrast between body text and link text, they also decrease the contrast between link text and the background (this was the best solution I could find whilst preserving the feel of the original palette, and the link text to background ratio is still within the limits set out in WCAG 2 AA). In light of your improvements to the links, though, I may revisit this slightly before submitting the PR (can always tweak the PR as required, and discuss things there, of course).
I've just noticed that you've added underlines to the links—this is excellent; it makes them much clearer to read (for me and I'm sure others).
Thanks for the kind words.
Was planning to submit a PR this evening with the new colours. However my only concern about them was that, whilst increasing the contrast between body text and link text, they also decrease the contrast between link text and the background (this was the best solution I could find whilst preserving the feel of the original palette, and the link text to background ratio is still within the limits set out in WCAG 2 AA). In light of your improvements to the links, though, I may revisit this slightly before submitting the PR (can always tweak the PR as required, and discuss things there, of course).
I'm happy to defer to your experience. I'm sure there is going to be a little discussion before it's merged anyway so feel free to open earlier rather than later for conversation. Thanks again!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.