WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic Dropdown Form Fields

for

From: David Ashleydale
Date: Apr 27, 2012 9:46PM

I think the dropdown is just disabled using disabled="disabled".

On Friday, April 27, 2012, Stella Mudd wrote:

> David,
>
> How are you disabling the form field?
>
> Thanks.
>
> Stella
>
> On Friday, April 27, 2012, David Ashleydale 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
> > > > > > > >
> > > >