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