isabella232 / wai-aria-walker_nav_menu

Nav menu walker for WP with correct WAI-ARIA roles for dropdown menus.

WAI-ARIA WordPress Walker

Nav menu walker for WP with correct WAI-ARIA roles for dropdown menus.

Install

Detailed explanation in a blogpost.

1. You can install this class using Composer (preferred method) or manually copying this file to your theme / project.

2. After that, include it in your theme, probably something like (assuming you installed it using Composer):

require_once 'vendor/proteusthemes/wai-aria-walker-nav-menu/aria-walker-nav-menu.php';

You must enqueue wai-aria.js as well, because the aria-expanded attributes needs to be updated with JS.

1. Finally, include the menus in your theme files as per example below:

<nav class="collapse  navbar-collapse" role="navigation" aria-label="<?php _e( 'Main Menu', 'your-textdomain' ); ?>">
  <?php
  	if ( has_nav_menu( 'your-menu' ) ) {
  		wp_nav_menu( array(
  			'theme_location' => 'your-menu',
  			'container'      => false,
  			'menu_class'     => 'main-navigation',
  			'walker'         => new Aria_Walker_Nav_Menu(),
  			'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  		) );
  	}
  ?>
</nav>

Mind:

• 'walker' => new Aria_Walker_Nav_Menu(),
• <nav> wrapping element and 'container' => false in the arguments
• role="navigation"
• aria-label="<?php _e( 'Main Menu', 'your-textdomain' ); ?>"
• 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',

Compatibility with WP

This repo aims to be 1:1 compatible with latest WP version, mainly with the class Walker_Nav_Menu in the file /<path-to-wp>/wp-includes/nav-menu-template.php.

Current version is compatible with WP core 4.5.

Contributing

No need to explain - fork me and create a pull request.

Created by @primozcigler and @Prelc.