[Resolved] Hamburger Menu Aria Label

Home Forums Support Hamburger Menu Aria Label

  • This topic has 6 replies, 2 voices, and was last updated 2 months ago by Tom.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1211018
    Danny

    I use a hamburger menu on both desktop and mobile. How do I add the below to hamburger menu:

    aria-label=”Open the menu”

    #1211364
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    For the desktop one, you can do this:

    add_filter( 'generate_off_canvas_toggle_output', function() {
        if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
            return;
        }
    
        $settings = wp_parse_args(
            get_option( 'generate_menu_plus_settings', array() ),
            generate_menu_plus_get_defaults()
        );
    
        $svg_icon = '';
    
        if ( function_exists( 'generate_get_svg_icon' ) ) {
            $svg_icon = generate_get_svg_icon( 'pro-menu-bars' );
        }
    
        return sprintf(
            '<li class="slideout-toggle menu-item-align-right %2$s"><a aria-label="Open the menu" href="#">%1$s%3$s</a></li>',
            $svg_icon,
            $svg_icon ? 'has-svg-icon' : '',
            '' !== $settings['off_canvas_desktop_toggle_label'] ? '<span class="off-canvas-toggle-label">' . wp_kses_post( $settings['off_canvas_desktop_toggle_label'] ) . '</span>' : ''
        );
    } );

    The mobile toggle doesn’t have a filter at the moment, unfortunately. However, it does have a screen-reader-text element so screen readers can identify it.

    #1212255
    Danny

    Thannk you, Tom. I am getting an empty link error on WAVE. Any ideas on how to fix that?

    What To Do
    Remove the empty link or provide text within the link that describes the functionality and/or target of that link.

    #1212443
    Danny

    Also, where should I add the code in elements?

    #1212526
    Tom
    Lead Developer
    Lead Developer

    If you can’t have an empty link, add an off canvas panel label in Customize > Layout > Off Canvas Panel.

    That code should be added using one of these methods: https://docs.generatepress.com/article/adding-php/

    #1212544
    Danny

    Thank you

    #1213298
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.