E-mail List Archives

Search E-mail List Archives for

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

From: Chris Heilmann
Date: Tue, Jun 01 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: Tue, Jun 01 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: Wed, Jun 02 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: Wed, Jun 02 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: Wed, Jun 02 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: Wed, Jun 02 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/