People with low vision or people with cognitive disabilities may benefit from a clear indication of which link currently has focus. This is largely controlled by the user's browser. However, CSS can be used to provide an additional indicator.
Use the CSS ":focus" pseudo-class to select and style a link when it gains focus. Pseudo-classes are well supported in most browsers and easy to apply.
Other relevant pseudo-classes include:
The order in which the pseudo-classes are listed in the CSS is important. This is because the CSS is interpreted in order with later selectors overriding the earlier selectors. By arranging pseudo-classes in the order above, this ensure that they will not override each other. A useful way to remember the order is "LoVe HAte" - Link, Visited, Hover, Active.
// Using the :focus CSS pseudo class
a:focus
{
background-color:yellow;
}
// Using other relevant CSS pseudo-classes
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: yellow; }
a:active { color: red; }