WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: drop down/jump menus

for

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

From: Leo Smith
Date: Mon, Jul 30 2001 1:11PM
Subject: drop down/jump menus
No previous message | Next message →

Hi everyone,
I had a question about drop down menus and accessibility. Not the more recent javascript/DHTML drop down/fly out menus that are now starting to appear more and more in web sites, but the more traditional list menu form element that can also be used as "jump- menu."
My thinking is that to be accessible, there should be a "go" button by the list menu, meaning that the list is keyboard scrollable via the tab key and the arrow keys, and then the go button can be tabbed to when the desired link has been scrolled to and selected (without the "go" button, the first link down in the list is the one that is selected and that the page jumps to when a user attempts to scroll the list with the keyboard).
The "title" attribute should also be used for each <input> element describing that it is in fact a link and specifying the destination.
For example:
<form method="post" action="/cgi-bin/jump.cgi" title="navigation menu">
<select name="URL" size=1>
<option value="/link1.html" title="link to link1">link1</option>
<option value="/link2.html" title="link to link2">link2</option>
<option value="link3.html" title="link to link3">link3</option>
</select>
<input type="submit" value="Go">
</form>

Is my thinking correct? Would this be OK accessibility wise?
I have seen some sites that repeat all the links in such a dropdown menu at the bottom of the page as text links. Is this really necessary for accessibility? What is the difference between using a list box form element as a link compared to an image as a link, as long as descriptive text is provided in each case (alt text in the case of images and title text for each list item in the jump menu.)
Thanks much,
leo.
Leo Smith
USM Office of Publications and Marketing
207-780-4774

From: Paul Bohman
Date: Mon, Jul 30 2001 1:36PM
Subject: Re: drop down/jump menus
← Previous message | Next message →

