Part 3: Keyboard Focus and hover styling

Keyboard focus and hover styling should be similar to to harmonize the look and feel of styling between interaction techniques.
Recommend focus styling has a border and hover does not.
focus styling should use a 2 pixelborder or outline width to make the control with focus easy for users to see and track.
If the border technique is used the border must be removed when the widget does not have focus to support focus styling to change when users select operating system high contrast modes.
Need to use onfocus and onblur events to create focus styling of standard radio buttons and checkboxes by styling their labels.
Styling background color makes the focus change much easier to detect visually.

Example

Pizza Toppings Green pepper Onion

Mushrooms

Spinach