[Resolved] Add aria-label attributes to nav elements

[Matt]

Hi,

I’d like to add an aria-label attribute to differentiate my nav 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?

[Tom]

Hi 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.

[Matt]

Good to know, thanks Tom. I’ll keep an eye out for that.

[Alicia]

Hi!
I need to do exactly this. Is it possible now?

Thanks!

[Tom]

Hi 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 🙂

[Alicia]

Hi Tom,
That didn’t work. Am I supposed to change something in the code?

[Elvin]

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 );

[Alicia]

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!!

[Elvin]

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[i].setAttribute('aria-label','Custom Label')
}

</script>

[Alicia]

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…

[Elvin]

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. 🙂

[Alicia]

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.

[Alicia]

Unfortunately, the script isn’t producing the aria label.

[Elvin]

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.

[Alicia]

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!

[Author]

Posts