Validation error

[Viktor19931]

Preliminary Checks

• [x] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

https://validator.w3.org/ give me bunch of errors relative to gatsby-image-plugin

1. The sizes attribute must only be specified if the srcset attribute is also specified
2. Element img is missing required attribute src
3. An img element which has an alt attribute whose value is the empty string must not have a role attribute (for image placeholder not passing alt attr)
4. : Element source is missing required attribute srcset

I think its a bug but if I am wrong please let me know. Thank you

Reproduction Link

https://codesandbox.io/p/devbox/goofy-bell-2gx8cm?file=%2Fsrc%2Fpages%2Findex.js%3A32%2C4

Steps to Reproduce

I use dynamic images in my project

Expected Result

I should pass html validation https://validator.w3.org/nu/?doc=https%3A%2F%2Famanitamuscariastore.online%2F

Actual Result

got plenty of errors with images

Environment

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  Browsers:
    Chrome: 122.0.6261.112
    Edge: 122.0.2365.80
    Safari: 17.2.1
  npmPackages:
    gatsby: ^5.12.4 => 5.12.4
    gatsby-cli: ^5.12.4 => 5.13.1
    gatsby-plugin-google-tagmanager: ^5.13.1 => 5.13.1
    gatsby-plugin-image: ^3.12.3 => 3.13.0
    gatsby-plugin-layout: ^4.13.0 => 4.13.0
    gatsby-plugin-manifest: ^5.13.0 => 5.13.0
    gatsby-plugin-mdx: ^5.13.0 => 5.13.0
    gatsby-plugin-minify: ^0.5.0 => 0.5.0
    gatsby-plugin-netlify: ^5.1.1 => 5.1.1
    gatsby-plugin-preload-fonts: ^4.13.0 => 4.13.0
    gatsby-plugin-react-helmet: ^6.13.0 => 6.13.0
    gatsby-plugin-react-i18next: ^3.0.1 => 3.0.1
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0
    gatsby-plugin-sharp: ^5.12.3 => 5.13.0
    gatsby-plugin-sitemap: ^6.13.0 => 6.13.0
    gatsby-plugin-styled-components: ^6.12.0 => 6.13.0
    gatsby-source-filesystem: ^5.13.0 => 5.13.0
    gatsby-source-stripe: ^4.0.0 => 4.0.0
    gatsby-transformer-remark: ^6.13.0 => 6.13.0
    gatsby-transformer-sharp: ^5.12.3 => 5.13.0

Config Flags

DEV_SSR: false

[Viktor19931]

@janson @mojodna @mudge @farcaller

Please check it out Not sure how to fix this one

Thank you

[efabrizio75]

I confirm this behavior.

Description

The W3C Nu Validator failed with errors when validating assets on my Gatsby blog. I investigated them and found them coming from the <StaticImage /> component available through the gatsby-plugin-image, regardless of what combination of properties I passed to the component.

1. Error: An img element which has an alt attribute whose value is the empty string must not have a role attribute.

<img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20he…#x27;%20version=&#x27;1.1&#x27;%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/>

2. Element source is missing required attribute srcset.

<source type="image/webp" data-srcset="/blog/static/4a9773549091c227cd2eb82ccd9c5e3a/e789a/gatsby-ic…a9773549091c227cd2eb82ccd9c5e3a/6766a/gatsby-icon.webp 128w" sizes="(min-width: 64px) 64px, 100vw"/>

3. The sizes attribute must only be specified if the srcset attribute is also specified.

<source type="image/webp" data-srcset="/blog/static/4a9773549091c227cd2eb82ccd9c5e3a/e789a/gatsby-ic…a9773549091c227cd2eb82ccd9c5e3a/6766a/gatsby-icon.webp 128w" sizes="(min-width: 64px) 64px, 100vw"/>

4. Element img is missing required attribute src.

img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 64px) 64px, 10…ng 64w,/blog/static/4a9773549091c227cd2eb82ccd9c5e3a/bf8e1/gatsby-icon.png 128w" alt="Gatsby icon"/>

5. The sizes attribute must only be specified if the srcset attribute is also specified.

<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 64px) 64px, 10…ng 64w,/blog/static/4a9773549091c227cd2eb82ccd9c5e3a/bf8e1/gatsby-icon.png 128w" alt="Gatsby icon"/>

Reproduction

Use this link to validate a sample page.

Alternatively, just visit the page and validate it from there.

I noticed the same problem with both static and dynamic images. The problem exists in the build and development environment.

Environment

  System:
    OS: macOS 12.7.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    gatsby: ^5.13.5 => 5.13.6
    gatsby-plugin-feed: ^5.13.1 => 5.13.1
    gatsby-plugin-image: ^3.13.1 => 3.13.1
    gatsby-plugin-manifest: ^5.13.1 => 5.13.1
    gatsby-plugin-purgecss: ^6.2.1 => 6.2.1
    gatsby-plugin-sharp: ^5.13.1 => 5.13.1
    gatsby-plugin-sitemap: ^6.13.1 => 6.13.1
    gatsby-remark-autolink-headers: ^6.13.1 => 6.13.1
    gatsby-remark-images: ^7.13.1 => 7.13.1
    gatsby-remark-prismjs: ^7.13.1 => 7.13.1
    gatsby-remark-responsive-iframe: ^6.13.1 => 6.13.1
    gatsby-source-filesystem: ^5.13.1 => 5.13.1
    gatsby-transformer-remark: ^6.13.1 => 6.13.1
    gatsby-transformer-sharp: ^5.13.1 => 5.13.1
  npmGlobalPackages:
    gatsby-cli: 5.13.3

Configuration flags

None

Next steps

I am willing to step in and look at the plugin myself if some kind soul points me in the correct direction and suggests ways to set-up a good debugging environment, because I have never debugged core features of a framework in JavaScript.

Please reach out to me directly, and I hope I can be of service here. Thank you.