Accessibility issue

Hi there,

1. did you find a solution for this ? As i tested your site on Safari, Chrome and Firefox and it keeps the desktop header.

2. and 3. See Toms reply here:

https://generatepress.com/forums/topic/adding-custom-class-to-core-gp-sections-via-php-in-child-template-files/#post-1983433

We can utilise that filter like so:

add_filter( 'generate_parse_attr', function( $attributes, $context ) {
    if ( 'site-header' === $context ) {
        $attributes['aria-label'] .= 'your site header aria-label';
    }

    if ( 'entry-meta' === $context ) {
        $attributes['aria-label'] .= 'your entry meta aria-label';
    }

    return $attributes;
}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

1. No, I did not, Tom. I can keep the regular menu when my desktop screen is 1920px or larger. Smaller will show the mobile menu. The company that is auditing the website probably want to not show the mobile menu at all on desktop.

2. I'm able to add the PHP. But could you point me in the right direction how the code should look like with my aria-labels? i Trief this:

add_filter( 'generate_parse_attr', function( $attributes, $context ) {
if ( 'site-header grid-container has-inline-mobile-toggle' === $context ) {
$attributes['aria-label'] .= 'Site';
}

return $attributes;
}, 10, 2 );

Hans

1. When you zoom the browser increases the pixel density and effectively perceives the screen as a smaller size. So it is affected by CSS @media queries. The only thing i can suggest is to reduce the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation. BUT this will also affect those devices

2. So what changes need to be made to the aria-label - can i see the Accessibility rules you need to follow ?

1. OK David, I will see what I can do there, thanks.

2. This is what the report says:

On page tropiqua.nl an aria label is used within the header element. Aria label is not supported on header elements.

So basically the aria-label has to be empty.

Hans

Ok, try this Snippet:

add_filter( 'generate_parse_attr', function( $attributes, $context ) {
    if ( 'header' === $context ) {

	$attributes['aria-label'] = null;
    }

    return $attributes;
}, 100, 2 );

That did the trick David, thanks for your help!

Hans

Glad to hear that!

Hello David,

I have same issue. I need to null aria-label at "site-header" and "site-info". My snippet works halfway:

add_filter( 'generate_parse_attr', function( $attributes, $context ) {

    if ( 'site-header' === $context ) {

	    $attributes['aria-label'] = null;
    }

    if ( 'site-info' === $context ) {

	    $attributes['aria-label'] = null;
    }

    return $attributes;
    
}, 100, 2 );

aria-label is still at "site-header" and hide at "site-info".

Please advise me where I am going wrong?

Thanks Michaela

Hi Michaela,

Have you tried replacing site-header in your code to header?

If so, can you provide the link to the page in question?

You can create a new topic if you want to use the Private Information field.

Hi Fernando,

thank you for your quick reply. It works. I finally found the source code in class-html-attributes.php and understood the principle.

Thank you for your help. You're great.

Michaela

You're welcome, Michaela!