[Resolved] Hamburger Menu Aria Label

[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”

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

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

[Danny]

Also, where should I add the code in elements?

[Tom]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Danny]

Thank you

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts