A keyboard focus and mouse hover styling strategy

  • Actively style keyboard focus, do not rely on browser defaults for keyboard focus styling.
  • Change background color for both mouse hover and keyboard focus styling for links and form controls.
  • Use border styling for keyboard focus:
    • Add a CSS border when a link or form control receives focus, adjust the margin or padding width to compensate for the border with when it appears. Do not use a transparent border width, since this will not work in high contrast display modes.
    • Use CSS outline with an outline color and solid outline when a link or form control receives focus.
  • For links in the main content and complementary areas of a web page make sure they are underline for both focus and hover, but recommend they allways have underline.
  • Make sure all styling options meet WCAG 2.0 Level AA color contrast requirements.