Outline used with dynamic pseudo-classes

Tabbing in Firefox, Safari or IE8 or using the SHIFT and arrow keys in Opera will show an outline to the below links. The same will happen if you select each link with a left mouse click or right click if the setting for the mouse is in reversed. The later may be due to someone who is left handed or a user who is right handed but can not use their index finger.

These pseudo-classes in comination with outline provides a visual cue to the state of an element. Most importantly they are an accessibility feature to assist someone with a form of disability.

The examples on this test gave a default outline on an element to act as a visual cue. These outlines can be changed by using the dynamic pseudo-classes :focus and :active.

The below example has a style for the outline property. Since no style is given for the :focus and :active states, then no change happens to the outline. This renders visual cues neutral and impinges of accessibility.

Another test using just the dynamic pseudo-classes :active and :focus.