WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tabbing and the hover event

for

From: Mike Osborne - AccEase
Date: Oct 2, 2008 6:00PM

Thanks for that - wasn't aware of the :focus CSS pseudo class. Just tested
it out - brilliant in Firefox.

In general we should be seeing in a stylesheet

a:hover, a:focus {

...some styling

}

so that keyboard users get a similar experience to mouse users.

Just tried the a:hover, a:focus in some browsers:
Safari for Windows - can't tab to links, only form elements
Firefox 2 - works fine
IE6 & IE7 - focus not supported
Google Chrome - works fine
Opera 9.50 - tab for form controls and focus not supported, Ctrl + cursor
down arrow for next link has browser highlighting (no focus or hover)
Netscape 8.1 - works fine

Regards
Mike Osborne

AccEase Ltd
p. 04 934 2821
m. 021 675 010
e. <EMAIL REMOVED>
w. www.AccEase.com

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Patrick H. Lauke
Sent: Friday, 3 October 2008 11:23 a.m.
To: WebAIM Discussion List
Subject: Re: [WebAIM] Tabbing and the hover event

Mike Osborne - AccEase wrote:

> One site www.national.org.nz <http://www.national.org.nz/>; uses CSS-style
> dropdown menus (no Javascript) in the main menu bar. One of our testers is
a
> keyboard-only tester (no mouse) and was asking if there was a key
> combination that would initiate the dropdown. Are there any?
>
>
>
> It occurred to me that when using the tab key to navigate from link to
link,
> shouldn't the browser be firing the hover event (the link has focus)? I
> think this would be quite useful - then any hover highlighting would be
> available to keyboard users - not just the hard-to-see dotted outline you
> get with a link in focus now. Is this a good idea? If the browser can
fire
> an event to display an outline, it can't be that hard to also fire the
hover
> event. Any browser developers out there care to comment?

Simple answer: hover events (both in javascript and the :hover CSS
pseudoclass) are only triggered by mouse/pointing device hovering. You
need to double them up with focus events (onfocus="", watching out for
the "focus" event, and/or using :focus CSS pseudo).

P
--
Patrick H. Lauke