Description: With keyboard navigation it is important that the focused component can be visually identified. If the focused component is not somehow highlighted, the user cannot be sure which component has focus.
Context: While browsers should handle this by default, certain styling methods will break this functionality. For example do not disable the ‘outline:none’ property that surrounds an element on focus unless you are offering an alternative. Be sure to use both the ‘:focus’ and ‘:hover’ selectors to cover both mouse and keyboard focus.
a:hover, a:active, a:focus {
text-decoration: none;
color: green;
}
How to fix it: Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.
a:hover, a:active, a:focus {
text-decoration: underline;
color: green;
}