SC 253 -- Link text states "external" up front should be at end

[damiansian]

URL

https://demo.fileyourstatetaxes.org/

Issue

When links are external, they are being announced as such via CSS content before text injection where the text is SR-only. This approach is okay, so long as we honor the label in name principle which states:

A best practice is to have the text of the label at the start of the name.

WCAG

SC 2.5.3 Label in Name (Level A)

User impact

Non-sighted users often navigate a page based on the links on a page. They can pull up a list of links not unlike a table of contents. When a screen reader pulls up a list of links, they'll hear all the information about the link being external first.

Voice control users will speak aloud a command like:

Click sign in here

That command would work perfectly. However...

Click IRS direct file

Would not work because the link's accessible name starts with the word External.

The accessible name of links must start with the visible text. Then you can append the information about the link being external.

Note

Identifying if links are external or open in a new window is not a WCAG requirement but it does offer value for navigation. I bring this up for your edification mostly.

Suggested fix

Current

a[href^='http']:not([href*=request_domain i])[target="_blank"]::before,[href^='http'].button--link:not([href*=request_domain i])[target="_blank"]::before {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
    content: "External, opens in a new tab"
}

Should be

a[href^='http']:not([href*=request_domain i])[target="_blank"]::after,[href^='http'].button--link:not([href*=request_domain i])[target="_blank"]::after {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
    content: "External, opens in a new tab"
}