Site logo

Archived topic

Add aria-label attributes to nav elements

25 replies · Started by Matt on July 6, 2020

Viewing posts 16–26 of 26

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

This archived topic is closed to new replies.