WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Drop-down box without a submit button.

for

From: Mallory
Date: Dec 12, 2016 6:22AM

We had dropdowns without dedicated buttons to re-order products in a
product list (due to Graphic Designer decisions devs had no control
over). It did cause the page to refresh, however even if it hadn't (even
if the list, which came after this dropdown, merely changed via AJAX), I
would have done what I did anyway:

Originally the first developer had an onchange listener on the dropdown.
Problem is, every browser differs on when that gets run. Are you using
an onchange listener?

IE does it as the user is arrowing around, which they are required to do
as a sighted (or not maybe) keyboarder, simply to *even view the
options*. Because ours caused a page refresh this was simply
unacceptable. Firefox also didn't allow users to see all the options
without arrowing, but only fired onchange once the user blurred, or hit
enter or similar.

Webkit and blink either allowed arrowing or, if you know the keystrokes,
you can make the options pop open. Most of our users were using IE and
Firefox though.

So what we did was:
as the user focussed on the select, the "size" attribute was changed
from "1" to the number of available options. This did push the rest of
the page down but trying to position the options didn't work
cross-browser with all the possible page cutoffs and directions etc
like a real dropdown can.
User was free to arrow around as they pleased without firing onchange as
we set that to null. Whatever had been the current selection was stored
in JavaScript.

Only when the user blurred by tabbing away, and only then if the
selection was different than what had been selected, did the onchange
(now custom) function get run.

As I said, even if there hadn't been a page refresh, I would have done
it this way (of course having a dedicated button would be even better
but that was not allowed). As a frequent keyboarder, I feel I have a
right to see all possible options at my leisure before I do any action
that may change stuff. This would have worked out better if there were
instructions telling users which actions did what, but the Graphics
people were always higher than I on the totem pole.

cheers,
Mallory

On Thu, Dec 8, 2016, at 08:30 PM, Pierre Hachey wrote:
> Thanks JP for feeback
>
>
>
> Sent from my Samsung device
>
>
> -------- Original message --------
> From: JP Jamous < <EMAIL REMOVED> >
> Date: 2016-12-08 1:56 PM (GMT-05:00)
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible Drop-down box without a submit button.
>
> Pierre,
>
> I have seen this implemented on other sites including Capital One to pick
> on Nick. Just add a label to the dropdown box that tells the user how to
> interact with the dropdown. That will cover both screen reader users as
> well as keyboard only and users and those with cognitive disabilities.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Pierre Hachey
> Sent: Thursday, December 8, 2016 12:01 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible Drop-down box without a submit button.
>
> Hi Nick,
> I am trying to comply with WCAG 2.0 and G80 and H84 is a bit confusing
> because the end of the paragraph says that having a submit button does
> not necesarily mean compliance.
>
> Pete
>
>
>
> Sent from my Samsung device
>
>
> -------- Original message --------
> From: "Beranek, Nicholas" < <EMAIL REMOVED> >
> Date: 2016-12-08 11:20 AM (GMT-05:00)
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible Drop-down box without a submit button.
>
> Hi Pete, would you mind elaborating? What is the action that occurs once
> a user selects an option?
>
> Nick
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Pierre Hachey
> Sent: Thursday, December 08, 2016 10:51 AM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] Accessible Drop-down box without a submit button.
>
> Hi community,
> I have a drop-down box, where the users are able to navigate and select
> an option using the keyboard and they are also able to hit enter on the
> selected option field. The drop-down box does not have a Submit button
> next to it.
>
> I am thinking that the drop-down should have a Submit button but space is
> limited on the page and i do not want to anoy the design team:)
>
> What are your thoughts?
> Thanks
> Pete
>
>
>
>
> Sent from my Samsung device
> > > at http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The
> information transmitted herewith is intended only for use by the
> individual or entity to which it is addressed. If the reader of this
> message is not the intended recipient, you are hereby notified that any
> review, retransmission, dissemination, distribution, copying or other use
> of, or taking of any action in reliance upon this information is strictly
> prohibited. If you have received this communication in error, please
> contact the sender and delete the material from your computer.
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> >
> > > > > > > >