IMPLEMENTED: Bricks Gallery Not Usable Due to Accessibility Concerns

[flipback]

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.

[aslotta]

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é

[flipback]

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.

[Tom]

Agree, this needs to be fixed.

Also see: Images as background-img

[JanH]

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

[charaf]

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

[Blackeye]

Hi @charaf, any ETA on this one?

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

[webdevd]

@charaf is there an update on this? As I’m still getting these accessibility issues when using the Image Gallery element.

[charaf]

Hi @webdevd & @Blackeye, the goal is to have this shipped in our next release if everything goes to plan.

[timmse]

Hi guys,

We’ve implemented this improvement in Bricks 1.9.7(.1), now available as a one-click update in your WordPress Dashboard.

Please take your time and read the changelog carefully as Bricks 1.9.7(.1) contains breaking changes that will make your Bricks website more secure.

Changelog: Bricks 1.9.7 Changelog – Bricks

Please let us know if you are still experiencing issues.

[flipback]

Awesome! Thank you for the update.