javascript – How can I make a menu accessible?

Question:

I have the following menu (simplified):

nav ul, nav li {
  display:inline-block;
  list-style:none;
  margin:0;
  padding:0;
}

nav > ul {
  background:#ccc;
  height:40px;
  width:100%;
}

nav > ul > li {
  line-height:40px;
  position:relative;
  float:left;
  padding:0 10px;
}

nav > ul > li > ul {
  position:absolute;
  left:0;
  top:40px;
  background:#aaa;
  display:none;
}

nav > ul > li:hover > ul {
  display:block;
}

nav > ul > li > ul > li {
  width:150px;
  padding:0 10px;
}
<nav>
  <ul>
    <li><a href="#">Sección 1</a></li>
    <li>
      <a href="#">Sección 2</a>
      <ul>
        <li><a href="#">Sub-Sección 2.1</a></li>
        <li><a href="#">Sub-Sección 2.2</a></li>
        <li><a href="#">Sub-Sección 2.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Sección 3</a>
      <ul>
        <li><a href="#">Sub-Sección 3.1</a></li>
        <li><a href="#">Sub-Sección 3.2</a></li>
      </ul>
    </li>
    <li><a href="#">Sección 4</a></li>
  </ul>
</nav>

That menu works, if I hover the mouse over sections 2 and 3, a submenu opens in which more options can be chosen, but there is a problem: if the user only uses the keyboard (because he does not have a mouse or because he is using a screen reader), the submenus do not open correctly.

For example, if we press the tab button it will jump to "Section 1", then "Section 2" (and its submenu does not open), then to "Section 3" (instead of entering the submenu of "Section 2" , and its submenu does not open either) and finally "Section 4".

How can I get the submenus to open when I get to "Section 2" or "Section 3"? Would it be possible to use the cursors and not just the tab? Is it possible to do it only with HTML + CSS or would JavaScript be required?

Answer:

Using the Adobe – Accessible-Mega-Menu plugin and creating a small script that opens the submenu when it detects if it is in focus .

$(function () {
   
   // inicializar accessibleMegaMenu
   $('nav').accessibleMegaMenu();
            
  // Hack para que el megamenu no muestre flash de animación css después de cargar la página.
  setTimeout(function(){ $('body').removeClass('init'); }, 500);  
  
  // Abre el menu cuando detecta si esta en focus con TAB
  $(window).on('keyup', function (e) {
    
    var codeTab = (e.keyCode ? e.keyCode : e.which);
    
    if (codeTab == 9 && $('#focus_1:focus').length) {
      
      $('a#focus_1').trigger('mouseenter');
    }

    if (codeTab == 9 && $('#focus_2:focus').length) {
      
      $('a#focus_2').trigger('mouseenter');
    }
    
   }); 
});
.nav-menu {
  display: block;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 15;
}

.nav-item {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.nav-item > a {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  margin: 0 0 -1px 0;
  border: 1px solid transparent;
}

navigation item 
.nav-item > a:focus,
.nav-item > a.open {
  border: 1px solid #dedede;
}

navigation item
.nav-item > a.open {
  background-color: #fff;
  border-bottom: none;
  z-index: 1;
}

.sub-nav {
  position: absolute;
  display: none;
  top: 2.6em;
  margin-top: -1px;
  padding: 0.5em 1em;
  border: 1px solid #dedede;
  background-color: #fff;
}

.sub-nav.open {
  display: block;
}

.sub-nav ul {
  display: inline-block;
  vertical-align: top;
  margin: 0 1em 0 0;
  padding: 0;
}

.sub-nav li {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
<nav>
  <ul class="nav-menu">        
    <li class="nav-item">
      <a href="#">Sección 1</a>
    </li>        
    <li class="nav-item">
      <a id="focus_1" href="#">Sección 2</a>    
      <div class="sub-nav">
        <ul class="sub-nav-group">
          <li><a href="#">Sub-Sección 2.1</a></li>
          <li><a href="#">Sub-Sección 2.2</a></li>
          <li><a href="#">Sub-Sección 2.3</a></li>
        </ul>
      </div>
    </li>        
    <li class="nav-item">
      <a id="focus_2" href="#">Sección 3</a>       
      <div class="sub-nav">
        <ul class="sub-nav-group">
          <li><a href="#">Sub-Sección 3.1</a></li>
          <li><a href="#">Sub-Sección 3.2</a></li>
        </ul>
      </div>
    </li>        
    <li class="nav-item">
      <a href="#">Sección 4</a>
    </li>
  </ul>
</nav>
  <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://terrillthompson.com/tests/menus/accessible-mega-menu/js/jquery-accessibleMegaMenu.js"></script> 
Scroll to Top