Accessibility Error

Hi Maria,

The latest version, 3.1, added aria label attributes to parts of the page w/c should address issues like this.

Can you share the GeneratePress theme version your site is using? Can you share a screenshot if the error/s as well?

Let us know.

I'm using GP 3.1.0 and GPP 2.1.1. Here is a link to the 2 screenshots of the 2 errors found on the Home Page. I got errors on the other pages as well, but here is the Home Page: https://www.screencast.com/t/2keD7KbTJbUM

Hi there,

so that markup is coming from GenerateBlocks.
First thing is to select the GB Container Block in the editor and change the Element Tag to Section - see here for more information:

https://docs.generateblocks.com/article/container-overview/#layout-–-standalone-block

In doing so that section will automatically have a default Landmark Role of: region

For more advanced roles, aria-labelling requirements - which i don't think is required here - you can use GenerateBlocks Pro to add your attributes to its HTMK.

I changed the element to Section on both the Hero Section and the Footer and still getting the same error. Here are screenshots: https://www.screencast.com/t/kusZF7JcN

If the Footer is replacing the themes footer then you can change the element Tag to Footer.

The Hero section - small issue there as it sits outside the Main content. If you're a GB Pro user you can add a role attribute to the block ie. role="banner" from the blocks Advanced options.

How would I solve the Hero section issue if I'm not a GB Pro user? Is there some code I could use?

Hi there,

Without Pro, we can add a PHP filter.

First, add a custom class name to the Container block in the "Advanced" tab. It can be something like: is-hero-container

Then, let's add this PHP:

add_filter( 'generateblocks_attr_container', function( $attributes, $settings ) {
    if ( 'is-hero-container' === $settings['className'] ) {
        $attributes['aria-label'] = 'Your ARIA label here';
    }

    return $attributes;
}, 10, 2 );

Hope this helps!

Thanks, Tom. Unfortunately, it didn't work for me. I'll look into GenerateBlocks Pro. This is the code I used:
add_filter( 'generateblocks_attr_container', function( $attributes, $settings ) {
if ( 'is-hero-container' === $settings['className'] ) {
$attributes['aria-label'] = 'Page Hero';
}

return $attributes;
}, 10, 2 );

Did you add the is-hero-container class to the Container block you're targeting?

I did but it didn't work. I was also getting contentinfo landmark errors for the footer. It was getting too complicated so I used GB Pro so I could use the Role attribute feature.

Ah, sorry that method didn't work. The GB Pro method is definitely much easier :)

Agreed. Thanks for all you do.