Custom Header Menu Screen Reader Problem

[fccb]

I’m being told that the main dropdown navigation menu and inline search are not visible to screen readers for people with disabilities.

After a pretty good amount of searching, I’m still not seeing how to fix this? It seems they are missing the proper ARIA roles. How can I add them?

Thank you

[ruenel]

Hello Benjamin,

Thanks for writing in! The elements that you’ve mentioned were hidden because there are hidden away for screen readers. To those elements, we have added an element attribute aria-hidden="true". To get your issues resolved, we highly suggest that you use a child theme because what you are trying to accomplish requires a template customization, . This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please do the following:
1.) Copy this PHP code and insert in in your Child theme’s functions.php file. This is the default search icon display. You will need to update it and set the aria-hidden attribute to false.

// Navbar Search Navigation Item
// =============================================================================

if ( ! function_exists( 'x_navbar_search_navigation_item' ) ) :
  function x_navbar_search_navigation_item( $items, $args ) {

    if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . '<a href="#" class="x-btn-navbar-search">'
                    . '<span><i class="x-icon-search" data-x-icon-s="&#xf002;" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
                  . '</a>'
                . '</li>';
      }
    }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
endif;

2.) You must create a new file in your local computer and add this PHP code into the file:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') );
 else: ?>

<a href="#" id="x-btn-navbar" class="x-btn-navbar collapsed" data-x-toggle="collapse-b" data-x-toggleable="x-nav-wrap-mobile" aria-expanded="false" aria-controls="x-nav-wrap-mobile" role="button">
  <i class="x-icon-bars" data-x-icon-s="&#xf0c9;"></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile x-collapsed" data-x-toggleable="x-nav-wrap-mobile" data-x-toggle-collapse="1" aria-hidden="true" aria-labelledby="x-btn-navbar">
  <?php x_output_primary_navigation(); ?>
</div>

<?php endif; ?>

Of course you will have to update the code and make sure that aria-hidden is set to false also.

Save this file named as “_nav-primary.php” and upload it to your child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/. You may need to create the folder path since it does not exist in your child theme yet.

We would love to know if this has worked for you. Thank you.