- This topic has 11 replies, 4 voices, and was last updated 2 years, 5 months ago by
.
-
Posts
-
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” 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
Customer Support
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:
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
perceivesthe 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 devices2. 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
Customer Support
Hi Michaela,
Have you tried replacing
site-headerin your code toheader?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.phpand understood the principle.Thank you for your help. You’re great.
Michaela
You’re welcome, Michaela!
- You must be logged in to reply to this topic.
