Accessibility fixes for fancybox

[erinchambers]

• Applies the same accessibility fixes to Fancybox that we implemented in Orchid
  • Shifts to not-minified fancybox js file
  • Adds alt text and link text

[wkdewey]

Fancybox is working, but I do not see any alt text when I inspect in the browser, either on the thumbnail or on the image. Is there a change in the data repo too?

[erinchambers]

Oh weird, it looks like I only switch to the non-minified file and didn't commit the custom JS anywhere. I'll do that shortly. Thank you!

[wkdewey]

Does link text mean the title attribute ("Open larger image of text that follows")?

Is "Full-size image" the intended image alt text for the Fancybox images?

I am still not seeing alt text on the thumbnails but maybe the title is sufficient.

[erinchambers]

Yup! Full-size image is the intended title for now. For Cody, Nikki made an issue to revisit this after the deadline and see if there's any way to have Fancybox pull item metadata. I'll make an issue for Chesnutt as well.

I realize 'alt text' is a misnomer here for the thumbnails—since they're background images added with CSS, there's no way to actually add an alt="" HTML attribute to them. Instead, we're looking to just make sure the link has text content—something like this:

<a href="javascript:;" tabindex="0" data-index="2" style="{backgroundimageurlhere}">
  <span class="sr-only">View image 3</span>
</a>

Let me know if you're still not seeing the spans inside the links. Thank you so much for checking on all this!!

[wkdewey]

I see this on the thumbnail on the item page (example is from https://cdrhrailsdev.unl.edu/item/ccd.works00001:

<span class="pageimage"><a href="https://cdrhmedia.unl.edu/iiif/2/chesnutt%2Fccda.works00001.002.jpg/full/!2500,2500/0/default.jpg" rel="prettyPhoto[pp_gal]" title="Open larger image of text that follows" target="_blank" data-fancybox="gallery"><img src="https://cdrhmedia.unl.edu/iiif/2/chesnutt%2Fccda.works00001.002.jpg/full/!120,120/0/default.jpg" class="display&nbsp;" alt="" role="presentation"></a></span>

And this in fancybox itself:

<div class="fancybox-content" style="transform: translate(231px, 44px) scale(1, 1); width: 443.559px; height: 769px;"><img class="fancybox-image" src="https://cdrhmedia.unl.edu/iiif/2/chesnutt%2Fccda.works00001.002.jpg/full/!2500,2500/0/default.jpg" alt="Full-size image"></div>

Is "the link" something else that I am missing?

[wkdewey]

I don't see spans with sr-only anywhere when I view source on that page.