title: Creating Proper ARIA Menu with WordPress
body: <p>I have created a custom Nav Walker for WordPress to add the proper ARIA roles to output of the <code>wp_nav_menu()</code> function. That checks out alright. But I am stuck attempting to do two things.</p>
  
  <p>My walker produces the following output:</p>
  
  <pre><code>&lt;nav id="siteNav" role="navigation"&gt;
  &lt;ul id="menuMain" class="menu" role="menubar"&gt;
      &lt;li id="menu-item-1698" class="menu-item" role="presentation"&gt;
          &lt;a href="http://localhost/" role="menuitem"&gt;Front Page&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-1697" class="menu-item" role="presentation"&gt;
          &lt;a href="http://localhost/blog/" role="menuitem"&gt;Blog&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-1694" class="menu-item" role="presentation"&gt;
          &lt;a href="http://localhost/sample-page/" role="menuitem"&gt;Sample Page&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-1695" class="menu-item" role="presentation"&gt;
          &lt;a href="http://localhost/page-b/" role="menuitem"&gt;Page B&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-1696" class="menu-item" role="presentation"&gt;
          &lt;a href="http://localhost/page-a/" role="menuitem"&gt;Page A&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-1699" class="menu-item" role="presentation"&gt;
          &lt;a href="http://localhost/" role="menuitem"&gt;Front Page&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-1701" class="menu-item" role="presentation"&gt;
          &lt;a href="http://localhost/level-1/" role="menuitem"&gt;Level 1&lt;/a&gt;
          &lt;ul class="sub-menu" role="menu" aria-expanded="false"&gt;
             &lt;li id="menu-item-1702" class="menu-item" role="presentation"&gt;
                 &lt;a href="http://localhost/level-1/level-2b/" role="menuitem"&gt;Level 2b&lt;/a&gt;
              &lt;/li&gt;
             &lt;li id="menu-item-1703" class="menu-item" role="presentation"&gt;
                 &lt;a href="http://localhost/level-1/level-2a/" role="menuitem"&gt;Level 2a&lt;/a&gt;
              &lt;/li&gt;
             &lt;li id="menu-item-1704" class="menu-item" role="presentation"&gt;
                 &lt;a href="http://localhost/level-1/level-2/" role="menuitem"&gt;Level 2&lt;/a&gt;
                 &lt;ul class="sub-menu" role="menu" aria-expanded="false"&gt;
                    &lt;li id="menu-item-1705" class="menu-item" role="presentation"&gt;
                        &lt;a href="http://localhost/level-1/level-2/level-3b/" role="menuitem"&gt;Level 3b&lt;/a&gt;
                     &lt;/li&gt;
                    &lt;li id="menu-item-1706" class="menu-item" role="presentation"&gt;
                        &lt;a href="http://localhost/level-1/level-2/level-3a/" role="menuitem"&gt;Level 3a&lt;/a&gt;
                     &lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I am trying to do now is add some kind of ID to the <code>&lt;a&gt;</code> elements the are siblings to the <code>&lt;ul class="sub-menu"&gt;</code> elements and reference that ID in an <code>aria-labelledby</code> property.</p>
  
  <p>So the menuitem containing the submenus will look as follows:</p>
  
  <pre><code>&lt;li id="menu-item-1704" class="menu-item" role="presentation"&gt;
     &lt;a href="http://localhost/level-1/level-2/" role="menuitem" id="{ID}"&gt;Level 2&lt;/a&gt;
     &lt;ul class="sub-menu" role="menu" aria-expanded="false" aria-labelledby="{ID}"&gt;
         &lt;li id="menu-item-1705" class="menu-item" role="presentation"&gt;
            &lt;a href="http://localhost/level-1/level-2/level-3b/" role="menuitem"&gt;Level 3b&lt;/a&gt;
         &lt;/li&gt;
         &lt;li id="menu-item-1706" class="menu-item" role="presentation"&gt;
            &lt;a href="http://localhost/level-1/level-2/level-3a/" role="menuitem"&gt;Level 3a&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p>The code for my walker:
  
  
  <p>class Walker_ARIA_Nav_Menu extends walker {</p>
  
  <pre><code>public $tree_type = array( 'post_type', 'taxonomy', 'custom' );
  
  
  public $db_fields = array( 'parent' =&gt; 'menu_item_parent', 'id' =&gt; 'db_id' );
  
  
  public function start_lvl( &amp;$output, $depth = 0, $args = array() ) {
      $indent = str_repeat( "\t", $depth );
      $output .= "\n$indent&lt;ul class=\"sub-menu\" role=\"menu\" aria-expanded=\"false\" aria-hidden=\"true\"&gt;\n";
  }
  
  
  public function end_lvl( &amp;$output, $depth = 0, $args = array() ) {
      $indent = str_repeat( "\t", $depth );
      $output .= "$indent&lt;/ul&gt;\n";
  }
  
  
  public function start_el( &amp;$output, $item, $depth = 0, $args = array(), $id = 0 ) {
      $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
  
      $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;
      $classes[] = 'menu-item-' . $item-&gt;ID;
  
  
      $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
  
      $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
      $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
  
      $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item-&gt;ID, $item, $args, $depth );
      $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
  
      $output .= $indent . '&lt;li' . $id . $class_names .' role="presentation"&gt;';
  
      $atts = array();
      $atts['title']  = ! empty( $item-&gt;attr_title ) ? $item-&gt;attr_title : '';
      $atts['target'] = ! empty( $item-&gt;target )     ? $item-&gt;target     : '';
      $atts['rel']    = ! empty( $item-&gt;xfn )        ? $item-&gt;xfn        : '';
      $atts['href']   = ! empty( $item-&gt;url )        ? $item-&gt;url        : '';
  
  
      $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
  
      $attributes = '';
      foreach ( $atts as $attr =&gt; $value ) {
          if ( ! empty( $value ) ) {
              $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
              $attributes .= ' ' . $attr . '="' . $value . '"';
          }
      }
  
  
      $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
  
      $item_output = $args-&gt;before;
      $item_output .= '&lt;a'. $attributes .' role="menuitem"&gt;';
      $item_output .= $args-&gt;link_before . $title . $args-&gt;link_after;
      $item_output .= '&lt;/a&gt;';
      $item_output .= $args-&gt;after;
  
  
      $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
  
  
  public function end_el( &amp;$output, $item, $depth = 0, $args = array() ) {
      $output .= "&lt;/li&gt;\n";
  }
  } // End Walker_ARIA_Nav_Menu Class
  </code></pre>