BUSINESS CONSULTING — Photo Gallery Alt Attribute

[Casara Clark]

Hi!

I’m working over here on this page right now: https://www.ramolawpc.com/refresh/news/

I’m using the PHOTO GALLERY with Business Consulting and love how it looks (everything under OUR CLIENTS).

Now this company wants ADA compliance (I’ve got some other posts about this). And this page has multiple flags, unfortunately.

EVERY image pulling from the PHOTO GALLERY is getting flagged for this reason:

An images was found with alternate text that is the same as the text provided in the image caption, title attribute or body of a link. This creates redundancy and should be avoided. Remove any title attributes or leave the alt attribute blank if it is the same as the text in the body of the link. WCAG 2.1 (Level A) - 1.1.1

The code it shows (for each image/project from the Photo Gallery) is this:

<a class="image-zoom" href="https://www.youtube.com/watch?v=ABhh1HifqJY" rel="prettyPhoto[gallery]" title="Beverly Luff Lin"><div><span class="image-block"><img src="https://www.ramolawpc.com/refresh/new/wp-content/uploads/2020/10/beverly-luff-lin-horitzontal-poster-resized.jpg" alt="Beverly Luff Lin" title="Beverly Luff Lin"></img></span><h3 class="gallerytitle">Beverly Luff Lin</h3></div></a>

So the problem is: alt=”Beverly Luff Lin” title=”Beverly Luff Lin”

Now I didn’t enter that ALT. And I don’t see any option in the Photo Gallery to change the ALT attribute. So I’m guessing the photo gallery is auto-generating that alt attribute? Perhaps from the title? Is there a way to delete that alt or be able to edit it?

So I don’t have a flagged ADA concern for every image on this page?

Thank you!
Casara

[Sonl Sinha]

Hi,

We have already replied on your another post.

Regards,
Dave

[Casara Clark]

This post has a different problem actually.

The problem here is that any time I utilize the Photo Gallery, the alt text is being pulled/generated from the title (I think) and creating redundant information.

You can see in this picture here: https://www.ramolawpc.com/refresh/new/wp-content/uploads/2020/12/beverly-luff-lin-alt-text.jpeg

…That I did manually modify the alt text attached to the image in the photo gallery. I chose wording that would not be flagged as redundant.

Yet, the code (copied in my reply above) clearly shows a different alt text, one that is an exact match to the title text. So the Photo Gallery ignores/overrides what I entered and seemingly auto-generates its own alt text based on the exact text of the title.

This ONLY happens in the photo gallery. And I’d love it to not happen.

(In that other post, there’s no alt text being generated at all. So, very different.)

Thank you!

[Sonl Sinha]

Hi,

Kindly show us your Photo Gallery page URL please?

Regards,
Dave

[Casara Clark]

Do you just mean the URL for the page of the website that has the photo gallery?

Or is there some URL I can/should pull that would be specific to only the photo gallery?

Assuming it’s the former, there are two pages that utilize the photo gallery.
The page linked in the very first post on this thread is the one that has three category-specific photo galleries (under OUR CLIENTS)! (I’d relink it again, but this post didn’t go through when I linked it and I understand that sometimes too many URLs is the cause of that).
This page has one category-specific photo gallery: https://www.ramolawpc.com/refresh/financing-legal/

I did some review in the theme files myself and within sktframe, in the corefunctions.php, I see this code, starting line 808:

		$pfStr .= '<li data-id="id-'.$j.'" data-type="cat-item-'.implode(' ', $slugAr).'" class="portfolio-item2">
 <a class="image-zoom" href="'.( ($videoUrl) ? $videoUrl : $imgSrc[0] ).'" rel="prettyPhoto[gallery]" title="'.get_the_title().'"><div><span class="image-block"><img src="'.$imgSrc[0].'" alt="'.get_the_title().'" title="'.get_the_title().'"/></span><h3 class="gallerytitle">'.get_the_title().'</h3></div></a></li>';

It seems to me that

alt="'.get_the_title().'"

might be the exact cause of my problem!

I would love it if the alt pulled from the ALT field in the media library INSTEAD of the title.

Do you know what code I would replace “‘.get_the_title().'” with to have it pull up the alt text instead?

Thank you!
Casara

[Casara Clark]

Just wanted to circle around about this. I’ve done some research and seen that some people intentionally have the alt text pull the title. Perhaps it’s new information that the ADA compliance software flags it as redundant then?

I found a couple of sources that say this is the code to pull up the alt text from the media library:

// retrieve alt (which is stored as metadata to a post)
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);

or this…

<?php $alt_text = get_post_meta($img_id , '_wp_attachment_image_alt', true); ?>
<h1 class="entry-title"><?php echo $alt_text; ?></h1>

Perhaps, I’ll have to just start experimenting (after backing up my site, of course), but since y’all are the experts, I’d love to see if you have insight on how to recode the Photo Gallery so the alt text is the alt text from the media library, NOT the title again.

Thank you!
Casara

[Sonl Sinha]

Hi,

Issue have been resolved. Kindly check and confirm.

Regards,
Dave

[Author]

Posts