[Resolved] Accessibility Error

Home Forums Support [Resolved] Accessibility Error

Home Forums Support Accessibility Error

  • This topic has 12 replies, 4 voices, and was last updated 1 week ago by Maria.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2078388
    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

    #2078734
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2078748
    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

    #2078934
    David
    Staff
    Customer Support

    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.

    #2079380
    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

    #2079392
    David
    Staff
    Customer Support

    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.

    #2079406
    Maria

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

    #2079746
    Tom
    Lead Developer
    Lead Developer

    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!

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

    #2080842
    Tom
    Lead Developer
    Lead Developer

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

    #2080863
    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.

    #2081669
    Tom
    Lead Developer
    Lead Developer

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

    #2081723
    Maria

    Agreed. Thanks for all you do.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.