E-mail List Archives
Thread: Accessible forms based pull-downm navigation.
Number of posts in this thread: 2 (In chronological order)
From: Austin, Darrel
Date: Tue, Sep 06 2005 2:00PM
Subject: Accessible forms based pull-downm navigation.
No previous message | Next message →
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
From: Christian Heilmann
Date: Tue, Sep 06 2005 2:40PM
Subject: Re: Accessible forms based pull-downm navigation.
← Previous message | No next message
> #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).
You could also use a script to generate either a DHTML dropdown from a
select one or vice versa:
http://icant.co.uk/forreview/tamingselect/
> #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.
This is a reocurring issue in any project I work on, and I just cannot
believe that people still consider web design a silver bullet for
problems like that. It is not a technical problem - it is a content
and a UI issue. If your questions are too long to fit in a certain
space then you either rephrase the questions or you allow for more
space, that is all the magic there is to it. Either the copwriting
sucks or your design is not flexible enough, no buts about it.
If you are not talking about too many options then you can also
replace a dropdown with a radio button group, possibly cut up into
different sections via fieldset and legend.
The more we make these things technical problems and try to find
workarounds the less clients will realise that a text that is too long
to fit or to be understandable for the casual viewer is just not
accessible, no matter what we do with it technically. My latest
project had dropdowns with about 120 characters per element, I did a
quick user test with the form and sent the - disastrous - results to
the client, now they rewrite the copy.
> 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?
You can answer that yourself: Which one of the two events can be
triggered by both keyboard and mouse? That is the more accessible one.
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/