<div class="wrapper">
<a href="#" tabindex="1" class="image-nav-button prev">&larr; Prev Image</a>
<a href="#"  tabindex="2" class="image-nav-button next">Next Image &rarr;</a>
</div>
<p><small><a href="https://caniuse.com/#feat=css-focus-visible">See caniuse.com for more details &rarr;</a></small></p>

.wrapper {
  background: black;
  text-align: center;
  width: 360px;
  height: 100px;
  padding: 40px;
  box-sizing: border-box;
  color: blanchedalmond;
}
.image-nav-button {
  color: blanchedalmond;
  text-decoration: none;
  font-size: 20px;
  line-height: 1em;
}
.next {
  float: right;
}
.prev {
  float: left;
}

.image-nav-button:focus {
  outline: none;
  /* Try uncommenting below, then clicking the buttons */
  /* outline: 3px solid red; */
}
.image-nav-button:focus-visible {
  outline: 3px solid blanchedalmond;
}