[Resolved] Add aria-label attributes to nav elements

Home Forums Support Add aria-label attributes to nav elements

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1353699
    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?

    #1354184
    Tom
    Lead Developer
    Lead Developer

    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.

    #1354307
    Matt

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

    #1540895
    Alicia

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

    Thanks!

    #1541446
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1541492
    Alicia

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

    #1541524
    Elvin
    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?"

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

    #1541572
    Elvin
    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?"

    #1541596
    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…

    #1541598
    Elvin
    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?"

    #1541603
    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.

    #1541605
    Alicia

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

    #1541618
    Elvin
    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?"

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.