svimg icon indicating copy to clipboard operation
svimg copied to clipboard

Image elements do not have [alt] attributes

Open SimonPrammer opened this issue 1 year ago • 2 comments

I love this Repo, it makes using images so much better. Now I do have a problem though... it seems lighthouse does not detect alt tags on the <Image> component. Any tips?

SimonPrammer avatar Apr 06 '23 02:04 SimonPrammer

I did some quick research on this. svimg appears to be doing it correctly, assuming the dev passes an alt attribute to their Image component.

With the picture element, the source elements just provides alternate preferred image sources. If no acceptable images exist in those source elements, then final img element within the picture source will be tried. If the image doesn't exist at the img's src, then the alt tag will be shown. Because it waterfalls like this, alt is only needed on the final img element.

This is why MDN's example uses an alt tag on only the img element too.

Probably this can be closed because if there is an issue, it would be Lighthouse related.

jasongitmail avatar Jun 09 '23 00:06 jasongitmail

I don't think that's the reason... I would expect Lighthouse to handle that.

I'm guessing this is happening because svimg defers setting the alt tag on the image until the browser initiates the load of the image, to avoid flashing the alt text on the screen while the image is mid-load. I would guess that Lighthouse is somehow not triggering the image load, or is catching the element before the alt attribute is dynamically set during load.

For normal users I would guess this is unlikely to be impactful since you'd trigger the image load and the alt text as you navigated the page, but I'll probably want to double check whether this behavior negatively impacts accessibility software / screen readers.

xiphux avatar Jun 19 '23 21:06 xiphux