Adjust hyperlink underline style

[rtwell]

Adjust hyperlink underline style

• I’ve searched for any related issues and avoided creating a duplicate issue.

We have lots of links on lots of pages on VA.gov. In scenarios when there are many links in a list, it can be hard to scan lists because links in the list can be a bit verbose (which we cannot escape). One reason it's hard to scan is the underline for hyperlinks is so close to the typography itself.

Suggestion for a new component or utility?

I hypothesize one way to make links easier to read whilst keeping the underlines present is to offset (slightly) the space between the underline and the typography.

First, I want to make sure Sketch is displaying hyperlinks the same way a browser does:

Secondly, we'd want to offset slightly the underline from the text to make a link list more scannable, but retain the underline:

it's a subtle adjustment, but effective I think

[humancompanion-usds]

We are not sure this officially made its way to DSC however, it turns out that it is technically feasible to implement this:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

I'm not sure how we'd verify the positive benefits. My thought would be to prove out that the adjustment to the offset of the underline would be beneficial to legibility for low vision users. But in discussing potential typography changes I understand from @artsymartha68 that this is difficult to prove. Wondering if Martha or @davidakennedy has any suggestions about how we might verify the improvement here?

I do believe it will help with legibility of the text of a link. I also think it would help Link collections as would a slight increase in font-size for those collections, especially on Hub pages where the page is essentially a series of Link collections. Thus I will take this to DSC or find an a11y champion, if we believe there are a11y benefits to be had here.

[humancompanion-usds]

@rtwell indicated that he'd be game to try this out on the MHV landing page in the bottom 3 column content section that has 3 lists of links. Bumping this up in our queue so that if that does come to pass we can document this and update other landing pages.

[dcloud]

Prototype of increased text-underline-offset now visible on https://dev.va.gov/my-health/