E-mail List Archives
Thread: Accessible Drop-down box without a submit button.
Number of posts in this thread: 10 (In chronological order)
From: Pierre Hachey
Date: Thu, Dec 08 2016 8:50AM
Subject: Accessible Drop-down box without a submit button.
No previous message | Next message →
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
From: Beranek, Nicholas
Date: Thu, Dec 08 2016 9:20AM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
Hi Pete, would you mind elaborating? What is the action that occurs once a user selects an option?
Nick
From: Angela French
Date: Thu, Dec 08 2016 9:41AM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
I have something similar to this in that my site is flagging not having a submit button on our search field as an accessibility error.
Angela French
SBCTC
From: Pierre Hachey
Date: Thu, Dec 08 2016 10:48AM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
Hi Nick,
When the user selects an option and hits enter, dynamic content (new pie chart) appears. There is no Submit button on this drop-down and it is not a jump refresh compontent.
Under WCAG 2.0 must their always be a submit button or "View/display" button next to drop down box to change dynamic content within page.
Pete
Sent from my Samsung device
-------- Original message --------
From: "Beranek, Nicholas" < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-08 11:20 AM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: Pierre Hachey
Date: Thu, Dec 08 2016 11:01AM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
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 ADDRESS REMOVED = >
Date: 2016-12-08 11:20 AM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: Beranek, Nicholas
Date: Thu, Dec 08 2016 11:05AM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
This would only tie to SC 3.2.2 On Input. If no change of context occurs after an option is selected, then you pass this SC. A 'change in context- is where it gets a little hairy. There are 4 main context changes: 1) user agent; 2) viewport; 3) focus; and 4) content that changes the meaning of the web page. Would the new pie chart change the overall meaning of the page? If not, then I don't think you need a button.
The techniques that you're speaking of are G80 and H84 which pertain to using a submit button with a select menu. While these are sufficient techniques for solving SC 3.2.2 issues, if there is no change of context but rather a change of content, then you don't need to do that.
Nick
--
Nick Beranek
Digital Accessibility Team
On 12/8/16, 12:48 PM, "WebAIM-Forum on behalf of Pierre Hachey" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:
Hi Nick,
When the user selects an option and hits enter, dynamic content (new pie chart) appears. There is no Submit button on this drop-down and it is not a jump refresh compontent.
Under WCAG 2.0 must their always be a submit button or "View/display" button next to drop down box to change dynamic content within page.
Pete
Sent from my Samsung device
-------- Original message --------
From: "Beranek, Nicholas" < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-08 11:20 AM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: JP Jamous
Date: Thu, Dec 08 2016 11:56AM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
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.
From: Pierre Hachey
Date: Thu, Dec 08 2016 12:06PM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
Hi Nick,
Thanks I apprecaite your thoughts.
The 4 select options display 4 pie charts imediatly below. So the content - pie chatrs - simply display various stats.
I guess this question would also relate to H32 and G167 adding instructions - e.g "View stats" button next to drop-down since the drop down does not have a surface label text to explain the purpose.
I wonder those with cognitive limitation and other challenges would be affected if a button next to drop-down box did exist.
But it does seem to pass SC 3.3.2 - however not totally convinced.
Pete
Sent from my Samsung device
-------- Original message --------
From: "Beranek, Nicholas" < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-08 1:05 PM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Drop-down box without a submit button.
This would only tie to SC 3.2.2 On Input. If no change of context occurs after an option is selected, then you pass this SC. A 'change in context- is where it gets a little hairy. There are 4 main context changes: 1) user agent; 2) viewport; 3) focus; and 4) content that changes the meaning of the web page. Would the new pie chart change the overall meaning of the page? If not, then I don't think you need a button.
The techniques that you're speaking of are G80 and H84 which pertain to using a submit button with a select menu. While these are sufficient techniques for solving SC 3.2.2 issues, if there is no change of context but rather a change of content, then you don't need to do that.
Nick
--
Nick Beranek
Digital Accessibility Team
On 12/8/16, 12:48 PM, "WebAIM-Forum on behalf of Pierre Hachey" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:
Hi Nick,
When the user selects an option and hits enter, dynamic content (new pie chart) appears. There is no Submit button on this drop-down and it is not a jump refresh compontent.
Under WCAG 2.0 must their always be a submit button or "View/display" button next to drop down box to change dynamic content within page.
Pete
Sent from my Samsung device
-------- Original message --------
From: "Beranek, Nicholas" < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-08 11:20 AM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: Pierre Hachey
Date: Thu, Dec 08 2016 12:30PM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | Next message →
Thanks JP for feeback
Sent from my Samsung device
-------- Original message --------
From: JP Jamous < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-08 1:56 PM (GMT-05:00)
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
From: Mallory
Date: Mon, Dec 12 2016 6:22AM
Subject: Re: Accessible Drop-down box without a submit button.
← Previous message | No next message
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 ADDRESS REMOVED = >
> Date: 2016-12-08 1:56 PM (GMT-05:00)
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
>
>