a11y: External/new window icons missing text equivalent

[iamjolly]

Description:

The external/new window icons on links are rendered using a CSS generated background image which does not have the ability to offer text alt with it like a foreground image would. This means that screen reader users who cannot see the icon do not get the same information as a sighted user does.

Screenshots:

WCAG SC

Success Criterion 1.1.1 Non-text Content (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...

Recommended fix:

Either of the following fixes would be appropriate for this issue:

• Use a foreground image of the icon (instead of CSS generated background image) with alt set to "opens in new window", or...
• Use visibly-hidden text within the link text (apply .usa-sr-only class to the span) to append "- opens in new window" to the link text, or...
• Remove target="_blank" and .usa-link--external class from the links.