Archived topic
Add aria-label attributes to nav elements
25 replies · Started by Matt on July 6, 2020
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!
No problem. :D
Hi Elvin!
I solved out the double menu issue!
Hi Elvin!
I solved out the double menu issue!
Glad to know. Let us know if you're still trying to add in the aria-label attribute.
Feel free to open up a new topic about it. We'll make sure to address it there.
So it turns out we don't need it. Thanks for all of your help!
Glad to hear. No problem. :)
Can i ask how you did?
Hi there,
the GP Nav element already has an aria-label.
What exactly are you trying to add the aria-label to?
Hi David,
Thanks for your quick response. that's strange to me you don't see an attribute in the <nav> tag. I looked for a hook for it but couldn't find it.
<nav id="mobile-header" class="main-navigation mobile-header-navigation has-branding has-menu-bar-items" itemtype="https://schema.org/SiteNavigationElement" itemscope="">
and in <aside> the same.
<aside id="nav_menu-1" class="widget inner-padding widget_nav_menu">
Hi Kerem,
You can try doing it with JS.
Example: for mobile-header
<script>
var mobile_nav = document.getElementById( 'mobile-header' );
mobile_nav.setAttribute('aria-label', 'navigation');
</script>
Change aria-label and navigation to the attribute name and value you want to apply.
You can do the same thing with the widget.
Example:
<script>
var widget_nav = document.getElementById( 'nav_menu-1' );
widget_nav.setAttribute('aria-label', 'navigation');
</script>
Thank you Elvin its solved.
Kind regards,
kerem Ugis
Nice one. No problem. :D