WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Drop-down menus using javaScript to navigate and Accessibility Issues

for

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

From: Grossman, Susan
Date: Fri, May 28 2004 8:42AM
Subject: Drop-down menus using javaScript to navigate and Accessibility Issues
No previous message | Next message →

Hello List Members,

We are building an internal web application that will be a portal with multiple application 'modules' from it. We are building
things backwards due to deadlines and a single application module is being developed at the same time as the enterprise L&F and standards, thus many of the standards are being dictated by the needs of the initial user group
(client). Each module has it's own client base, though some clients use multiple modules (user authentication login model). The initial client is
very adamant that the "actions"&, which can be quite a list, be drop-down menus (as opposed to buttons or links) - but no GO
button. I am basically using the typical js for this:

function takeaction(form)

{
var url = document.selectform.actions.options[document.selectform.actions.selectedIndex].value

window.location.href = url

}

................................




................................

Since we're using middle ware (java back-end) we'd be using process pages (pages without any html) to direct to from the drop-downs to
handle whether we need to add in different actions like submit methods, etc.

ADA level 2 compliance is our enterprise standard we are setting in our official guidelines/standards doc we're writing simultaneously - with additional level 3 that we can get approved by the enterprise architect. We've set up an exception process for
when requirements needs a push back from our rulings and neither side will give. We are setting up the entire portal and all application off of it (modules) as css tableless design.

How would you suggest handling the requirement of these navigational/actionable drop-down menus? Additional text links at page bottom? Is there an accessible script hack? What exactly are all
the issues and arguments? (ok - maybe a bit much to ask... hoping someone can point me to some articles....)

Any help would be greatly appreciated.

Susan Grossman

From: Chris Heilmann
Date: Fri, May 28 2004 8:53AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

> How would you suggest handling the requirement of these
> navigational/actionable drop-down menus? Additional text links at page
> bottom? Is there an accessible script hack? What exactly are all the
> issues and arguments? (ok - maybe a bit much to ask... hoping someone
> can
> point me to some articles....)

First tip, cut some whitespace in your emails :-)

The problem is not the script itself but the handling by the browser.
First of all you create dead form elements when javascript is not
available. Secondly onchange means you cannot use a keyboard to send off
the form, as every change in the form (tabbing to it - hitting cursor
down) will send it off, meaning I can never reach any other option but the
next one.

AFAIR there is no way around that onchange problem, for the script
dependence you could do a clever script that replaces the original
functionality of a certain element or even replace it with something
different altogether.

Some examples are in my course:
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html
especially in 6. Keep effects mouse independent and the datepicker and
imagepop example in
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter3.html

HTH

Chris


--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: julian.rickards
Date: Fri, May 28 2004 11:13AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

From: Mike Brockington
Date: Mon, May 31 2004 2:38AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

Hi,
While Julian's idea of the 'noscript-only' button is quite clever, I think that he may be missing a point. I have often seen it said that navigating a select box with the keyboard produces an onChange event every time that the user scrolls down a line, therefore changing the page location unnecessarily. Can anyone else confirm or deny this?
My suggestion would be that you set up a DHTML drop down menu. With careful styling you should be able to get the appearance that the client wants, but since the menu would be made up of HREF's you would have less trouble with accessibility, and no need for a GO button.

Mike



What's new on www.edinburgh.gov.uk
View building warrants online www.edinburgh.gov.uk/building
Keeping people up-to-date with Council decisions and business www.edinburgh.gov.uk/cpol
Is your garden a potential winner? www.edinburgh.gov.uk/keepedinburghgrowing
**********************************************************************
This Email and files transmitted with it are confidential and are intended for the sole use of the individual or organisation to whom they are addressed. If you have received this Email in error please notify the sender immediately and delete it without using, copying, storing, forwarding or disclosing its contents to any other person. The Council has endeavoured to scan this Email message and attachments for computer viruses and will not be liable for any losses incurred by the recipient.
**********************************************************************

From: julian.rickards
Date: Mon, May 31 2004 6:42AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

>

From: Tim Beadle
Date: Tue, Jun 01 2004 3:11AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

On Mon, May 31, 2004 at 09:39:02AM +0100, mike.brockington wrote:
> While Julian's idea of the 'noscript-only' button is quite clever, I think
> that he may be missing a point. I have often seen it said that navigating a
> select box with the keyboard produces an onChange event every time that the
> user scrolls down a line, therefore changing the page location unnecessarily.
> Can anyone else confirm or deny this?

