WebAIM - Web Accessibility In Mind

E-mail List Archives

Dynamic Dropdown Form Fields

for

From: David Ashleydale
Date: Apr 27, 2012 5:42PM

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