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@ndm.gov.on.ca
Date: Fri, May 28 2004 11:13AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

-----Original Message-----
From: susan.grossman [mailto: = EMAIL ADDRESS REMOVED = ]

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


We have a similar function on our website which may not be quite as
accessible as I thought because it also uses onChange and therefore does not
support keyboard activation. However, what I did was to insert a submit
button within a block.

Here is some of the code:



Select from list
First Page
Second Page
...




and jumpmenu.asp is:

<%
RedirectURL = "http://www.domainname.com" &amp;
Request.QueryString("RedirectURL")
Response.Redirect RedirectURL
%>

If JS is enabled, the JS jump script function runs. If JS is disabled, the
submit (Go!) button is displayed and via the ASP redirect function, the
person is taken to the selected page.

There may be some lingering questions regarding whether onChange provides
keyboard support or if another trigger is better and secondly, does a screen
reader user understand what we are presenting and how it works. Regarding
#2, this type of functionality is quite common so I suspect that screen
reader users understand the process.

HTH,

Jules

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690

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@ndm.gov.on.ca
Date: Mon, May 31 2004 6:42AM
Subject: Re: Drop-down menus using javaScript to navigate and Accessibility Issues
← Previous message | Next message →

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

When I wrote that script, I hadn't realized that keyboard navigation might
trigger the onchange event and I agree that this may be a weakness of my
script. I am interested in hearing alternatives. Maybe onKeypress and
onClick could be used instead of onChange. What about onSelect?

However, I personally don't like the DHTML drop-down menu - there are
questions as to the usability of these types of menus by people who use
screen reader software.

Jules

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690


> Sent: Monday, May 31, 2004 4:39 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Drop-down menus using javaScript to navigate and
> Acc essibility Issues
>
>
>
> Hi,
> 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.
**********************************************************************

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

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@bloglines.com
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@bloglines.com
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@bloglines.com
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.