- This topic has 19 replies, 4 voices, and was last updated 1 month, 4 weeks ago by
Elvin.
-
AuthorPosts
-
July 6, 2020 at 4:58 am #1353699
Matt
Hi,
I’d like to add an
aria-label
attribute to differentiate mynav
landmark regions.For example, I’d like to add
aria-label="Main Menu"
to the primary site navigation, like this:<nav id="site-navigation" class="main-navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope="" aria-label="Main Menu">
What’s the best way of doing that? Some sort of filter?
July 6, 2020 at 9:36 am #1354184Tom
Lead DeveloperLead DeveloperHi there,
As of right now, it’s not possible, but it will be possible in GP 2.5.0 which will be entering public testing within the next couple of weeks.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 6, 2020 at 11:34 am #1354307Matt
Good to know, thanks Tom. I’ll keep an eye out for that.
November 22, 2020 at 5:45 am #1540895Alicia
Hi!
I need to do exactly this. Is it possible now?Thanks!
November 22, 2020 at 12:20 pm #1541446Tom
Lead DeveloperLead DeveloperHi there,
Try this:
add_filter( 'generate_after_element_class_attribute', function( $data, $context ) { if ( 'navigation' === $context ) { $data .= 'aria-label="My Label"'; } return $data; }, 10, 2 );
Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 22, 2020 at 2:19 pm #1541492Alicia
Hi Tom,
That didn’t work. Am I supposed to change something in the code?November 22, 2020 at 3:19 pm #1541524Elvin Customer Support
Hi,
You can try this:
function add_aria_label_to_all_menu_anchors( $atts ) { $atts['aria-label'] = 'My label'; return $atts; } add_filter( 'nav_menu_link_attributes', 'add_aria_label_to_all_menu_anchors', 10 );
A wise man once said:
"Have you cleared your cache?"November 22, 2020 at 3:51 pm #1541554Alicia
I see I haven’t been clear. Sorry.
I need to add the aria label to nav element. So in the nav tag. <nav></nav>.
Sorry about the back and forth. You guys are so ridiculously helpful!!
November 22, 2020 at 4:20 pm #1541572Elvin Customer Support
We can do a JS approach.
Add this into a Hook Element that is hooked on
generate_after_header
.<script> var navbars = document.querySelectorAll('nav'); for(i=0;i<navbars.length;i++){ navbars.setAttribute('aria-label','Custom Label') } </script>
A wise man once said:
"Have you cleared your cache?"November 22, 2020 at 5:05 pm #1541596Alicia
I’m not sure that’s going to work. I’m in the process of trying to get the navigation into the header. Having it outside the header doesn’t make it user friendly for screen readers and people who use them who expect the navigation to be in the header…
November 22, 2020 at 5:12 pm #1541598Elvin Customer Support
I’m not sure that’s going to work. I’m in the process of trying to get the navigation into the header. Having it outside the header doesn’t make it user friendly for screen readers and people who use them who expect the navigation to be in the header…
You can hook the script anywhere after the header. The script itself doesn’t alter the layout or display anything.
It simply just adds
aria-label="Custom label"
to your<nav>
tag. 🙂A wise man once said:
"Have you cleared your cache?"November 22, 2020 at 5:19 pm #1541603Alicia
Okay, I just want to make sure it doesn’t add to any other <nav>’s on the page?
Right now, I’m trying to get rid of the double primary navigation! LOL! I managed to hook the navigation into the header but the other one stubbornly remained.November 22, 2020 at 5:23 pm #1541605Alicia
Unfortunately, the script isn’t producing the aria label.
November 22, 2020 at 5:30 pm #1541618Elvin Customer Support
Unfortunately, the script isn’t producing the aria label.
As this is getting pretty drawn out, can you open up a new topic?
So we can check and/or dig further on the site you’re working on. 😀
Opening a new topic lets you use the Private Information text field in case need.
A wise man once said:
"Have you cleared your cache?"November 22, 2020 at 5:32 pm #1541620Alicia
That sounds like a wonderful idea. That’s also why I didn’t slap the code in here. I’m going to take on more peak at how to remove and add a hook and I’ll be back in another thread!! Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.