Advice on accessibility for masonry grid images

Hi Mike,

Thanks for looking into this. Yes, that is the exact error from the WAVE tool: “Empty Link: A link contains no text” on the masonry gallery image links (the thumbnails with links to the lightbox).

What you suggest is actually what I already have: each image automatically has the filaneme as title.
Yet in my setup the accessibility compliance test still shows empty link. So there must be something else different in my setup than in your testing environment.

What’s different in my setup is that I have in my functions.php code to hide the tooltip on the images on hover:

// Hide image filename (alt text) displaying on hover
// NOTE: this ALSO removes the ability to use TITLES (="captions") in the lightbox galleries!
// Added query to also remove title on hover in portfolio galleries
function remove_title_attr(){
?>
 <script>
jQuery(window).load(function(){
jQuery('#wrap_all a').removeAttr('title');
jQuery('#wrap_all img').removeAttr('title');
jQuery('.av-masonry-image-container').removeAttr('title');
});
 </script>
<?php
}
add_action('wp_footer', 'remove_title_attr');

I thought that may have been interfering, but removing it makes no difference.
The empty link error only disappears when I set the masonry gallery images to “Display Title”, but that is not how I want it: I like the clean image only look. Plus, I use the image filename as the title (and there is no way I am going to manually enter different titles in the media library manually for all since I don’t use them anyway), resulting in a “Redundant title text” error. So that’s two reasons why I cannot use that.

Can you take a look? Details in private field.

Related issue is (on the Galleries overview page which links to all individual masonry galleries) both the featured image and the title of the gallery are a link, resulting in the accessibility alert “redundant links: adjacent links go to the same URL”.
You can see this on the “Impressions” Portfolio grid.

Is there a way to either unite both links (featured image and title) or if that cannot be done to effectively hide the title links programmatically?

Thanks for your help and time,
Rob

Hi Mike,

I tried out the script you gave me instead of the one I had, and it does not make a difference. I had already tried to remove that entire code from the functions.php (like I mentioned earlier above) to find out if that was the culprit, but it did not resolve the issue. Like you said, with the “hide filename on hover” scripts removed the image titles are nicely visible in the code (without the script), as below:

<a href="http://site.com/wp-content/uploads/impressions-01-2133x1600-q10.jpg" id="av-masonry-1-item-7105" data-av-masonry-item="7105" class="av-masonry-entry isotope-item post-7105 attachment type-attachment status-inherit hentry av-masonry-item-with-image lightbox-added av-masonry-item-loaded" title="impressions-01-2133×1600-q10" itemprop="thumbnailUrl" style="position: absolute; left: 0%; top: 0px;"><div class="av-inner-masonry-sizer"><figure class="av-inner-masonry main_color"><div class="av-masonry-outerimage-container"><div class="av-masonry-image-container" style="background-image: url(https://site.com/wp-content/uploads/impressions-01-2133x1600-q10.jpg);" title="impressions-01-2133×1600-q10"></div></figure></a>
<!-- end av-masonry entry-->

With my script or with your script to remove the tooltips on hover present the image title does not show in the code.

But it looks like we are talking about two different things here. The image Title is not the problem, it is the link itself which has no text, so the part just before the closing :
<a href="blablabla" ... </div></figure>---<THERE IS NO LINK TEXT HERE>---</a>

So how can we solve that?

As for the second issue of duplicate links (on the Galleries overview page which links to all individual masonry galleries, where both the featured image and the title of the gallery point to the same URL):

Is there a way to either unite both links (featured-image and title) inside a div or something and put the link on that, or if that cannot be done to effectively hide the title links programmatically? Thanks for your help.

Regards,
Rob

• This reply was modified 4 years, 6 months ago by rob2701. Reason: corrected typos

Hi Mike,

Indeed on the 3column perfect grid portfolio on the demo there are no empty link errors.

I have just done a little testing, and the difference is in the Captions Display settings in the masonry gallery.
When I set Captions to “Display Title/Bottom/AlwaysDisplay” (like in the demo) I don’t get any empty link text errors either.
I have done this on the first gallery on the dev site, check it out there.
Problem is: I do NOT want the Titles displaying below the thumbs (as they are simply the filenames).
So the issue remains…

And what about the second issue I mentioned on the galleries overview page (duplicate links on the Galleries overview page which links to all individual masonry galleries, where both the featured image and the title of the gallery point to the same URL)?

