Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cannot navigate to images with loading=lazy attribute #238

Closed
scottaohara opened this issue Aug 8, 2019 · 7 comments

Comments

@scottaohara
Copy link
Member

commented Aug 8, 2019

Summary

Chrome 76 introduced their current implementation for lazy loading content. for instance:

<img loading='lazy' src='https://placekitten.com/400/400'
  width='400' height='400' alt='a lazy loaded random cat photo'>

However, when testing a page of lazy loaded images with JAWS, JAWS will not navigate to images that have the loading=lazy attribute, regardless if loading was deferred or not.

Example:

  1. With JAWS (latest) and Chrome 76, go to https://scottaohara.github.io/tests/html-img/lazy-img-links.html
  2. Attempt to navigate to images in the document using G quick key.

Expected result

Should be able to navigate to any image in the document (all have been provided alt text).

Actual result

Only images that lack loading=lazy will allow for navigation by graphics (2 in the test file).

There are 73 total graphics in the test file.

Additional Information

While the graphics cannot be directly navigated to, their alt text content is still announced to JAWS and if navigated to by the virtual cursor the content will announce as a "graphic".

testing with macOS VoiceOver and Chrome and NVDA 2019.1.1 and Chrome, the graphics remain discoverable by quick key navigation.

JAWS version and build number

JAWS 2019 august release

Operating System and version

Windows 10

Browser and version:

Chrome 76

@scottaohara scottaohara added the JAWS bug label Aug 8, 2019

@JAWS-test

This comment has been minimized.

Copy link

commented Aug 9, 2019

I have another output with JAWS 2019 and Chrome 76:

  • even when reading with arrow keys, the photos are not output as graphics (I hear only the role "link" and the label in the alt attribute)
  • The graphics are also not displayed in the overview with INS+Ctrl+G.
  • the cause seems not to be the loading attribute, but the link around the graphics. If I remove the a element around the graphics in the developer tools , JAWS will output them correctly. But if I remove the loading attribute, nothing change.

If I add at https://mathiasbynens.be/demo/img-loading-lazy alt attribute with content at the img element, the output is fine (these image are not inside links)

@JAWS-test

This comment has been minimized.

Copy link

commented Aug 9, 2019

Further research has shown that it's definitely not the loading attribut. Instead, JAWS 2019 no longer outputs graphics within links if the graphic is the only link content.

The problem does not occur in IE and Firefox.

The problem does not occur with Chrome and old JAWS versions (tested with JAWS 18).

Check:

<a href="#"><img  src='test1' alt='1'>test</a>
<a href="#"><img  src='test2' alt='2'></a>
<img src='test3' alt='3'>

test2 is not output because the link has no other content

@scottaohara

This comment has been minimized.

Copy link
Member Author

commented Aug 9, 2019

Thank you for the retest @JAWS-test

After rebooting my machine, I'm now getting the results that match what you're reporting.

JAWS + Chrome don't announce graphics within links, but testing with Firefox 68 graphics are announced within links when navigating by G.

There isn't the issue with lazy loading images as I had previously experienced with even graphics that weren't within links.

As such, I'll close this issue as clearly something was amiss yesterday that no longer holds true in retesting.

Thanks again.

@scottaohara scottaohara closed this Aug 9, 2019

@JAWS-test

This comment has been minimized.

Copy link

commented Aug 9, 2019

The question would be whether one regards the not output of the single graphics within links as a problem...?

@scottaohara

This comment has been minimized.

Copy link
Member Author

commented Aug 9, 2019

Agreed, especially since this behavior is only with jaws 2019 and chrome.

but, since the reported issue is not an issue, better to file that separately.

@JAWS-test

This comment has been minimized.

Copy link

commented Aug 9, 2019

The same behaviour also occurs with buttons: graphics within these are not output by JAWS in Chrome, but are output in IE 11. However, Chrome may be closer to the specification here, since the contents of buttons implicitly have role=presentation (at least the ARIA buttons with role=button)

@scottaohara

This comment has been minimized.

Copy link
Member Author

commented Aug 9, 2019

the button role, regardless if exposed from a native HTML element or ARIA attribute, should cause subtree elements to be presentational. so yes, behavior is correct in chrome, and IE11 does what IE11 does.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.