Unique links should have unique, meaningful text

[alundgard]

Current behavior

There are multiple unique IIIF Drag-n-drop links without unique, meaningful text. This could make it difficult to understand their behavior when navigating by screen reader. See WCAG SC 2.4.4 Link Purpose (Level A).

Steps to reproduce

Example page (/catalog): Parker Library - Search Results.

Possible solution

WCAG Level A: Understanding Success Criterion 2.4.4: Link Purpose (In Context).

See SODA's recommendations below.

Reported by SODA

Violation: Ensure link text is meaningful within context
Severity: Major

[Issue]
There are link elements that do not have meaningful text. There are multiple A element with an accessible name of 'iiif drag-n-drop' that is the same as another A element but doesn't go to the same HREF.

[User Impact]
Without meaningful text, screen reader users who navigate the page or navigate using a list of links (provided by their Assistive Technology, e.g., JAWS, VoiceOver, etc...) will not be able to discern the purpose of these links.

[Code Reference]

<div class="col-2 col-md-1">
  <a class="iiif-dnd float-right" data-turbolinks="false" href=...">
    <img alt="IIIF Drag-n-drop" src="..." width="30">
  </a>
</div>

[Recommendation]
Developers must ensure that links have meaningful text within context. This can be achieved by changing the ALT text or by using an aria-label, aria-labelledby to provide link purpose in context.

[ALT Text Example]

<div class="col-2 col-md-1">
  <a class="iiif-dnd float-right" data-turbolinks="false" href=...">
    <img alt="IIIF Drag-n-drop: Cambridge, Corpus Christi College, MS 002I: The Bury Bible" src="..." width="30">
  </a>
</div>

[ARIA-LABEL Example]

<div class="col-2 col-md-1">
  <a class="iiif-dnd float-right" data-turbolinks="false" href=..." aria-label=" Cambridge, Corpus Christi College, MS 002I: The Bury Bible">
    <img alt="IIIF Drag-n-drop" src="..." width="30">
  </a>
</div>

[ARIA-LABELLEDBY Example]

<h3 id="titleMs002I">Cambridge, Corpus Christi College, MS 002I: The Bury Bible</h3>
<div class="col-2 col-md-1">
  <a class="iiif-dnd float-right" data-turbolinks="false" href=..." id="linkMs002I" aria-labelledby="linkMs002I titleMs002I">
    <img alt="IIIF Drag-n-drop" src="..." width="30">
  </a>
</div>

[corylown]

There's a similar issue filed with EarthWorks we should review: sul-dlss/earthworks#1430

[dnoneill]

I went with aria-labeled by since I don't really think alt text is appropriate since it is supposed to describe the image not where the image is linking to.