[Bug]: 508 Compliance — USWDS footer links

Contact Details

No response

What happened?

508 compliance review revealed that the USWDS pattern for .usa-footer__contact-info a (links in the footer) is non-compliant.

The 508Helpdesk says:

…Links are expected to be underlined before hovering over with a mouse.

The rules are:

Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.

Virtually the same guidance is given in USDWS's link component:

Don’t rely on color alone to distinguish links. Site visitors should be able to distinguish text links from surrounding text. In most cases, include an underline or bottom border on text links, in addition to a consistent link color. Text links not distinguished with an underline need a contrast level of at least 3:1 with their surrounding text (the same as AA Large, or a USWDS magic number of 40) and should show an underline on hover. – What you shouldn't do

If we change this, we should contribute back to USWDS. However, we might first confirm with the owners of the design system if this is a known issue, and whether they agree it should be fixed — since, in this case, the links are inherently understood as clickable as they are an email address and phone number.

Steps to reproduce the behavior

View the footer. You can see that the phone number and email address are not different from the regular non-linked text.

Priority

low (inconvenience)

Relevant log output

N/A

Screenshots and additional context

Code of Conduct

[X] I agree to follow this project's Code of Conduct

navapbc / simpler-grants-gov