[Leo] My thinking is that to be accessible, there should be a "go" button by
the list menu, meaning that the list is keyboard scrollable via the tab key
and the arrow keys, and then the go button can be tabbed to when the desired
link has been scrolled to and selected (without the "go" button, the first
link down in the list is the one that is selected and that the page jumps to
when a user attempts to scroll the list with the keyboard).
[Paul] This is definitely an appropriate tactic.
[Leo] The "title" attribute should also be used for each <input> element
describing that it is in fact a link and specifying the destination.
[Paul] As long as the title adds additional information that is not
otherwise available by the text within the link, I think this is a fine
idea. Note that not all screen readers read the title attribute of links (or
any other kind of title, in some cases). Adding the words "link to" may or
may not be all that useful. I think that if you provide a good context for
the dropdown list, it will be unnecessary to explicitly state that each item
is a link to another page. For example, right before the drop down list you
could say "Quick links index" or something else that conveys the purpose of
the list of links. If you do that, it should be fairly obvious that the list
is a list of links. It probably wouldn't hurt to add the words "link to",
but I'm not sure they're necessary under most circumstances.
[Leo] I have seen some sites that repeat all the links in such a dropdown
menu at the bottom of the page as text links. Is this really necessary for
accessibility?
[Paul] I would say that this is probably overkill. Nearly all technologies
these days can handle forms, and have been able to for some time. There is
no need to make redundant text links for forms.
[Leo] What is the difference between using a list box form element as a link
compared to an image as a link, as long as descriptive text is provided in
each case (alt text in the case of images and title text for each list item
in the jump menu.)
[Paul] In principle, they are all the same thing. As long as the context
within the page allows the users to realize that they have just entered into
a list of links, there shouldn't be any practical difference among them
either. Image links have the advantage of providing visual cues to the
link's destination. Text links have the advantage of being the simplest and
most straightforward type of link. Drop down lists of links have the
advantage of condensing long lists of links that can be easily skipped over
by the user (whether visually, with keyboard-only access, or with a screen
reader. It's just a matter of fitting your choice to the circumstance at
hand, in my opinion.
Paul Bohman
Technology Coordinator
WebAIM: Web Accessibility in Mind (www.webaim.org)
Center for Persons with Disabilities (www.cpd.usu.edu)
Utah State University (www.usu.edu)

From: Jo Miller
Date: Mon, Jul 30 2001 1:50PM
Subject: Re: drop down/jump menus
← Previous message | Next message →

>
>[Leo] I have seen some sites that repeat all the links in such a dropdown
>menu at the bottom of the page as text links. Is this really necessary for
>accessibility?
>
>[Paul] I would say that this is probably overkill. Nearly all technologies
>these days can handle forms, and have been able to for some time. There is
>no need to make redundant text links for forms.
[Jo] These reduntant text links may have been provided for dropdown
menus which were programmed using javascript (without the "go"
button) and which were therefore inaccessible. I agree with Paul that
for an accessible (server-side) dropdown, redundant links are not
necessary.
--
Jo Miller
= EMAIL ADDRESS REMOVED =

From: Leo Smith
Date: Mon, Jul 30 2001 2:11PM
Subject: Re: drop down/jump menus
← Previous message | Next message →

Paul..
thanks for the very helpful input.
In my original email I meant to say "The 'title' attribute should also be used for each <option> element describing that it is in fact a link and specifying the destination," rather than for each <input> element, but hopefully you all caught that from my example (as <input> is not, of course, used for form list boxes - apologies).
Do you think that providing an initial "empty" option element that describes the list box as a set of links is sufficient to indicate the purpose of the form element, rather than a title outside and independent of the list box form element.
For example:
<select name="something" size="1">
<option value="">Quick links</option>
<option value="/link2.html">link2</option>
<option value="link3.html">link3</option>

Thanks again..
leo.

On 30 Jul 2001, at 13:34, Paul Bohman wrote:
> [Leo] My thinking is that to be accessible, there should be a "go"
> button by the list menu, meaning that the list is keyboard scrollable
> via the tab key and the arrow keys, and then the go button can be
> tabbed to when the desired link has been scrolled to and selected
> (without the "go" button, the first link down in the list is the one
> that is selected and that the page jumps to when a user attempts to
> scroll the list with the keyboard).
>
> [Paul] This is definitely an appropriate tactic.
>
> [Leo] The "title" attribute should also be used for each <input>
> element describing that it is in fact a link and specifying the
> destination.
>
> [Paul] As long as the title adds additional information that is not
> otherwise available by the text within the link, I think this is a
> fine idea. Note that not all screen readers read the title attribute
> of links (or any other kind of title, in some cases). Adding the words
> "link to" may or may not be all that useful. I think that if you
> provide a good context for the dropdown list, it will be unnecessary
> to explicitly state that each item is a link to another page. For
> example, right before the drop down list you could say "Quick links
> index" or something else that conveys the purpose of the list of
> links. If you do that, it should be fairly obvious that the list is a
> list of links. It probably wouldn't hurt to add the words "link to",
> but I'm not sure they're necessary under most circumstances.
>
> [Leo] I have seen some sites that repeat all the links in such a
> dropdown menu at the bottom of the page as text links. Is this really
> necessary for accessibility?
>
> [Paul] I would say that this is probably overkill. Nearly all
> technologies these days can handle forms, and have been able to for
> some time. There is no need to make redundant text links for forms.
>
> [Leo] What is the difference between using a list box form element as
> a link compared to an image as a link, as long as descriptive text is
> provided in each case (alt text in the case of images and title text
> for each list item in the jump menu.)
>
> [Paul] In principle, they are all the same thing. As long as the
> context within the page allows the users to realize that they have
> just entered into a list of links, there shouldn't be any practical
> difference among them either. Image links have the advantage of
> providing visual cues to the link's destination. Text links have the
> advantage of being the simplest and most straightforward type of link.
> Drop down lists of links have the advantage of condensing long lists
> of links that can be easily skipped over by the user (whether
> visually, with keyboard-only access, or with a screen reader. It's
> just a matter of fitting your choice to the circumstance at hand, in
> my opinion.
>
> Paul Bohman
> Technology Coordinator
> WebAIM: Web Accessibility in Mind (www.webaim.org)
> Center for Persons with Disabilities (www.cpd.usu.edu)
> Utah State University (www.usu.edu)
>
>
>

Leo Smith
USM Office of Publications and Marketing
207-780-4774

From: tklm
Date: Mon, Jul 30 2001 2:25PM
Subject: Re: drop down/jump menus
← Previous message | No next message

Hi
I'm new to the list, so hello everyone.
One problem commonly seen when drop-down select boxes are used for
navigation is that the page author has relied on a JavaScript event to
trigger the navigation. For users without JavaScript, there's no way of
triggering the navigation - you change the option and nothing happens. So,
yes, there should be a "go" button - it's needed to submit the chosen option
for users without JavaScript.
> without the "go" button, the first link down in the list is the one that
is selected
If you're using IE, you can select *any* item from the options by tabbing to
the drop-down box, then pressing Alt-DownArrow, then UpArrow or DownArrow to
move up and down the options, followed by Enter/Return to finalize the
selection. The problem with this is that you probably can't rely on users
doing this - they're possibly more likely to tab to the control and use the
up/down keys as you describe.
Another problem with using drop-down select boxes (or HTML form controls of
any kind) is that the text associated with them can't be resized (which is
surprising after so many generations of browser development). If you can
design a navigation menu in DHTML which also works without JavaScript, then
at least you have the advantage of having resizable fonts.
John Farrie
Accessibility by Design
"Design for accessibility and everyone can benefit"
http://accessibilitybydesign.co.uk