WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Interdependent select boxes and text box

for

Number of posts in this thread: 4 (In chronological order)

From: Andrew Johns
Date: Fri, Aug 22 2014 8:26AM
Subject: Interdependent select boxes and text box
No previous message | Next message →

Hi,

Could someone confirm whether interdependent select boxes and text boxes
are likely to cause many problems with accessibility these days?

Essentially I want to re-create the 2001 UK census groupings. The first
dropdown would contain 5 ethnicity groups, which are then broken down into
a subset of ethnic groups in a second dropdown, populated by the choice
made in the first box.

In the event that they then select "other" in the second dropdown, a
textbox would then be displayed, allowing them to enter the value of their
choice.

I saw an example (here: http://www.onlinetools.org/articles/accessibleinter/)
which shows how you might change the approach and use radio buttons for the
first set instead, but I thought I'd check what current practices are.

I did think about reloading the page after selection, but that feels
clunky. Also, given the reasonably low number of options available, I did
consider optgroups in one single select box, but the number of "Others" in
it (one per optgroup) might make it more confusing anyway.

Anything else I should consider before doing this? Is AJAX/Javascript
generally accessible providing certain things are taken into consideration?

Kind regards,

Andrew

From: Birkir R. Gunnarsson
Date: Mon, Aug 25 2014 6:41AM
Subject: Re: Interdependent select boxes and text box
← Previous message | Next message →

Andrew

Your approach sounds fine from an accessibility perspective, as long
as the content that changes comes (in content order) after the
trigger.
Having a select box that changes content that comes before it would
definitely be confusing to users, particularly screen reader users who
do not have an overview of the page, and would violate WCAG "change of
context" success criterion.

- Make sure that the content update is triggerred when user either
selects or (better yet) tabs out of the dropdown menu (without page
reload). Content update must respond to keyboard selection as well as
with the mouse obviously.
- Make sure the content that is updated comes, in content order, after
the dropdown that triggers the update. To avoid any confusion the
updated content should come inline to the dropdown (i.e. the first tab
press takes user into the updated content).
- Make sure that the user can reverse his actions (shift-tab from
content into dropdown) and select a different option.
Also make sure that focus does not jump automatically once user
selects something in the dropdown.
I have seen examples where, if a user select "other", the focus jumps
automatically to a text box, and from there user has difficulty
getting back to the dropdown using shift-tab. Wat should happen is
that user selects "other" and then the next tab press takes user to
the edit field.
Cheers
-B



On 8/22/14, Andrew Johns < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> Could someone confirm whether interdependent select boxes and text boxes
> are likely to cause many problems with accessibility these days?
>
> Essentially I want to re-create the 2001 UK census groupings. The first
> dropdown would contain 5 ethnicity groups, which are then broken down into
> a subset of ethnic groups in a second dropdown, populated by the choice
> made in the first box.
>
> In the event that they then select "other" in the second dropdown, a
> textbox would then be displayed, allowing them to enter the value of their
> choice.
>
> I saw an example (here:
> http://www.onlinetools.org/articles/accessibleinter/)
> which shows how you might change the approach and use radio buttons for the
> first set instead, but I thought I'd check what current practices are.
>
> I did think about reloading the page after selection, but that feels
> clunky. Also, given the reasonably low number of options available, I did
> consider optgroups in one single select box, but the number of "Others" in
> it (one per optgroup) might make it more confusing anyway.
>
> Anything else I should consider before doing this? Is AJAX/Javascript
> generally accessible providing certain things are taken into consideration?
>
> Kind regards,
>
> Andrew
> > > >


--
Work hard. Have fun. Make history.

From: Andrew Johns
Date: Mon, Aug 25 2014 2:12PM
Subject: Re: Interdependent select boxes and text box
← Previous message | Next message →

Hi Birkir,

Thanks for the reply - this has been a great help, and will take the
trigger/focus issues on board when developing the system.

Kind regards,

Andrew


On 25 August 2014 13:41, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
wrote:

> Andrew
>
> Your approach sounds fine from an accessibility perspective, as long
> as the content that changes comes (in content order) after the
> trigger.
> Having a select box that changes content that comes before it would
> definitely be confusing to users, particularly screen reader users who
> do not have an overview of the page, and would violate WCAG "change of
> context" success criterion.
>
> - Make sure that the content update is triggerred when user either
> selects or (better yet) tabs out of the dropdown menu (without page
> reload). Content update must respond to keyboard selection as well as
> with the mouse obviously.
> - Make sure the content that is updated comes, in content order, after
> the dropdown that triggers the update. To avoid any confusion the
> updated content should come inline to the dropdown (i.e. the first tab
> press takes user into the updated content).
> - Make sure that the user can reverse his actions (shift-tab from
> content into dropdown) and select a different option.
> Also make sure that focus does not jump automatically once user
> selects something in the dropdown.
> I have seen examples where, if a user select "other", the focus jumps
> automatically to a text box, and from there user has difficulty
> getting back to the dropdown using shift-tab. Wat should happen is
> that user selects "other" and then the next tab press takes user to
> the edit field.
> Cheers
> -B
>
>
>
> On 8/22/14, Andrew Johns < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi,
> >
> > Could someone confirm whether interdependent select boxes and text boxes
> > are likely to cause many problems with accessibility these days?
> >
> > Essentially I want to re-create the 2001 UK census groupings. The first
> > dropdown would contain 5 ethnicity groups, which are then broken down
> into
> > a subset of ethnic groups in a second dropdown, populated by the choice
> > made in the first box.
> >
> > In the event that they then select "other" in the second dropdown, a
> > textbox would then be displayed, allowing them to enter the value of
> their
> > choice.
> >
> > I saw an example (here:
> > http://www.onlinetools.org/articles/accessibleinter/)
> > which shows how you might change the approach and use radio buttons for
> the
> > first set instead, but I thought I'd check what current practices are.
> >
> > I did think about reloading the page after selection, but that feels
> > clunky. Also, given the reasonably low number of options available, I
> did
> > consider optgroups in one single select box, but the number of "Others"
> in
> > it (one per optgroup) might make it more confusing anyway.
> >
> > Anything else I should consider before doing this? Is AJAX/Javascript
> > generally accessible providing certain things are taken into
> consideration?
> >
> > Kind regards,
> >
> > Andrew
> > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > >



--
Andrew
http://andrewjohns.net

From: Birkir R. Gunnarsson
Date: Tue, Aug 26 2014 7:53AM
Subject: Re: Interdependent select boxes and text box
← Previous message | No next message

Andrew
You are welcome.
Feel free to post a URL to your page to the list when development is
complete, if you want a confirmation of the actual content.
Thanks
-B

On 8/25/14, Andrew Johns < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Birkir,
>
> Thanks for the reply - this has been a great help, and will take the
> trigger/focus issues on board when developing the system.
>
> Kind regards,
>
> Andrew
>
>
> On 25 August 2014 13:41, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Andrew
>>
>> Your approach sounds fine from an accessibility perspective, as long
>> as the content that changes comes (in content order) after the
>> trigger.
>> Having a select box that changes content that comes before it would
>> definitely be confusing to users, particularly screen reader users who
>> do not have an overview of the page, and would violate WCAG "change of
>> context" success criterion.
>>
>> - Make sure that the content update is triggerred when user either
>> selects or (better yet) tabs out of the dropdown menu (without page
>> reload). Content update must respond to keyboard selection as well as
>> with the mouse obviously.
>> - Make sure the content that is updated comes, in content order, after
>> the dropdown that triggers the update. To avoid any confusion the
>> updated content should come inline to the dropdown (i.e. the first tab
>> press takes user into the updated content).
>> - Make sure that the user can reverse his actions (shift-tab from
>> content into dropdown) and select a different option.
>> Also make sure that focus does not jump automatically once user
>> selects something in the dropdown.
>> I have seen examples where, if a user select "other", the focus jumps
>> automatically to a text box, and from there user has difficulty
>> getting back to the dropdown using shift-tab. Wat should happen is
>> that user selects "other" and then the next tab press takes user to
>> the edit field.
>> Cheers
>> -B
>>
>>
>>
>> On 8/22/14, Andrew Johns < = EMAIL ADDRESS REMOVED = > wrote:
>> > Hi,
>> >
>> > Could someone confirm whether interdependent select boxes and text
>> > boxes
>> > are likely to cause many problems with accessibility these days?
>> >
>> > Essentially I want to re-create the 2001 UK census groupings. The
>> > first
>> > dropdown would contain 5 ethnicity groups, which are then broken down
>> into
>> > a subset of ethnic groups in a second dropdown, populated by the choice
>> > made in the first box.
>> >
>> > In the event that they then select "other" in the second dropdown, a
>> > textbox would then be displayed, allowing them to enter the value of
>> their
>> > choice.
>> >
>> > I saw an example (here:
>> > http://www.onlinetools.org/articles/accessibleinter/)
>> > which shows how you might change the approach and use radio buttons for
>> the
>> > first set instead, but I thought I'd check what current practices are.
>> >
>> > I did think about reloading the page after selection, but that feels
>> > clunky. Also, given the reasonably low number of options available, I
>> did
>> > consider optgroups in one single select box, but the number of "Others"
>> in
>> > it (one per optgroup) might make it more confusing anyway.
>> >
>> > Anything else I should consider before doing this? Is AJAX/Javascript
>> > generally accessible providing certain things are taken into
>> consideration?
>> >
>> > Kind regards,
>> >
>> > Andrew
>> > >> > >> > >> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> >>
>
>
>
> --
> Andrew
> http://andrewjohns.net
> > > >


--
Work hard. Have fun. Make history.