accesible

HTML

<ul class="tabs">
  <li>
    <a data-index="1" href="https://prismjs.com/examples.html">Estrategia</a>
  </li>
  <li>
      <a data-index="2" href="https://prismjs.com/examples.html">Identidad</a>
  </li>
  <li>
      <a data-index="3" href="https://prismjs.com/examples.html">Activacion</a>
  </li>
</ul>

SCSS

.tabs {
  display: flex;
  list-style: none;
  
  
  li {
    border: 1px solid #aaa;
    
    a {
      display: block;
      text-decoration: none;
      color: #000;
      padding: 10px 20px;
    }
  }
}

JavaScript

const tabsList = document.querySelector('ul.tabs');
const links = tabsList.querySelectorAll('a');

const handleFocus = (e) => {
	let index = parseInt(document.activeElement.dataset.index);
  if (e.keyCode === 37 && index > 1) {
		index--;
  }
  
  if (e.keyCode === 39 && index < links.length) {
		index++;
  }
  
  links[index-1].focus();
}


links.forEach(link => {
	link.addEventListener('keydown', handleFocus);
});