Welcome to WebmasterWorld Guest from 54.196.153.46

Forum Moderators: not2easy

Message Too Old, No Replies

OnMouseEvents & Accessibility

... how do you handle it

     
7:06 pm on Oct 18, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts:1550
votes: 0


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

7:36 pm on Oct 18, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 18, 2003
posts:827
votes: 0


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.)

7:50 pm on Oct 18, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 19, 2003
posts:1747
votes: 0


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....
7:54 pm on Oct 18, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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].

8:30 pm on Oct 18, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 19, 2003
posts:1747
votes: 0


Hey, cEM - I KEEP forgetting that sort of thing! Thanks for reminding my aging grey cells AGAIN. Maybe that's my missing link....
9:27 am on Oct 20, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts:1550
votes: 0


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