WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Tabbing and the hover event

for

Number of posts in this thread: 4 (In chronological order)

From: Mike Osborne - AccEase
Date: Thu, Oct 02 2008 4:20PM
Subject: Tabbing and the hover event
No previous message | Next message →

We are currently assessing/testing the accessibility of party political
sites in New Zealand - are they interested in getting their information out
to all the voters?



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?



Regards
Mike Osborne

AccEase Ltd
p. 04 934 2821
m. 021 675 010
e. <mailto: = EMAIL ADDRESS REMOVED = > = EMAIL ADDRESS REMOVED =
w. <http://www.AccEase.com>; www.AccEase.com



All the information for all the people all of the time.



From: Patrick H. Lauke
Date: Thu, Oct 02 2008 4:30PM
Subject: Re: Tabbing and the hover event
← Previous message | Next message →

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
______________________________________________________________
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
______________________________________________________________
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
______________________________________________________________
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to = EMAIL ADDRESS REMOVED =

From: Mike Osborne - AccEase
Date: Thu, Oct 02 2008 6:00PM
Subject: Re: Tabbing and the hover event
← Previous message | Next message →

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 ADDRESS REMOVED =
w. www.AccEase.com

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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

From: Patrick H. Lauke
Date: Thu, Oct 02 2008 6:40PM
Subject: Re: Tabbing and the hover event
← Previous message | No next message

Mike Osborne - AccEase wrote:

> Just tried the a:hover, a:focus in some browsers:
> Safari for Windows - can't tab to links, only form elements

Edit > Preferences > Advanced and tick "Press Tab to highlight each item
on a webpage"

> Firefox 2 - works fine
> IE6 & IE7 - focus not supported

Due to a bug in IE, you also want to use :active, so your style selector
becomes

a:focus, a:hover, a:active

The order is also important for older browsers. LVFHA - link, visited,
focus, hover, active.

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

Just tried some simple styling of textarea:focus and input:focus in
Opera9.5, and it seems to honour these fine when tabbing to them. ctrl +
cursor seems to do a mix of its own highlighting, but also honours other
:focus rules (e.g. if you're doing something other than just changing
colour - making text bigger, old bold, or changing a background image
with padding etc)

> Netscape 8.1 - works fine


--
Patrick H. Lauke
______________________________________________________________
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
______________________________________________________________
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
______________________________________________________________
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to = EMAIL ADDRESS REMOVED =