[Resolved] Accessibility issue

[Hans]

Hi,

I have a few more accessibility issues, hope you can help:

1. When the site (https://tropiqua.nl) is zoomed to 400% on desktop the mobile menu is showing, can I change this so that on desktop it does not switch?

2. In the page header there is an aria label that is not allowed according to the accessibility rules that I have to follow.

<header class=”site-header grid-container has-inline-mobile-toggle” id=”masthead” aria-label=”Site” itemtype=”https://schema.org/WPHeader&#8221; itemscope=””>.

Is there a possibility to remove this label?

3. same goes for the footer:

<footer class=”entry-meta” aria-label=”Berichtmeta”>

Your help would be greatly appreciated.

Hans

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hans]

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

[David]

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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hans]

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

[David]

Ok, try this Snippet:

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

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

    return $attributes;
}, 100, 2 );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hans]

That did the trick David, thanks for your help!

Hans

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts