Keyboard navigation impossible or dysfunctional

How to fix

1. 1

   Test keyboard navigation

   Navigate your site using only Tab (forward), Shift+Tab (backward), Enter (activate), Escape (close). Each interactive element must be reachable and visible.

2. 2

   Do not remove the CSS outline

   css

   /* BAD: removing focus for "aesthetics" */
   * { outline: none; }
   a:focus { outline: none; }
   
   /* CORRECT: customize the outline without removing it */
   :focus-visible {
     outline: 3px solid #4A90E2;
     outline-offset: 2px;
     border-radius: 2px;
   }

3. 3

   "Skip to content" link (skip link)

   html

   <!-- First element of the page, visible on focus -->
   <a href="#contenu-principal" class="skip-link">
     Passer au contenu principal
   </a>
   
   <style>
   .skip-link {
     position: absolute;
     top: -40px;
     left: 0;
     background: #000;
     color: #fff;
     padding: 8px;
     z-index: 9999;
   }
   .skip-link:focus { top: 0; }
   </style>