Img Alt Text in Lightbox

Hi Dan,

I’ve tested a couple scenarios where image alt text is outputted incorrectly or not at all inside the lightbox.

Plugin settings which I’ve changed from the default:
Output Valid HTML5: Checked
Disable Lightbox CSS: Checked (styles copied to style.css)
Separate Galleries in Post: Checked
Position Fixed: Checked
Interface Scroll Bars: Unchecked
Use Class Method: Checked
Do Not Auto-Lightbox Images: Checked
Secondary Lightbox Use iFrame: Checked

When I add an image to a lightbox via image link using the primary lightbox, there is no alt text outputted at all in the lightbox. And when I add an image to a lightbox via text link using the secondary lightbox, the alt text output is the same as the img src (so just the file url).

Examples:

<a class="lbp_primary" rel="lightbox[examplelightboxname]" title="Example Title" href="/example-picture-500x500.jpg"><img src="/example-picture-250x250.jpg" width="250" height="250" alt="Some descriptive text." /></a>

If I visit the post and look at the image source code with Inspect Element, the output is correct (image used is 250), and it contains alt text. Then if I click on the image to activate the lightbox, by clicking Inspect Element, I can see that the correct image loads (image used is 500), but there’s no alt text, even though the link title is displayed as a lightbox caption.

It would be best to output alt text that matches the img alt text. I’ll explain why using the provided link title wouldn’t be a good idea a little further on…

<a class="lbp_secondary" rel="lightbox[anotherlightboxname]" title="Another Title" href="/another-picture.jpg">Click to View</a>

In this case, there’s no image output on the page, so if I click the link text, the image loads in the lightbox, and the link title displays as the lightbox caption. Again by using Inspect Element, I can see that it’s the correct image, and this time there is alt text included in the source code, but it’s the same as the img src — just the file url.

Here it would be fine to output the link title as the img alt text.

Two reasons I can think of why these changes are important:

1) Accessibility for screen-reader users (which is why providing the link title as the alt text in the first example above would be a bad idea, because screen-reader users would be subjected to hearing the same thing multiple times, which is overwhelming / confusing / annoying.

2) Pinterest! If a website allows the Pinterest hover button on its site, it appears on images in the second example above, and Pinterest uses alt text as the Pin description.

I hope you can help me figure out how to add the alt text. I don’t mind playing with some code a little — especially with guidance 😉 I’ve had a look through the plugin files but I haven’t yet found where the html is generated/output. If you can point me in the right direction to get started, I’d really appreciate it!

Thanks for this powerful plugin 🙂

https://wordpress.org/plugins/lightbox-plus/