Keyboard Testing

Many users need use a keyboard to navigate through websites. When testing a page or component with a keyboard, test that all focusable items have a perceivable outline and all interactive items can be activated with a keyboard.

One of the main issues with keyboard testing can come from outline styles being overridden. Instead of completely overriding the outline styles with outline: none; you can create a custom outline style such as the one below which adds an outline to every focusable item across the site.

    
      *:focus {
        outline: none;
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
      }
    
  

Keyboard Testing Cheatsheet