In Firefox 0.8, using the keyboard to navigate an onchange-enabled dropdown
does *not* fire the event until return is pressed.

HTH,

Tim
--
"That's a whole lotta transparent GIFs going to be waiting in line at the job
centre." -- Nathan Pitman

From: sneezypb.1244364
Date: Tue, Jun 01 2004 11:49AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

--- WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = wrote:

> The initial
client is very adamant that

> the "actions", which can be quite a list,
be drop-down menus (as opposed

> to buttons or links) - but no GO button.






Consider dynamically generating the list of items. In the no-script
portion, provide a link (or generate in the page) the same items in the more
accessible format.



Of course, should the item list become long (over 20
items), the drop-down menu will become very difficult to use.



Ezra

http://www.ezrasf.com/

From: Chris Heilmann
Date: Tue, Jun 01 2004 11:55AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

>
> --- WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = wrote:
>> The initial
> client is very adamant that
>> the "actions", which can be quite a list,
> be drop-down menus (as opposed
>> to buttons or links) - but no GO button.
>
>
>
> Consider dynamically generating the list of items. In the no-script
> portion, provide a link (or generate in the page) the same items in the
> more
> accessible format.
>
> Of course, should the item list become long (over 20
> items), the drop-down menu will become very difficult to use.

What is the use of a noscript section?

Javascript can be used cleverly enough to remove the go button and add the
onchange event to the select in an onload event. In any case, none of
these solutions fix the borked keyboard navigation.

IMHO accessibility does not mean "make something different for
non-javascript", as that means double maintenance, it means "don't rely on
things that may not be available, AND don't use those things to make it
inaccessible".


--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: Peter-Paul Koch
Date: Wed, Jun 02 2004 8:22AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

>--- WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = wrote:
> > The initial
>client is very adamant that
> > the "actions", which can be quite a list,
> be drop-down menus (as opposed
> > to buttons or links) - but no GO button.
>
>
>
>Consider dynamically generating the list of items. In the no-script
>portion, provide a link (or generate in the page) the same items in the
>more
>accessible format.

Not necessary. You could do:


Link1
Link2
[etc]


Initially this list of links is served and it is completely accessible.

If advanced JavaScript happens to be available, go through the ul, create a
select, add one option for each link, add an event handler that sends the
user to the next page onChange, and destroy the ul.

Result is a perfectly accessible navigation that is maintained at one place
and complies with client specifications.


-------------------------------------------------------------------
ppk, freelance web developer
Interaction, copywriting, JavaScript, integration
http://www.quirksmode.org/
Column "Keep it Simple": http://www.digital-web.com/columns/keepitsimple/
------------------------------------------------------------------

_________________________________________________________________
MSN Search, for accurate results! http://search.msn.nl

From: sneezypb.1244364
Date: Wed, Jun 02 2004 9:04AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

--- WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = wrote:

> What is
the use of a noscript section?

>

The noscript allows the page to be usable
to people not using JavaScript at all. I do lots of surfing from my work computer
in web browsers without JS. Occasionally I will leave because someone only
has navigation which works with JS I cannot use.



Ezra

From: Chris Heilmann
Date: Wed, Jun 02 2004 9:15AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

>
> --- WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = wrote:
>> What is
> the use of a noscript section?
>>
> The noscript allows the page to be usable
> to people not using JavaScript at all. I do lots of surfing from my work
> computer
> in web browsers without JS. Occasionally I will leave because someone only
> has navigation which works with JS I cannot use.

It would help to quote the rest of my mail aswell.

Personally I consider a noscript section rather outdated, as you _can_
write javascript that only enhances the markup when it is available.

Using NOSCRIPT to fix javascript dependencies is fixing the symptom not
the cause. You wrote Javascript that is obtrusive and mess up the markup
to work around it rather than using DOM to alter the markup.

It is deprecated and mixes the markup with behaviour. We should think
about scripting more properly instead.


--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: sneezypb.1244364
Date: Wed, Jun 02 2004 11:57AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

That is fine. I will take the hint and not respond to posts. At least not
to the list.



Thanks.



Ezra

From: Chris Heilmann
Date: Wed, Jun 02 2004 12:06PM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | No next message

>
> That is fine. I will take the hint and not respond to posts. At least not
> to the list.

Sorry if I offended you, but you deleted my explanation why I asked what
good noscript sections are for. It is advisable to read a whole email and
then answer it rather than just picking out parts and changing the
content.
Maybe my sentence about "what good are noscript" was misleading. Sorry
about that.