keyboard accessibility menu

Question

I think there is a piece of code .. Sub menu is not accessible by keyboard "TAB" I want to connect this is my WordPress theme, Submenu is not :focus when this code you used. Can anyone help with this?

$(function() {

  $('.menu-item-has-children a').focus( function () {
    $(this).siblings('.sub-menu').addClass('focused');
  }).blur(function(){
    $(this).siblings('.sub-menu').removeClass('focused');
  });

// For children
  $('.sub-menu a').focus( function () {
    $(this).parents('.sub-menu').addClass('focused');
  }).blur(function(){
    $(this).parents('.sub-menu').removeClass('focused');
  });
});

nav {
  font: 18px/1.7 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Helvetica,Sans-Serif;
  margin: 20px;
}

/* 親メニュー - Parent nav */
nav > ul > li {
  position: relative;
  float: left;
  margin-right: 45px;
}
nav a {
  color: #0bd;
  text-decoration: none;
}
nav ul a:hover {
  color: #0090aa;
}

/* 子メニュー - .sub-menu */
nav .sub-menu {
  position: absolute;
  width: 180px;
  background: #0bd;
  top: 30px;
  display: none;
}
nav .sub-menu a {
  color: #fff;
  padding: 10px 15px;
  display: block;
}
nav .sub-menu a:hover {
  color: #fff;
}

/* ホバー＆フォーカスで子メニュー表示 */
/* Display sub menu by hover & focus */
nav .menu-item-has-children:hover ul,
nav .menu-item-has-children ul.focused {
  display: block;
}
nav li.menu-item-has-children li a:hover,
nav li.menu-item-has-children li a:focus {
  background: #0090aa;
}

<nav role="navigation">
  <ul>
    <li class="menu-item-has-children">
      <a href="#">Coding ▼</a>
      <ul class="sub-menu">
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">SVG</a></li>
      </ul>
    </li>
    <li class="menu-item-has-children">
      <a href="#">Design ▼</a>
      <ul class="sub-menu">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Fonts</a></li>
        <li><a href="#">Colour</a></li>
      </ul>
    </li>
    <li><a href="#">Tips</a></li>
    <li><a href="#">For Beginner</a></li>
  </ul>
</nav>