[Link]: Inline option should be same color as text and underlined by default

[mjabbink]

No description provided.

[alisonjoseph]

We are just using the link component directly from Carbon https://www.carbondesignsystem.com/components/link/code

@dakahn any input on the a11y for this?

[vpicone]

Moving this to the Carbon repo because we use their Link component and it should be resolved there.

I believe this is an actual issue for inline links. Per WCAG:

Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision).

While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.

https://www.w3.org/TR/WCAG20-TECHS/F73.html

[vpicone]

@dakahn curious if you have any insights here.

[mjabbink]

color alone cannot distinguish the inline link for sure. There must be an underline otherwise many cannot see the link at all making it pointless. Even in many cases that are not inline I recommend using the underline but optional is good. Example of no underline are anchor links and links in footer.

[snidersd]

@dakahn IMO this issue can be handled in the documentation. According to the Carbon Component usage documentation, links should be used primarily as navigational elements, and the style section has examples of horizontal and vertical link groups which are considered navigational links that are visually evident from the page design and context, as described in https://www.w3.org/TR/WCAG20-TECHS/F73.html, the failure is when links are used within the text, such as links in a paragraph or items in a list where some are different than others and are presented in colored text. See https://www.w3.org/TR/WCAG20-TECHS/G182.html.
The technique states that “Visual cues can take many forms including changes to the font style, the addition of underlines, bold, or italics, or changes to the font size.” Therefore an underline is one of a variety of ways to indicate the text is a link.

[vpicone]

Adding the additional requirement that the text-decoration should have the appropriate thickness in browsers that support defining this new property (Firefox, Safari, Safari IOS).

The feature is not yet supported in Edge or Chrome.

[mjabbink]

The Technique we want to use is underline as the very articles use in the above links. We do not want inline links to bold or Italic.

[vpicone]

@mjabbink per WCAG 2.0, an inline link is considered accessible if it has a 3:1 contrast ratio and an additional distinction is provided on hover.

[vpicone]

Design requirements:

• All links: blue by default, current color variant
• Regular links: underline on hover
• Inline links: always underlined
• Remove visited styles

[vpicone]

We went ahead and overrode/removed the :visited styles in the gatsby-theme per @mjabbink. Just a heads up that they're still very much a thing in Carbon.

[mjabbink]

👍