E-mail List Archives
Number of posts in this thread: 6 (In chronological order)
From: Chris Heilmann
Date: Jun 1, 2004 6:14PM
Subject: Possible Solution for accessible dropdown navigation
No previous message | Next message → 
Ok, if you followed, we had the following problem the last few days:
We wanted a dropdown navigation that does not have a "go" button, but is 
still accessible. The problem is that when you do an onchange on the 
select element, you cannot navigate to it via Keyboard, and generally 
without a "go" button, we are always dependent on Javascript.
I took the approach the other way around:
- Without Javascript you'll have a normal select with a go button.
- With Javascript enabled I wanted to replace the keyboard-inaccessible 
select solution with an easier one, a list with links
- I didn't want to use any inline Javascript
- I wanted to make the dropdown easier to be styled - some questions 
about that occured on CSS-D
The solution is here: 
http://www.onlinetools.org/tests/workingnavdropdown.html
It is far from perfect, but I think I finally found an example where a 
DHTML dropdown is making sense :-)
What do you think?
From: Andrew Kirkpatrick
Date: Jun 1, 2004 7:28PM
Subject: Re: Possible Solution for accessible dropdown navigation
← Previous message | Next message → 
>
> We wanted a dropdown navigation that does not have a "go" button, but 
> is still accessible. The problem is that when you do an onchange on 
> the select element, you cannot navigate to it via Keyboard, and 
> generally without a "go" button, we are always dependent on Javascript.
>
This is not broadly accurate.  Browser support varies, from firefox, 
where onchange requires enter for activation, to IE Win where you can 
access the drop down but need to use alt+down arrow, to IE Mac where it 
is true. 
>
> - Without Javascript you'll have a normal select with a go button.
> - With Javascript enabled I wanted to replace the 
> keyboard-inaccessible select solution with an easier one, a list with 
> links
> - I didn't want to use any inline Javascript
> - I wanted to make the dropdown easier to be styled - some questions 
> about that occured on CSS-D
>
> The solution is here: 
> http://www.onlinetools.org/tests/workingnavdropdown.html
>
> It is far from perfect, but I think I finally found an example where a 
> DHTML dropdown is making sense :-)
>
> What do you think?
You have accomplished much of what you set out to, but you're losing 
some desired behavior.  For a screen reader and keyboard user, the 
experience now is that instead of 1 item with four subparts to 
optionally navigate through, there are 5 links to navigate through, the 
first of which is quietly non-functioning. 
A nice thing about select boxes is that the user doesn't need to see 
everything within one unless desired.  By turning the option element 
contents into anchor tags, the contents of the select are linearized, 
and the result is a less-usable experience for screen reader and 
keyboard users.  The main accessibility issue that I see for screen 
reader users is the "jump to:" link, which does nothing for the screen 
reader user, but this is not conveyed to the user.  The result will 
often be the user wondering what happened.
It is getting there, but anchor elements have special meaning to both 
screen readers and browsers that is getting in the way...
AWK
-- 
Andrew Kirkpatrick, Project Manager
WGBH National Center for Accessible Media
http://ncam.wgbh.org
617.300.4420
From: Tim Beadle
Date: Jun 2, 2004 2:59AM
Subject: Re: Possible Solution for accessible dropdown navigation
← Previous message | Next message → 
On Wed, Jun 02, 2004 at 01:46:29AM +0100, lists38 wrote:
> What do you think?
I think you could have added the onchange event and hidden the Go button using
JavaScript, which would remove the need for the DHTML alternative.
Regards,
Tim
-- 
"A fool chooses to starve himself and we choose to watch. One billion people 
have no choice and we ignore them." 
  -- Placard beneath David Blaine's perspex box
From: Chris Heilmann
Date: Jun 2, 2004 3:54AM
Subject: Re: Possible Solution for accessible dropdown navigation
← Previous message | Next message → 
>
> On Wed, Jun 02, 2004 at 01:46:29AM +0100, lists38 wrote:
>> What do you think?
>
> I think you could have added the onchange event and hidden the Go button
> using
> JavaScript, which would remove the need for the DHTML alternative.
Err, working around the onchange event was the whole purpose of the
experiment, mainly as IE does not allow you to go to any of the options,
but sends the next one when you press cursor-down...
From: Tim Beadle
Date: Jun 2, 2004 4:01AM
Subject: Re: Possible Solution for accessible dropdown navigation
← Previous message | Next message → 
On Wed, Jun 02, 2004 at 11:52:29AM +0200, lists38 wrote:
> > On Wed, Jun 02, 2004 at 01:46:29AM +0100, lists38 wrote:
> >> What do you think?
> >
> > I think you could have added the onchange event and hidden the Go button
> > using
> > JavaScript, which would remove the need for the DHTML alternative.
> 
> Err, working around the onchange event was the whole purpose of the
> experiment, mainly as IE does not allow you to go to any of the options,
> but sends the next one when you press cursor-down...
Sorry - my bad! I was thinking about getting over a javascript-not-enabled
scenario. How about using onkeypress instead of onchange?
Tim
-- 
"The first priority in finding a needle in a haystack is not to get a bigger 
haystack" - iamnotandrei
From: Chris Heilmann
Date: Jun 2, 2004 4:15AM
Subject: Re: Possible Solution for accessible dropdown navigation
← Previous message | No next message
>
> On Wed, Jun 02, 2004 at 11:52:29AM +0200, lists38 wrote:
>> > On Wed, Jun 02, 2004 at 01:46:29AM +0100, lists38 wrote:
>> >> What do you think?
>> >
>> > I think you could have added the onchange event and hidden the Go
>> button
>> > using
>> > JavaScript, which would remove the need for the DHTML alternative.
>>
>> Err, working around the onchange event was the whole purpose of the
>> experiment, mainly as IE does not allow you to go to any of the options,
>> but sends the next one when you press cursor-down...
>
> Sorry - my bad! I was thinking about getting over a javascript-not-enabled
> scenario. How about using onkeypress instead of onchange?
Onkeypress has even more problems, as it messes with the key-settings and
shortcuts of screen readers and gets triggered by shift and tab on some
browsers.
-- 
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/
