WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible forms based pull-downm navigation.

for

From: Austin, Darrel
Date: Sep 6, 2005 2:00PM

I asked this question several months ago and didn't get a response. I'm
at the point where I need to get back to this project so, I thought I'd
try again and see what happens. ;o)

-----------------------------------------

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.

-----------------

Since asking this, I've added another option:

#4 mandate a character limit for each question. This is more of a
copywriting issue. I like this as it'd be the easiest (for me) to
implement, but I imagine this could add to accessibility issues as
questions are abbreviated and shortened to the point of being harder to
comprehend.

All that said, I'm mainly leaning towards the javascript option where I
just create my own pulldown menu. This would preserve both the full text
of the question as well as better layout control. Albeit at a higher
development cost. I'd like to use an on-click event to trigger the
question list. Is using the onClick to trigger a fly-out menu more
problematic than the typical onMouseOver?

-Darrel