[Dilettante_Pro]

<style>
ul li { display:inline; 
    border: 1px solid gray; 
}
div a{ border: 1px solid gray; }

</style>
<ul class='nav__list'>
  <li class = 'nav__item'>
    <a href="#" class='nav__item-link'>
      <span> Players </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link'>
      <span> Coaches </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link'>
      <span> Referees </span>
    </a>
  </li>

<div class='navigation'>
  <a  href="#"><span> Navigation</span> </a>
</div>
<script>
    var flag = true, idx = 0;
    var list = document.querySelectorAll('li a');
    var nav = document.querySelector('div a');
    nav.focus();
    document.onkeydown = function(e) {
        if(e.keyCode == 9) {
           e.preventDefault();
           if(flag) { 
              list[idx].focus(); 
              // здесь можно вызвать обработчик
              idx = (idx < list.length - 1)? idx + 1: 0;
           }
           else { nav.focus(); }
           flag = !flag;
        }
    }
    document.onkeyup = function(e) { if(e.keyCode == 9) e.preventDefault(); }
</script>