Ability to apply an attribute to links in settings.

[dustinmazon]

Issue: A 2.4.4 Link Purpose (In Context)

Many sites including the sites I work on in CleanSlate encounter the following accessibility issue:

Link text used for multiple different destinations

Description of this issue:

The same link text is used for links going to different destinations. Users might not know the difference if they are not somehow explained.

Example: The default footer has a link to "Give" (the overall university giving form) and in my page content I have a link to "Give" going to a departmental giving form. Now there are two instances of this link with the same link text.

How to fix it:

Make sure links are distinguishable by just their link texts or WAI-ARIA labels ('aria-labelledby' or 'aria-label') to make it clear that they lead to different destinations.

**Example of the fix: <a href="https://linkexample.com" aria-labelledby="Value Name">Link Text</a>

Proposed Solution: CleanSlate's UI

Have the ability to apply a custom attribute in the link settings. There are several types of links that occur in a site:

• Content Page: commonly listed in a menu/nav
• Internal link: commonly listed in a menu/nav
• External pages: commonly listed in a menu/nav
• Blog Index: commonly listed in a menu/nav
• Text links: created or modified in the page editor

Each of these link types would need to have the option to fill in an WAI-ARIA label using the two new fields in the CleanSlate UI settings (the description probably needs some love):

• Groupset Title: Custom Link Attribute
• Field One Title: Link Attribute Name
• Field Two Title: Link Attribute Value
• Description: Custom link attributes are commonly used to apply WAI-ARIA labels to sites making them more accessible.

Where the attribute settings should be added:

Content Page:

Place new fields below Alternate Name

Internal Link Page:

Place new fields below Class

External Link Page:

Place fields below Class

Blog Index Page:

Place new fields below Alternate Name

Link Editor:

Place new fields below HTML ID

[adamjohnson]

I would say we have roughly 30 sites in Siteimprove with scores below 70% (the industry average). Our goal pre-OCR review is to have all of the sites we track in Siteimprove above 70%.

A theme for these 30 sites is the issue Dustin describes, "Link text used for multiple different destinations." There is no easy way to fix this from the UI when we're talking about auto generated navigations (r:site_menu).

Thus, adding text inputs for:

• HTML ID
• Attribute Name
• Attribute Value

Would be invaluable. We could fix thousands of accessibility errors by adding these three fields to the CleanSlate Create Page modal.

I would like to see these fields added to the following modals:

• Content Page
• Internal Link
• External Link
• Blog Index
• Blog Article

At this time, I don't believe it is required to add to the Mercury Link modal--although it would be nice to have down the road.

[adamjohnson]

We're going to have to revisit this issue.

Background and Demo: Visible labels are included in accessible names.

Assistive technology recently (with the rollout of WCAG 2.1?) decided that passing one id to aria-labelledby would make the element only read the value of what's in the element referenced by aria-labelledby. So, to fix this, we need to pass in the id of the current element and the id of the element we want to be a label.

More details in the link above.

Example

You can see an example of this error by running the Siteimprove Chrome Extension on this Academic Integrity page or by turning on VoiceOver and tabbing through the main and sub navigations.

Here's the HTML of the "Investigation & Resolution" link from the sub navigation on academic integrity (before):

<a class="nav-link text-decoration-none" aria-labelledby="aria__students-parents" href="https://academicintegrity.wvu.edu/students-parents/investigation-resolution">Investigation &amp; Resolution</a>

And here's what it would look like if it were fixed:

<a class="nav-link text-decoration-none" id="aria__investigation-resolution" aria-labelledby="aria__investigation-resolution aria__students-parents" href="https://academicintegrity.wvu.edu/students-parents/investigation-resolution">Investigation &amp; Resolution</a>

Here's a diff of the code above.

When we switch to the Siteimprove NextGen engine on September 22nd, 2021, this error will show up for anyone using this functionality in CleanSlate.