I am working with an accessibility expert on a site built using GB. I have a grid block with 4 nested container blocks that each have a link applied to the container and a Headline block inside the container.
I received the following feedback. “These four links are empty. The CTA text needs to be inside of them so that they are announced.” Is there anyway to resolve this?
Here is a link to view a screenshot of the empty anchor tag: Screenshot 2022-12-21 at 6....
Here is a link to view the page: https://reedcon.wpengine.com/ (in the ‘Our Expertise’ section)
Funny, I actually just posted a somewhat similar question just now. Not identical, but about accessibility of redundant links, but also in the context of a grid of people.
An aria-label on your link tags might help in your situation, so like aria-label=“John Smith’s Bio”
@jamesrice is correct. With GB Pro, you can add an aria-label attribute. Example: Image 2022-12-22 at 1.55.49 PM
Can you try adding one and see how it goes?
This is helpful for a Grid where you can set the ARIA label for each, but is there a way to use this method on a Query Loop?
Are you referring to adding an aria-label to the Query Loop Block itself as opposed to its contents? If so, a different approach is needed.
I was referring to adding an aria-label to each of the Containers inside of the Query Loop Block. If I add the aria-label the way the picture shows then the same label is added to all of the containers inside of the query loop.
I see. If you want different aria-label values, you’ll need to add their values through a custom field through ACF plugin for instance.
Then, you can add the attribute through render_block() WordPress filter. Reference: render_block() | Function | WordPress Developer Resources