As we strive to make our web sites as accessible as possible, some of our favourite little design and/or interactivity tricks get left by the way side or become concrete accessibility no-nos.

One of our trusty old friends, the 'rollover' button is one such casualty as the javascript used to action these buttons and the fact that we are using images without live text for navigation make this a somewhat less that accessible feature of any web site.

You would be forgiven for thinking that it was the end of the road for the beloved rollover then?

Well fortunately not! Thanks to the wonders of creative CSS coders we are saved.

Using the visibility declaration attached the hover state of a link in CSS we can 'hide' elements when we mouse over them.
There are a few versions of the CSS Rollover showing up on web tutorial sites and while many are good, none are as logically set out and accessible as the one I found at www.webcredible.co.uk written by Mark Angeletti.

Apart from the thoughtful way the code has been written and the complete lack of any noticeable 'lag' (associated with some CSS rollovers,) the other massive advantage of Mark's solution is that not only can we rollover images without Javascript, we can include live text links within the rollovers, making them ultra accessible.

The basic concept is that we have background image to a div (our button background or place holder), a div above this containing an 'off' state image background (our button), live text above the background image and then when we mouse over, we hide the background image (revealing the place holder (over state) image below) and/or changing the styling of the text, giving the effect of an instant rollover.

The full tutorial and less confusing explanation of Mark's technique can be found on the following page: http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtm