OnMouseEvents & Accessibility

... how do you handle it

[le_gber]

Hi All,

Just a quick one.

I've got a nav with mouse over and out effects on images/links.

How do you guys handle this on an accessibility point of view as I am trying to build my first accessible and valid site.

Do you create a:hover state for each of the link?

Thanks,

Leo

[drbrain]

A user needs some kind of pointing device to 'hover' an element:

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).

You can provide some kind of effect for the :focus pseudo class in addition to the :hover effect. This way users with just a keyboard can see which element is currently selected.

(Note that IE5 has some issues [dbaron.org] with the ordering of :focus.)

[vkaryl]

Yep - and I'm still tweaking with this as far as getting decent cross-browser support without bloated code etc. IE as usual is being a pain....

[createErrorMsg]

I've got a nav with mouse over and out effects on images/links.
How do you guys handle this on an accessibility point of view

One accessibility 'problem' with javascript rollover menus is that there is no text available for users who access your page in a manner that does not allow/cooperate with images. So a button that says "home" in a nice fancy font with a drop shadow and beveled edges says nothing on a browser with styles disabled or a screen reader. (Also, with JS disabled, those nice rollovers don't even work.)

A solution is to replace those js rollover menus with css rollover menus. In a CSS menu, the nav bar is styled as a list of links (these can be manipulated into a horizontal row, if that's what you want), then each link can be given a background-image to emulate a button. The tex of the button is the actual text of the link (although a recent thread [webmasterworld.com] details what seems to be a pretty decent way to replace that text with an image).

This way, screen readers and other image disabled devices still get the pure text menu. It also makes the nav bar more spider-friendly since it's text marked up in a nice semantic way, instead of JS delivered images.

For lots of examples and explanations of how to mark up link lists in this way, check out Listamatic [css.maxdesign.com.au].

[vkaryl]

Hey, cEM - I KEEP forgetting that sort of thing! Thanks for reminding my aging grey cells AGAIN. Maybe that's my missing link....

[le_gber]

Thaks to all of you, I've replace the little images with a big one and text and put the links (with :hover/:focus state) in a list and positionned them using some examples found around the web (css-p) - the page validate and is accessible according to Bobby Standards - I'm thrilled it was my first attempt to accessibility.

Thanks again.

Leo