E-mail List Archives
Thread: Suggestions on making an accessible pull-down menu?
Number of posts in this thread: 1 (In chronological order)
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
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
'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
#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.