search

beekai-oss / react-simple-img

🌅 React lazy load images with IntersectionObserver API and Priority Hints
MIT License
989 stars 41 forks source link

Placeholder does not have `alt` attribute #90

Closed xxczaki closed 4 years ago

xxczaki commented 4 years ago

Describe the bug When I test my site using Lighthouse, either in the browser or using ex. the web.dev platform, I get a lower score in Accessibility, as well as SEO.

When I click on img on the Failing Elements list, it shows the exact element that fails:

By the look of things, it is the SVG placeholder.

To Reproduce Steps to reproduce the behavior:

using Chrome browser (recommended)
  1. Go to kepinski.me in incognito mode
  2. Open DevTools
  3. Go to the Audits tab
  4. Use the default configuration & click on the Run audits button
  5. Wait for the audits to complete & see warnings
using web.dev platform
  1. Go to web.dev
  2. In the Enter a web page URL input enter https://kepinski.me
  3. Click on the Run audit button
  4. Wait for the audit to complete & see warnings

Expected behavior The placeholder should have an alt attribute so that Lighthouse would not report any warnings related to that.

Screenshots Already included them above.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Here is my image component (which uses react-simple-img): https://github.com/xxczaki/kepinski.me/blob/37ba4c1e1a5ac2fafc494e93e38de1376ad439c8/components/me.js#L17

bluebill1049 commented 4 years ago

thanks @xxczaki for the issue report. want to submit a PR for this fix?

xxczaki commented 4 years ago

@bluebill1049 Sure, here is the fix: #91 :smile: