Adding Accessibility Features To Your Pages Using the :active/:focus pseudo-class

[jlhaslip 4]

Here is a tip for its use on your site.

 

Using CSS to tell your visitors where they are on your site can be fairly complicated depending on the method you use.

The CSS Specifications have defined a "pseudo-class" for the link which currently has 'focus' and another pseudo-class for the 'active' state.

 

They can be used to tell your visitors where their cursor is on the page and you do that be altering the CSS for the link which currently has the focus and those which are being activated.

 

The 'active' state only occurs momentarily while the mouse button is being depressed and released, so you need to look carefully for that condition. Or if you 'drag and drop' the link, it remains in the active state, too, but the greatest use for these pseudo-class attributes is for accessibility.

 

The 'focus' state tells you which link would be delivered to your Browser if you pressed the mouse right now. The ':focus' can be changed by using the tab button to navigate a page. this is a common technique for adding accessibility features to a site. Some users depend on their tab button instead of the mouse for whatever reason.

 

Visit this link to see the use of :active and :focus. View > Source the code to see how simple it is to add to your site.

 

*note*

Because these links on the Demo page all point back to itself as the current page, the focus state is retained by the browser. Don't expect that on a live site where you actually change pages. There are other techniques for indicating the 'current' page. Might need to add that as a Tutorial. Soon.

And the link back to the Xisto forums is not highlighted by the tab buttom because it is not selected by the "dl a" selector. To have the pseudo states effective for all links on the page, alter the :active and :focus rules deleting the 'dl' preceding the selected states. Or simply add another set of Rules defining the :active and :focus for the balance of the site outside of the 'dl'.

The correct order for listing link states on the CSS is a, a:link, a:visited, a:focus; a:hover; a:active, otherwise the various states override one another and won't behave according to the rules you have defined.

 

 

reference: http://www.w3.org/TR/CSS21/selector.html%23d-pseudo-classes