[Resolved] Alt text and title text for query loop dynamic post images

[Tom]

I am using the GP query loop to create a blog section of dynamic post images and excepts (using one of the defaults in the block).

A screenshot of the process is below

https://snipboard.io/0y9fUr.jpg

How do I ensure the dynamic featured images have alt text and title text to comply with accessibility regulations? I have included this data for each image in the media library, and this data appears on the single post pages. However, I cannot work out how to ensure it displays in the GP query loop output.

Please advise. Thanks.

[Ying]

Hi Tom,

GB’s Dynamic image do have alt text if you inspect the html.

But it doesn’t come with title, just like the WP’s query loop block.

[Tom]

GB’s query loop dynamic images

do not

have alt text in the code output. That’s why I reported the issue. Of course, I checked the HTML. Perhaps you should too, as you will see there is no alt-text for dynamic post images.

I notice on this forum others have asked the same question, so why write such a response?

As it stands, GP is

not

WCAG compliant, and I cannot use it for client websites.

As I paid for a lifetime subscription to GP – no small investment – please provide better service.

You can replicate the issue with a clean GP theme, no plugins and on any server.

Thanks.

[Fernando]

Hi Tom,

Just tried adding a GB Image Block with GB 1.5.0-beta.1 version and there is indeed an alt text.

See this for reference: https://share.getcloudapp.com/mXuxRpv7

Also see: https://share.getcloudapp.com/KoujzdkZ

Can you try using GB 1.5.0-beta.1 and see how it goes?

Hope this clarifies. 🙂

[Tom]

Hi Fernando, your screenshot illustrates a featured image.

My issue relates to something different. When you use the *query loop* to pull a featured image, the alt-text is not outputted in the HTML.

Here’s the issue I raised.

I am using the GP query loop to create a blog section of dynamic post images and excepts (using one of the defaults in the block).

A screenshot of the process is below

https://snipboard.io/0y9fUr.jpg

Try using the query loop, select the default options for layout, and inspect the HTML to replicate.

[David]

Hi there,

is it possible to see your site ? as we are getting mixed results, for example heres one of my tests which is the image block within a query loop:

And in this instance i do have the ALT tag.

[Tom]

Did you use the GB query loop?

[Tom]

I checked your code. Your html output is placing alt text next to the scrset, not the image file. Therefore not all screenreaders will pick up the alt text for accessibility.

To illustrate the problem. Use Chrome. Go into inspector tools. Run the inspector pointer over the image. Examine the popup with image information. With a correctly formatted alt text, the image should have an entry under “name”. The featured images pulled from the Query Loop do not.

[David]

Yes, its 100% GB Query loop and the Image block.
It would be good if we could see what is happening on your site, there may be a conflict of a bug we’re not aware of.

Are we able to see the site ? And it would be great if we could get a temporary admin login so we can whats happening behind the scenes.

[Tom]

Here’s two versions of the same site to illustrate the issue.

Site running with GP and GB: https://snipboard.io/MT3dgs.jpg
Site running on another theme: https://snipboard.io/1j9te3.jpg

See the difference under accessibility – name.

[David]

If i check the Accessibility panel i see the Name – and thats referencing the Alt Text:

[Tom]

I repeatedly tried to provide you guys with evidence to replicate the issue but you don’t seem to want to know.

For the final time, your theme doesn’t output alt text properly or in a WCAG complaint manner.

Ok. I give up. I’ll use another theme. It’s a shame, I liked the look of GP, but I cannot risk being sued if it’s not WCAG compliant.

[David]

I am sorry – i do not intend to cause frustration and i am not denying there may be an issue.
I am by no means an expert in Accessibility and are open to understanding more, but presently my local tests show that:

1. the ALT tag is output ( if the image meta is available ).
2. the TITLE tag is not output on the front end ( i am looking into this, but it is not required for accessibility ).
3. images Pass Accessibility tests in Lighthouse and WAVE

My accessibility tests are by no means conclusive and we’ll seek further advise.

As a final note – the blocks you’re using are part of GenerateBlocks 1.5 – which is still in Alpha release, so if there is an issue it is the perfect time to address it and put a fix or improvements in place.

We are very open to take advise on this, so if you do have any other information regarding this i would be happy to learn.

[Tom]

Thanks for your reply.

I’ll see if I can find a better way to illustrate and explain this and get back to you.

[David]

Theres a few issues on our GitHub that are semi related that we are addressing and ill be talking with team today and we’ll perform some accessibility tests to see if theres any holes.

[Author]

Posts