[Dilettante_Pro]

Вариант, работающий также в IE и FF

<style>
ul li { display:inline; 
    border: 1px solid gray; 
}
div a{ border: 1px solid gray; }
:focus { background-color:lightgreen;}
</style>
<ul class='nav__list'>
  <li class = 'nav__item'>
    <a href="#" class='nav__item-link' tabindex="2">
      <span> Players </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="4">
      <span> Coaches </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="6">
      <span> Referees </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="8">
      <span> &lArr; </span>
    </a>
  </li>
</ul>
<div class='navigation'>
  <a  href="#" tabindex="1"><span> Navigation</span> </a>
</div>
<script>
    var refs = document.querySelectorAll('a');
    var list = document.querySelectorAll('li a');
    var nav = document.querySelector('div a');
    nav.focus();
    [].forEach.call(refs, function(it) {
        it.addEventListener('focus',  function() {
           var ti = +this.getAttribute('tabindex');
           ti = (ti + 1).toString();
           if(this != nav) nav.setAttribute('tabindex',ti );
           if(this == list[list.length - 1]) list[0].focus();
       });
    });
</script>