yari: Issue with all content: Missing link underlines
MDN URL: https://developer.mozilla.org/en-US/docs/ (and all pages below)
Issue
None of the links within the content have an underline. They are difficult to distinguish from the surrounding content and require interaction to identify them in some cases.
The page content is dark gray (#212121
) and the link color is dark blue (#00458b
). with a contrast ratio of 1.7:1, it is fair to assume most users with good vision under ideal conditions will have to take a second look.
As it stands now, the content links would fail WCAG 2.1 Success Criterion 1.4.1 Use of Color. The non-normative G182 recommends using an additional visual cue besides color. G183 recommends a 3:1 contrast ratio and an additional visual cue on focus or hover, but is now mooted with the advent of touch interfaces. I go into more detail about alternatives to underlines in On Link Underlines.
Recommended fix
To restore underlines to links in the content…
In the file: /node_modules/@mdn/minimalist/sass/atoms/_typography.scss
At line 69, please strike text-decoration: none;
. Reference code with - preceding the line to strike:
/* text links */
a:link,
a:visited {
color: $link-color;
- text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
In the file: /node_modules/@mdn/minimalist/sass/atoms/_links.scss
At line 3, please strike text-decoration: none;
. Reference code with - preceding the line to strike:
a {
color: $link-color;
- text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
This will restore underlines to links in the navigation and elsewhere as well. If you want to remove those, I suggest more targeted removal of underlines scoped to just those areas to ensure underlines are retained on links outside the content.
If you would like to try the content with restored underlines without fiddling in the browser’s dev tools, I have bookmarklet that will restore underlines (which I tested on MDN) at http://rosel.li/bookmarklets#underlines.
Specific section or headline?
Throughout.
What did you expect to see?
Underlines on links.
Did you test this? If so, how?
I tried to use the content.
MDN Content page report details
- Folder:
en-us/web/html/element
- MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- GitHub URL: https://github.com/mdn/content/blob/master/files/en-us/web/html/element/index.html
- Last commit: https://github.com/mdn/content/commit/145e9f6f3d388fd2277aaf47f0b68175e4f9dcb5
- Document last modified: 2020-12-18T22:31:45.000Z
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 7
- Comments: 50 (22 by maintainers)
Commits related to this issue
- fix: links in article content (#3171) * fix: links in article content Fixes underlines and colors of links in main page content. Fix #2901 * update print style rules * underline links in ... — committed to mdn/yari by deleted user 3 years ago
- fix: links in article content (#3171) * fix: links in article content Fixes underlines and colors of links in main page content. Fix #2901 * update print style rules * underline links in ... — committed to peterbe/yari by deleted user 3 years ago
@schalkneethling I was having exams back then so I couldn’t look into it. But yeah from today onwards I will try to run again.
Thanks, @schalkneethling. Yes, I’m planning to work on this issue and would like to work on more issues in the future.
Please don’t assign issues. Not even to people in the core team. We assign them to ourselves or perhaps in some exceptions, for each other after we’ve had offline conversations.
Contributors are more than welcome to make pull requests but they have to take the chance that a PR might come in slightly later than another contributors PR.
All too often we’ve seen it happen over the years that well-meaning contributors show interest in solving an issue (and sometimes get assigned) but the PR never comes.
To us, assignment is similar to putting something on our “weekly” to-do list. It’s not ownership or best-matched domain/area.
Thank you, @Ryuno-Ki
To avoid duplicated efforts on this, I assigned this issue to @dhananjayd1729 in the meantime.
@aardrian I will try to underline only those links which are actually in the body of the HTML page(i.e apart from the footer and navigation). Will that work?
A quick reminder that underlines can also be styled now, e.g.,