WIP: Bricks Gallery Not Usable Due to Accessibility Concerns

The Bricks Gallery element inserts the images for the gallery as background images. This is not considered best practice. Instead of using alt text for the images, The Bricks gallery uses “aria-labels” in place of “alt text”, which is not the intended use of aria-labels. It would be useful if this element was made to be accessible. I wouldn’t use it while it is functioning in this manner.

15 Likes

Hi @flipback,

I agree that we should re-visit the gallery element in the future.

As a workaround for now you could use the masonry layout (which uses actual <img> tags). If you want all your images to have the same size / aspect-ratio instead of using their intrinsic sizes you could just add some basic CSS to the gallery element:

root img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Let me know if that helps.

Best,

André

Thanks for your suggestion. This does make it work better. Although, I do prefer using Grid over Flexbox for these gallery elements.

I also noticed the same issue exist with the related post element.

I know I can make a custom loop and query the related post but doing so would keep me from using the element.

Thanks for your quick response and I hope these small changes are addressed in a near future release which would make a big difference.

3 Likes

Agree, this needs to be fixed.

Also see: Images as background-img

1 Like

I fully agree. Accessibility is such an important aspect of webdesign and should have a high priority.

1 Like

Just to provide an update, we have an internal ticket for this so it’s currently a WIP :slight_smile:

6 Likes

Hi @charaf, any ETA on this one?

I’m struggling with this issue right now and considering developing my own gallery element.

2 Likes