WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic Dropdown Form Fields

for

From: Stella Mudd
Date: Apr 27, 2012 6:24PM


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