I have a series of tricks that I use to add things like aria tags, keyboard navigation, screen reader text, and other features. I would love to see some of yours.

Assume this is a multi-tiered menu meeting WCAG 2.1 AA guidelines or better. Assume this is a typical WordPress menu and we're requiring as little content manager knowledge as you can. Assume the menu is responsive.

wp_nav_menu(
  array(
    'theme_location' => 'main',
    'depth'          => 2,
  )
);

I look forward to seeing what you have!

I have a series of tricks that I use to add things like aria tags, keyboard navigation, screen reader text, and other features. I would love to see some of yours.

Assume this is a multi-tiered menu meeting WCAG 2.1 AA guidelines or better. Assume this is a typical WordPress menu and we're requiring as little content manager knowledge as you can. Assume the menu is responsive.

wp_nav_menu(
  array(
    'theme_location' => 'main',
    'depth'          => 2,
  )
);

I look forward to seeing what you have!

• menus
• accessibility

1 Answer 1

Kevin Leary posted a snippet to add aria-expanded tags in 2018. I love the simplicity of it.

He describes what we're doing here:

This is the recommended approach for “fly-out (or drop-down) menus” provided by the w3, more on fly-out menu accessibility can be read on their site directly.

function my_nav_menu_link_attributes( $atts, $item, $args ) {
    if ( 'main' === $args->theme_location ) {
        $item_has_children = in_array( 'menu-item-has-children', $item->classes );
        if ( $item_has_children ) {
            $atts['aria-haspopup'] = 'true';
            $atts['aria-expanded'] = 'false';
        }
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'my_nav_menu_link_attributes', 10, 3 );