Ability to specify image alternative text

[PeterBowater]

Summary

Currently, there appears no way to specify the alternative text for images, or the thumbnails when using the inlineGallery option.

This is really poor for accessibility, and harms SEO.

Basic example

https://www.freemansauction.com/auctions/books-and-manuscripts-1784/lot/1

Motivation

• Better accessibility for poor-sighted users
• Prevent SEO penalisation
• HTML conventions

Ideally we could specify it for each image, but the default should just be an empty string, i.e. alt="", once rendered.

[sachinchoolur]

Hi @PeterBowater,

It is already available - https://www.lightgalleryjs.com/docs/dynamic-variables/#alt

Just the pass the value via alt key

[PeterBowater]

Thank you @sachinchoolur ,

Can we look again please?

I have just run some further tests, as we don't have an alt text we want to display we must set an empty alt, if we try this, it fails to render the empty alt text.

Example (trimmed) code:

`const dynamicEl = images.map((value) => ({ src: img.original.url, thumb: img.thumb.url, alt: '', }));

useEffect(() => {
    if (lgContainer.current) {
        const inlineGallery = lightGallery(lgContainer.current, {
            container: lgContainer.current,
            dynamic: true,
            plugins: [lgZoom, lgThumbnail],
            dynamicEl,
        });

        inlineGallery.openGallery();
    }
}, []);

`

If I set alt: 'I AM THE ALT" it will add the alt attribute to the image tag.

However, the thumbnail images do not ever get an alt attribute even when set as above.

Perhaps ideally it should:

• If no alt key present then do not add alt attribute
• If alt key has a zero or > zero length add alt attribute with key value to both gallery and thumb images

Thanks for taking the time to respond.

Cheers,

Peter.