Accessible with Keyboard

Many users are physically unable to use a mouse, and might be navigating through the page using keyboard alone. Fortunately testing a website with keyboard is a simple accessibility test that requires no special tools or skills. Just try navigating your website using the keyboard only; don’t touch the mouse. Use the tab key to navigate between features, and other keys if doing so would seem to make sense (e.g., Enter or space to “click” the element that currently has focus, arrow keys to move within a widget such as a menu or slider, escape to close a pop-up window). As you do this, consider these questions:

  • Can you access all features?
  • Can you operate all controls?
  • Is it reasonably easy to tell where you are on the page?

Visible Focus for Keyboard Users

If it is difficult or impossible to tell where you are on the page when navigating with keyboard, this can typically be fixed with some very simple CSS.  The following examples show how to change the visible style when a link has focus. In this case, the foreground and background colors are swapped, both for mouse users and keyboard users.

A link, with black text on a white background:

  
    a 
    {
    
 color
    :
     black
    ;
    
 background
    -
    color
    :
     white
    ;
    
 text
    -
    decoration
    :
     underline
    ;
    }

Swap the colors and remove the underline when a mouse user hovers over the link:

  a
  :
  hover 
  {
  
  color
  :
   white
  ;
  
  background
  -
  color
  :
   black
  ;
  
  text
  -
  decoration
  :
   none
  ;
  }

Add the same effect for keyboard users, triggered when the link has focus:

  a
  :
  hover
  ,
   a
  :
  focus 
  {
  
  color
  :
   white
  ;
  
  background
  -
  color
  :
   black
  ;
  
  text
  -
  decoration
  :
   none
  ;
  }

Add the same effect for people using Internet Explorer prior to version 9, which didn’t support :focus:

  a
  :
  hover
  ,
   a
  :
  focus
  ,
   a
  :
  active 
  {
  
  color
  :
   white
  ;
  
  background
  -
  color
  :
   black
  ;
  
  text
  -
  decoration
  :
   none
  ;
  }