Images are exposed as text to accessibility API until loaded

[jnurthen]

When browsing a page with lazy loaded images using a screen reader the images are not reported as graphics until they are loaded. In the example below

    <h1>Foobar Flowershop</h1>
    <!-- Images Start -->
    <img src="images/flower1.jpg" alt="wibble"/>
    <img src="images/flower2.jpg" alt="too many flowers"/>
    <img data-src="images/flower3.png" class="lazyload" alt="flower again"/>
    <img data-src="images/flower4.jpg" class="lazyload" alt="flower"/>
    <img data-src="images/flower5.jpg" class="lazyload" alt="another flower"/>
    <!-- Images End -->
    <script src="lazysizes.min.js" async></script>

I get the following from the accessibility API

According to the HTML spec this is the correct behaviour and images without an src should expose the alt as text content. Problem is I can't see what would ever force the image to load when using a screen reader and populate the src attribute to make the image a graphic.

Potential solution is to add role="img" to the image until the script runs. This seems to correct the behaviour.

[aFarkas]

What tool is this?

My in browser tool gives me the following tree:

Potential solution is to add role="img" to the image until the script runs.

Yes this was also my thought.

[jnurthen]

@aFarkas yeah it looks fine in Chrome and Safari in my testing too. I was testing in Firefox. The tool is just the Accessibility Inspector which is part of standard Dev Tools (for at least a few versions).

According to spec the FF behaviour is correct.

[hiwelo]

:+1: to add role="img" to be as close as possible to the spec and to provide a good experience to users of assistive technologies on Windows. (one the most common configuration on Windows is NVDA + Firefox if I'm right)

[aFarkas]

other solution would be to add src=data:....

[hiwelo]

Like <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""> to display a transparent 1x1 gif?

It would ensure having a semantic image right from the beginning 👍

[aFarkas]

Yes, this was actually the old favored way. I removed this from all of my examples because browsers do not support progressive image loading and some browsers also tend to swap the images more slowly, if you use this pattern.

One thing to check would be wether the change of the virtual cursor also scrolls the page, then this is already fixed by default.