[Resolved] Accessibility Error

[Maria]

I’m testing a site I’m building using the Axe Dev Tools in Chrome Inspector and on each of the pages I get an error saying “All page content should be contained by landmarks”. They explain how to fix the problem, but it’s out of my control. Accessibility is a big concern and no one wants to get sued. What should I do? Here’s the link to the page where they explain how to fix the problem: https://dequeuniversity.com/rules/axe/4.1/region

[Elvin]

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.

[Maria]

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

[David]

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.

[Maria]

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

[David]

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.

[Maria]

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

[Tom]

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!

[Maria]

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 );

[Tom]

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

[Maria]

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.

[Tom]

Ah, sorry that method didn’t work. The GB Pro method is definitely much easier 🙂

[Maria]

Agreed. Thanks for all you do.

[Author]

Posts