Regards,
Rob

Added info:
I can’t hide the titles when set to display through CSS either, because the space remains even if they don’t show:

/* hide image titles in masonry galleries - even if set to display */
h3.av-masonry-entry-title {
display: none;
}

In an “ideal” world, the link text would go something like “Open image <insert-image-number> in lightbox”
Just my 2 cents :-)

• This reply was modified 4 years, 6 months ago by rob2701. Reason: added my 2 cents for image link text

Hi Mike,

Thank you for your patience in working through this, I understand it’s not always easy to assess all different layout setups people can have with Enfold and all the modifications they apply :-)

Your new CSS to hide the title from showing over the masonry image works perfectly, so that is good workaround for me for now. I just need to set all masonry galleries to “always show title” and then hide them through CSS, then the “empty link text” WAVE error doesn’t appear anymore. So thanks for that, one issue tackled.

Still, since this is a bit convoluted as a procedure (set to show Titles and then hide them anyway), could I ask you to submit a fix request/feature request for the things we encountered during these tests? I noticed that particpants cannot do that themselves anymore. So could you please forward this as a feature/fix request? Thanks!

Re: Masonry Gallery perfect grid
1)
Link text should not be affected by the option Display Neither, which is now the case. If I choose that option in the Masonry Settings, WAVE errors about empty link text appear. Ideally link text should be something like “Open <image-number-in-gallery> in lightbox”, regardless of other options set.
2)
Duplicate links in the Galleries overview page (grid masonry category) (on image and Title) should be solved by uniting them in a container and then setting one link on the container. That way the links are independent of other options chosen.
3)
Some improvements could be made to the interface of the masonry gallery:
– the gallery styling gives the possibility to display:
– Display Title and Excerpt
– Display Excerpt
but: >>> Excerpt is actually the image Caption — please change that for clarity
– under “Element Title and “Excerpt”(= Caption) display settings”:
– the explanation description is not correct, should be something like
“You can choose whether to always display, display only on hover, or hide on hover”

Thanks for the good workaround for the “empty link text” error, I would not have found that all by myself.
BTW, I use the WAVE extension too (in Chrome and in Firefox).

Thanks for all the help,
Rob

• This reply was modified 4 years, 6 months ago by rob2701. Reason: typo correction

Hi Mike,

Once again, thank you for your patience and help in sorting through this. Please feel free to test things out on the dev site provided, it’s a copy and well backed-up. I have added your script in a code block on both the T and the I page. Then I set the first portfolio item in the I page to “Display Neither”. Nice solution! This seems to properly take care of the WAVE errors. You can see it on the dev site. I also added the code block with script to that first “I” portfolio item, and it works well there too! Great!

Regarding the second issue, that was about duplicate links, on the page with the overview of the T/I (so the Portfolio Category pages, grid) and on the Portfolio items themselves when opened. There the same links are set (independently) on both the featured image and the Portfolio Item Title, resp. the masonry created preview img and the (invisible) title. Resulting in the WAVE tool alert about Redundant Links. I feel (but please correct me if I’m wrong) that it would be better to set the one link on the container, so it would be independent of whether titles/images are shown., That was a stupid suggestion by me, as that is already the case :-)
Seems the masonry entry ID needs to be targeted for that. Sorry for the confusion!
Again, I err. The links are not independently set but they show up twice anyway. This must be something in the masonry script. Frankly, I’m out of my depth here, so I’ll stop saying stupid things… :-))

Just trying to fix the horrible mess I made in the description of the redundant links alerts in the Portfolio Category Page:
Image link now set on: .grid-image
Title link now set on: .grid-entry-title entry-title
could be set on: div.grid-entry:nth-child(1) > article:nth-child(1)
Sorry for the confusion created!

Kind regards,
Rob

• This reply was modified 4 years, 6 months ago by rob2701. Reason: Just trying to fix the horrible mess I made in the description of the redundant links alerts

Hi Mike,

Sorry, that was my mistake, I had deleted something from the child theme functions.php, but not well enough, left a “\\” in, resulting in the infamous “cookies are blocked” error and white screens. Fixed now.

Thanks for your continued help!
Rob

Hi Mike,

Thanks for this script, that was superquick! I added it and it works brilliantly! All duplicate link alerts are now gone from those two pages. Check it out on the dev site if you want.

Thanks again for all the help and for your patience. Kudos.

Kind regards,
Rob