Accessibility with multiple links - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki
If at all possible, provide link text that identifies the purpose of the link. All links on a page are unique. See Writing helpful link text.
For web pages that list collections of library materials, there are often repeated elements for each (e.g. Finding Aid, Digital Collection). How can multiple links with the same wording on a single page still be accessible?
- Justin at Siteimprove support: An alternative is to put some screen reader only text inside the link’s html text to provide that heading again for users of assistive tech. The text could be visually hidden with CSS but allow screen readers and such to access that information to provide more description in the link. (see https://www.w3.org/WAI/WCAG21/Techniques/css/C7)
<a href="">Finding Aid <span class="offscreen-accessibility-text"> Bobbi Campbell Diary, 1983-1984, MSS 96033 -- UCSF</span></a>
<a href="http://www.oac.cdlib.org/findaid/ark:/13030/kt2w1024fw" >Finding Aid <span class="offscreen-accessibility-text"> Bobbi Campbell Diary, 1983-1984</span></a>
<a href="https://calisphere.org/collections/3684/">Digital Collection <span class="offscreen-accessibility-text"> Bobbi Campbell Diary, 1983-1984</span></a>
custom css
.offscreen-accessibility-text {
position:absolute;
left:-9999em;
line-height:0;
width:1px;
height:1px;
clip:rect(0, 0, 0, 0);
}
- Justin at Siteimprove support: If the hidden screen reader text isn’t going to work then aria-labelled by is a good option, although it will mean implementing unique IDs for all headings and links to be associated correctly.
Even with the correct markup, H80 or H81 will be flagged, because the automated check in Siteimprove can only do so much. We recommend marking them as "Can't fix" in the platform." See Accessibility Decisions
These solutions are simpler to implement and maintain, since they only require the proper structure without needing to add spans, IDs, etc.
Basically, the same text can be used for multiple links as long as the structure makes clear the parent of the link, thereby providing that context to a screen reader. In this example, although there are several links on the page that say Digital Collection, there is only one that is the child of each unique heading.
<h3>Bobbi Campbell Diary, 1983-1984, MSS 96-33 — UCSF</h3>
<ul>
<li><a href="http://www.oac.cdlib.org/findaid/ark:/13030/kt2w1024fw">Finding Aid</a></li>
<li><a href="https://calisphere.org/collections/3684/">Digital Collection</a></li>
</ul>
As noted in Accessibility Decisions, this can be handled site-wide or at the page level.
In this type of case we use page-level, or else Siteimprove won't alert us of the error on other pages.
When setting the decision, this note was added for future clarity:
All decisions we have made can be reviewed at Siteimprove Dashboard > Accessibility > All Decisions