search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.47k stars 1.73k forks source link

Images are exposed as text to accessibility API until loaded #653

Open jnurthen opened 5 years ago

jnurthen commented 5 years ago

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

Screen Shot showing accessibility tree from FF with 2 images and 3 text objects

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 commented 5 years ago

What tool is this?

My in browser tool gives me the following tree:

Bildschirmfoto 2019-05-08 um 22 15 52

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

Yes this was also my thought.

jnurthen commented 5 years ago

@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 commented 5 years ago

:+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 commented 5 years ago

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

hiwelo commented 5 years ago

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 commented 5 years ago

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.