Picture Tag Using data-srcset Instead of srcset

Question

I'm currently validating my HTML and am getting errors because my picture tags uses data-srcset instead of srcset. My question is, if I'm using data-srcset do I HAVE to use the srcset attribute for valid HTML? It would seem so.

Example:

<picture>
  <source data-srcset="assets/media/images/attorneys/img-attorney.webp" type="image/webp">
  <source data-srcset="assets/media/images/attorneys/img-attorney.png" type="image/jpg">
  <img src="assets/media/images/attorneys/img-attorney.png" class="lazy" alt="Attorney"> 
</picture>

Answer 1

Yes; srcset is mandatory and the markup is not going to validate without it, even if you have substituted a data-srcset attribute with the same name. Custom data attributes can't substitute for standard ones of the same name for the purposes of validation; they're treated as custom and ignored.

However, if you intend to use data-srcset as a substitute for your own reasons, you may be able to write the standard srcset attribute in the HTML and use JavaScript to swap it out after the fact. Validators won't see this happening and will only see the srcset in the source markup. If you have client-side scripts that rely on this custom data attribute they may need to wait or listen for when this substitution has been performed.