Error: Element img is missing one or more of the following attributes: alt, src.

Hi @gobbetto,

Can you provide more details about what test you did?

Thanks in advance,

Phill

hi,

thanks for your answer
I took the test using https://validator.w3.org
there are several errors affecting the plug-in
at least from what I could understand

thanks

hi @gobbetto

The alt attributes will be added if they are available for each attachment.

Regarding the src attribute,
The W3 validator does not run javascript on the page unfortunately.
The javascript inside FooGallery sets the src attribute when the image is loaded (via lazy loading).

We have been asked to correct this before, and the only way to get it validating, is to add a dummy src value (which will need to point to a 1×1 transparent pixel). This will add to the HTML output. I can add this in, as a setting. What are your thoughts?

hi,
well, I honestly have no idea, I’m not an expert
what do you mean by lazy loading?

can i do something when i upload pictures?

for the alt attribute I found this code online:

//creo la funzione
function alt_immagini($html, $id) {
	return str_replace('alt=""','alt="'.get_the_title($id).'"',$html);
}
add_filter('image_send_to_editor', 'alt_immagini', 10, 2);
//10 è il parametro $priority predefinito
//2 è il $accepted_args cioè il numero di parametri assegnati alla funzione
function auto_alt_immagini($attributes, $attachment){
	if ( !isset( $attributes['alt'] ) || '' === $attributes['alt'] ) {
		$attributes['alt']=get_the_title($attachment->ID);
	}
	return $attributes;
}
add_filter('wp_get_attachment_image_attributes', 'auto_alt_immagini', 10, 2);

to put in the function.php file

for the rest I don’t know, I refer you to your advice

thanks

no one can help me?

thanks

Hi @gobbetto,

What Brad was saying was that the W3 validator does not execute javascript code on the pages it is validating. That means that it only ends up seeing part of the page without additional output that is generated on the fly when certain events happen.

In FooGallery we use a “lazy load” option to only load visible images on screen as the website visitor moves down the page. This speeds up the loading time of pages significantly as the visitor is not waiting for many images that are out of sight to load in the background.

The “lazy load” function continuously loads new images and displays them as the user scrolls down the page. Part of that function also updates and outputs attributes associated with the images such as the src, alt tags etc.

So the W3 Validator only sees part of the picture but not the full page and because it doesn’t mimic what a human being does (scrolling down a visible part of the page) it generates warnings.

Brad’s suggested solution is to load the page with all of the off screen images set to display a 1×1 pixel transparent image. That will provide a src tag that will pass the W3 Validation test even though it’s not a real image. The moment the visitor scrolls down the page the real images are loaded and all of the tags updated.

So in summary:

The W3 Validator is giving false readings because it doesn’t act like a human visiting the page and hence doesn’t end up loading all the images outside of the initial viewing area. While the intent of the W3 Validator is to help identify issues with pages, in this instance it’s misinterpreting pages that have not yet fully loaded (on purpose) with being broken. It’s safe to ignore these particular warnings.

thanks for your answer,
so, if I understand correctly, those errors encountered by W3 Validator are not real errors and do not cause problems for the page
right?
thank you