WIP: Image Gallery Lightbox Links do not have a discernible name

Feature Requests / Improvements
1

Hello everyone.

When using the lightbox function of the Bricks Gallery I noticed that it is not completely accessible.

image
image733×514 30.4 KB

Is this already known and is a fix expected?

Is there a temporary solution like this one for the Mini-Cart?

add_filter( 'bricks/element/render_attributes', 'bu_minicart_link_aria_label', 10, 3 );
function bu_minicart_link_aria_label( $attributes, $key, $element_instance ) {
      if( $element_instance->name == 'woocommerce-mini-cart' && $key == 'a' ) {
            $attributes['a']['aria-label'] = 'ENETERARIALABEL';
      }
      return $attributes;
}

Thank you very much

3

Image Gallery: here is my workaround - insert below settings - page settings - custom code - Body (footer) scripts

<script>
document.addEventListener('DOMContentLoaded', function() {
const galleryItems = document.querySelectorAll('.brxe-image-gallery .bricks-layout-item');
galleryItems.forEach((item, index) => {
const link = item.querySelector('figure a');
if (link) {
// Fallback or custom label for accessibility
const customLabel = `Opens enlarged image ${index + 1}`;
link.setAttribute('aria-label', customLabel);
}
});
});
</script>
4

image
You just need to add a custom attribute to that element, and the issue will be resolved.

5

@readone This proposed solution doesn’t work, since the aria-label gets added to the gallery container rather than the links.

@timmse Is it possible (or could it be possible please) to add descriptive text for gallery lightbox links using aria-label? This can currently be done for normal image elements that have a lightbox link where the provided aria attribute gets added to the link element.

6

Hi @jamie,
You’re right—the custom attribute suggested above applies to the gallery container, not to each lightbox link.

This issue is already tracked internally (we received a ticket about it).
We’ll update this thread once it’s fixed.

7

Thanks @timmse

I ran into a similar issue with the <video> element used for “background” videos. In my case, a decorative video that accessibility audits are failing on due to missing <track> elements for captions. I was going to see how I might add an aria-hidden attribute to the video but don’t appear to be able to. Is this something that’s being tracked / should I open a separate issue?

8

Hi @jamie, yes, please open a separate topic for the background-video issue so we can investigate it independently. Please include your Bricks version, the affected public page URL, and the exact accessibility audit warning. Also clarify whether you’re using Style → Background → Video or a Video element styled as a background.

9

@timmse I have added a new topic. Probably more a feature request than a bug.