VoiceOver support in next/image

[shanly-suepaul]

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

12.20.1

What browser are you using?

Chrome

What operating system are you using?

macOS 11

How are you deploying your application?

next start + Vercel

Describe the Bug

When using next/image images that are below the fold, the images are loaded using visibility: none. This causes screenreaders to ignore the element and not read it, even though scrolling the element into the viewport would display the element for sighted users.

Expected Behavior

VoiceOver should read and scroll to next/image images below the fold.

To Reproduce

See repo here: https://github.com/myplanetdigital/voiceover-next-image-bug and deployment here: https://voiceover-next-image-shanly-myplanet.vercel.app/

Steps to reproduce:

1. Go to the deployment with VoiceOver on
2. Try to navigate using the voiceover cursor (VO+left, VO+right)
3. Note that the UL is announced as having four items, but only one (the one above the fold) is read.

I believe this is due to the use of visibility: hidden, which prevents screen readers from parsing an element. I don't understand the purpose of that rule as the images are already defaulting to lazy loading.

[nersoh]

Maybe opacity property could be applied instead?

[shuding]

This is indeed caused by visibility: hidden which was introduced in the old logic and it's safe to remove it now.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.