WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic Dropdown Form Fields

for

From: Elle
Date: Apr 27, 2012 9:57PM

David:

If it's disabled, it won't receive focus, as it's not in the tab order.
However, if it's read-only, it will. I don't believe that's the total
solution, but it's a start.



Thanks,
Elle




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

> 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
> > > > > > > > > > > >
> > > > > > > >
> > > >



--
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