svimg
svimg copied to clipboard
Image elements do not have [alt] attributes
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?
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.
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.