[Resolved] If possible, please add ALT attribute to sticky and mobile image

[Maarten]

Hi support,

First thanks for this amazing theme, it rocks! However I have a question…

I am trying to fix the errors I got on https://validator.w3.org/nu/#textarea for my homepage that has a very big review.

All is well but when I add a mobile image or the same logo for sticky header and scroll down it works but at https://validator.w3.org/nu/#textarea it will show this:

Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

From line 78, column 6; to line 78, column 103

If I remove the logo for mobile or sticky header on desktop/mobile and set it to text the error is gone.

Thanks for the help in advance

[Tom]

Hi there,

The alt tag should exist by default. It should take the site title value set in Customize > Site Identity. Can you link us to your site so we can take a look?

Thanks!

[Maarten]

Hi Tom,

Thanks for your reply!

The site logo to replace the site title and then using the check-mark to remove the title and subtitle, does work I think and uses a ALT but this is issue is happening when using a site logo on scroll and sticky header and the sticky header on mobile.

You can select 3 site logos – 1 for main site, 1 for main header on sticky and 1 for main header on mobile.

I wanted to have a sticky header on the homepage and when a user scrolls down the new logo is being used on the upper left in the main header.

Same for mobile.

I used to make 3 different sizes of the main website logo but now it also seems to work to use the main logo for sticky header on scroll and for the mobile version of that.

These 2 seems to not have a ALT tag in HTML source.

The header when sticky and picks up the logo to display on scroll down seems to use an other logo.jpg then set as main header logo that replaces the website title.

As this is my development server I cannot share a link but when I am back home in some days I could try to make a screenshot of the source code from the homepage if that may help a bit more.

Thanks!

[Tom]

Hmm, those should have the same alt tag as the main logo.

Any chance you can throw the site up on a temp live server when you get a chance? Seeing the source might help, but actually being able to dig around will definitely help.

Let me know 🙂

[Maarten]

Hi Tom,

If I make my chrome browser small like on a phone and look at your source there are alt tags after every img tag. However when I add the special logo for sticky on scroll in the header using customizer, it might not give me the option to enter the alt text in the add media field from WordPress – I think when I selected the logo a second time it when straight back to customizer.

Maybe if I have to setup the alt in media library somewhere else, all my images do have tags and names that were made in media library by hand.

I will check it later again when I can work on this site again but for now I will remove the sticky header and sticky logo for desktop and maybe also for mobile as well. 1) the W3 html source check error is now gone and 2) more important… a sticky header does nothing for conversions.

A sticky sidebar does something for conversions but a sticky header will not call to action does not (this does not solve the alt error on a W3 test, but for now I just remove sticky header on scroll and mobile)

I will still stry to find the source from my page were the logo is, I will make a new logo with the name : logo-mobile.jpg so that it can be discovered easier in the source code of the page.

Will let you know soon.
Thanks!

[Tom]

The alt should always be your site title – it won’t grab the alt tag from the media library. The site title alt should be there regardless of location (site logo, sticky logo etc..).

[Longinos]

Hi
Sorry for spamming this post but i have the same issue: sticky logo don´t have any alt.
In the file generate-menu-plus.php the filters generate_logo_output and generate_sticky_navigation_logo_output don´t seem similar. The 1st generate the site-logo and have input parameters ( $logo_url, $html_attr ) but the 2nd don´t have it. In the array $html_attr is where the alt is defined.
P.S. As a workaround i have modified the file and added an alt=”Logo” to the sprintf.

[Tom]

Ah yes – you’re right. Just fixed that in the next version 🙂

[Maarten]

Thanks Longinos for that! I was also looking for those file, good that this was found.. thanks Tom.

Not to open a new topic.. just one thing left…

Do you have any idea if the logo is set to upper left corner in the middel (contained) and the menu is on the upper right (contained) how come sometimes programs put the logo on double lines so that the space of the header is increased.

If I switch from desktop view with Firefox to responsive mode and select a phone all works great and the items stay aligned.. but If I make the desktop windows smaller it makes double space in the main header.

Also if I make a rapport with SEO PowerTool Website Auditor for TF-IDF it also puts the menu below the main logo if you look at it from the right to left side.

Hard to explain but in other words I would like to keep it aligned if possible… you can also zoom in the desktop view and it will flip and make double size.

There seems to be an option to have desktop mode or logo fixed aligned to the right.. but no idea if this will fix it.

Other than that thank for this perfect best theme ever!

[Tom]

Hi there,

Any chance you can open a new topic and include some screenshots/the URL to your site?

Thanks! 🙂

[Maarten]

Yes, I will do that – No problem 🙂

[Author]

Posts