The dynamic pseudo-classes :active and :focus

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.

The 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 that makes it difficult for them to access the page.

The dynamic pseudo-class :focus works when an element is in focus. This specs states that there is an acception with keyboard events but this seems to be not true if you use tabbing in Firefox, Safari or IE8 or SHIFT and arrow keys in Opera.

The dynamic pseudo-class :active works when an element is activated. This is when you select an element with a left mouse click. The element is in an :active state during the period when the element is selected until the time that a finger is raised from the mouse.

Another test using outline with dynamic pseudo-classes.