WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic Dropdown Form Fields

for

From: Elle
Date: Apr 27, 2012 7:19PM

David:

I know exactly what you're describing, and your guess as to why it's
skipping the second (dynamically populated) dropdown is a topic we've been
working through as well. The choreographed dance of dynamic changes and
focus path, that's some crunchy stuff! We're in the wireframe stages right
now for a similar progressive disclosure scenario in a form.

The trick is to get it to occur in sequence, not simultaneously, and to
ensure that there's a focus destination as a fallback (perhaps read-only
instead of disabled) for the default state of the dynamic dropdown menu. I
can't remember what steps that we decided on, but I'll ask and send our
solution your way in case it helps.


Cheers,
Elle




On Fri, Apr 27, 2012 at 7:42 PM, David Ashleydale < <EMAIL REMOVED> >wrote:

> I don't have an example to show right now, but I'll try to describe the
> situation that I would like thoughts on.
>
> Imagine an online form where the first question is a dropdown (select). The
> second question is also a dropdown, but when the page first loads, it is
> disabled. This is because the options in it are determined dynamically
> based on which selection you make in the first dropdown. We tried to set it
> up so that after a user makes a selection in the first dropdown, then they
> hit the Tab key, the second dropdown would become enabled and populated
> with the correct options, and the user would be taken there.
>
> However, the way it ended up working was that when a keyboard-only user
> hits Tab after using the up and down arrows to make a selection in the
> first dropdown, they skip over the second question and are taken to the
> next "tabbable" object further down the page; even though the second
> dropdown becomes enabled when the user hits Tab (onblur).
>
> I believe this is because at the time the user hits the Tab key, the second
> dropdown is still disabled. It's kind of a simultaneous issue -- two things
> are trying to happen at the same time: the browser wants to take the user
> to the next tabbable object and the JavaScript is trying to enable the
> formerly disabled dropdown. It seems like the browser has already figured
> out where it wants to take the user before they've even hit the Tab key, so
> it doesn't care that we changed the next thing in its path from disabled to
> enabled.
>
> Hopefully I described the situation sufficiently. Otherwise, I may try to
> mock something up to show you. But my questions is: what is the best way to
> do this in a keyboard accessible way?
>
> Desired functionality: Form with a dropdown that dynamically enables and
> adds options to the next dropdown.
> Problem: Hitting the Tab key always jumps over the next disabled dropdown,
> even though hitting the Tab key enables it.
>
> Thanks!
> David Ashleydale
> > > >



--
If you want to build a ship, don't drum up the people to gather wood,
divide the work, and give orders. Instead, teach them to yearn for the vast
and endless sea.
- Antoine De Saint-Exupéry, The Little Prince