Add an outline or border on hover and focus:
This method can be used in combination with adding an underline and/or background color change on hover and focus.
Visual focus indicator
All focusable elements MUST have a visual focus indicator when in focus.
Browsers normally indicate which part is in focus by outlining it with either a dotted line.
The dotted line is a bit difficult to see, especially for users with low vision, but as long as the default browser focus indicator is left intact, the visual styling is normally considered enough to meet the guidelines, at least in terms of minimal compliance.
Bad Example: Visual focus indicator has been removed
Sighted keyboard users need to see where the keyboard focus is. If you remove the visible focus indicator with outline:none and fail to replace it with some other style, sighted keyboard users will have no idea which link has the focus, making it extremely difficult to use the web page.
Good Example: Visually visible link
This hyperlink to the module introduction page is easily distinguishable visually from the surrounding text because of the underline and color change.
Begin code:
End code.
Focusable elements SHOULD have enhanced visual focus indicator styles.
Low vision users can benefit greatly from enhanced visual focus indicators on links, buttons, form elements, and other focusable items. Enhancements can include a different background color, different font color, outline, or border.
Good Example: Visual focus indicator has been enhanced
One way to enhance the visual focus indicator is to add a background color and more noticeable outline.
Begin code:
End code.
