search

w3c / accname

Accessible Name and Description Computation
https://w3c.github.io/accname/
61 stars 23 forks source link

accname and lazy loader scripts #162

Open dd8 opened 2 years ago

dd8 commented 2 years ago

There's an interesting issue with lazy loaders and the accessible name calculation.

Lazy loader scripts/polyfills (as opposed to the loading=lazy attribute) use display: none or visibility:hidden for images below the fold to avoid fetching the image, then make the image visible when it scrolls into view: https://web.dev/browser-level-image-lazy-loading/

This can result in the following problem:

<a href='1'><img src='1.png' alt='One'></a> <!-- accname: 'One' -->
<a href='2'><img src='2.png' alt='Two'></a> <!-- accname: 'Two' -->

<!-- following links are below the fold, so the images are hidden -->

<a href='3'><img src='3.png' alt='Three' style='visibility:hidden'></a> <!-- accname: '' because img is hidden-->
<a href='4'><img src='4.png' alt='Four' style='visibility:hidden'></a> <!-- accname: '' because img is hidden -->

This results in links below the fold not having names when the command to list links is used. It's not usually a problem when reading sequentially because this scrolls stuff onto the screen (though race conditions mean the name may sometimes be calculated before the lazy loader script has a chance to run)

This is really tough to investigate because Dev Tools scrolls the hidden image onto screen when debugging, making it visible and giving it a name, so any user reports of the problem may get flagged as user error or unreproducible.

I'm not suggesting the accname calculation needs to change, but it might be worth documenting somewhere as a note since it's hard to diagnose, and not very obvious.

MelSumner commented 2 years ago

I think this is why it is generally recommend to put an empty alt attribute on the <img> and instead use an aria-label on the <a> (or other parent element).

Another approach would be for the polyfill to add aria-hidden="false" to the image: 

<img src="https://placekitten.com/500/300" style="visibility: hidden;" alt="cute kitten" aria-hidden="false" />

I wonder if this should be documented here, or with the lazy loader scripts/polyfills? Seems like a bug with their implementation rather than an oversight of the spec. WDYT?

scottaohara commented 2 years ago

the aria-hidden=false suggestion would only work in Safari though.

jnurthen commented 2 years ago

@MelSumner I agree this should be documented in the lazy loader scripts. Does anyone know if issues are filed?

dd8 commented 2 years ago

I don't think filing issues will scale - there are thousands of lazy loader scripts on Github.

There are 3,448 repositories with "lazyload" in the repo name, and another 8,038 repos are returned when searching for "lazy load" (some of which probably overlap with the 3,448 lazyload repos). And > 10 million lines of Github code containing the word "lazyload"

There will be even more in private Github repos, and lots more in site specific scripts not in hosted on Github

I think it needs documented somewhere central, but the spec probably isn't the right place. Best place might be the Accessibility Concerns section of the MDN article for img https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#accessibility_concerns