WebAIM - Web Accessibility In Mind

E-mail List Archives

Suggestions on making an accessible pull-down menu?

for

From: Austin, Darrel
Date: Jun 24, 2005 8:32AM

On our new site, it's being proposed that we offer some ancillary navigation
in the form of FORM SELECT pull-downs.

The catch, as always, is 'fitting' these into the template when one doesn't
know, exactly, how wide they will end up being, since they are entirely
dependant on the contents of the pull down (the text strings)?

The strings, themselves, are somewhat long. It'd be like this:

How do I...
Get a divorce
Seek custody of my children
Find a lawyer
Etc.

Some options I've considered:

1) give it a fixed-width via CSS. Pros: This works great in Firefox and
Safari, as only the pull down widget, itself, is at that width, the actual
options that pop-up expand as wide as they need be. Cons: The problem is in
IE (and Opera), where it simply cuts off all the text options at the width
spec'd. Completely unreadable in a visual browser.

2) force a width based on character count and force longer OPTIONS onto
multiple lines, indenting the subsequent lines after the first using  
Pros: allows me to set a more reliable width. Cons: not nearly as
Accessible(?), as I assume each LINE is read as an option, making multi-line
options
quite inaccessible.

3) Forgoe the form widget and use a javascript method to create my own
'pull down' widget. Pros: Much more control. Con: maybe not as accessible.

#1 is my preferred option, but won't fly due to the IE issue. Perhaps
there's a javascript workaround? Onclick changes the size of the form
widget?

#2 is ideal, visually, but suffers some rather serious accessibility
Problems for those with screen readers and such.

#3, is maybe what I'll end up with. I'm thinking I'd put this navigation in
a div at the bottom of the page, and then OnClick, just reposition it at the
top. This would allow for accessibility (I'd put a 'skip to navigation' link
between <noscript> tags).

Anyways, thought I'd toss this out to see if there were any other
thoughts/suggestions/methods to consider.

-Darrel