WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Selects with drop downs

for

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

From: Ryan E. Benson
Date: Wed, Mar 14 2018 6:54AM
Subject: Selects with drop downs
No previous message | Next message →

Pardon the title, I am not sure what these things are officially called.
There's a group bent on using select elements aka dropdowns with built-in
search/filter functions. I believe there was a thread here a while ago, but
can't find it. Unless I am mistaken, the thread leaned towards not using
them, even though they can be made accessible. The PM and the second
developer didn't know what framework they were using, and have yet to hear
back from the lead, but they think Bootstrap "or based on it."

Any pointers would be great, since i have yet to get access to their code.

--
Ryan E. Benson

From: Patrick H. Lauke
Date: Wed, Mar 14 2018 7:23AM
Subject: Re: Selects with drop downs
← Previous message | Next message →

On 14/03/2018 12:54, Ryan E. Benson wrote:
> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with built-in
> search/filter functions. I believe there was a thread here a while ago, but
> can't find it. Unless I am mistaken, the thread leaned towards not using
> them, even though they can be made accessible. The PM and the second
> developer didn't know what framework they were using, and have yet to hear
> back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.

What you're describing are probably comboboxes
https://www.w3.org/TR/wai-aria-practices-1.1/#combobox

Plain Bootstrap doesn't have any ready-made filterable/searchable
combobox/autocomplete type functionality, so if they're using Bootstrap,
it's likely only providing the look and feel and the actual
functionality is done through a Bootstrap extension/plugin or different
underlying framework.

And the discussion thread on here you're probably thinking of is this, I
think: https://webaim.org/discussion/mail_thread?thread…66

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Brandon Keith Biggs
Date: Wed, Mar 14 2018 8:03AM
Subject: Re: Selects with drop downs
← Previous message | Next message →

Are these datalists?
https://www.w3schools.com/tags/tag_datalist.asp

Otherwise, AccDC has some fantastic comboboxes:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm

There are several others, but you can find them in the technical style
guide.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
wrote:

> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with built-in
> search/filter functions. I believe there was a thread here a while ago, but
> can't find it. Unless I am mistaken, the thread leaned towards not using
> them, even though they can be made accessible. The PM and the second
> developer didn't know what framework they were using, and have yet to hear
> back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.
>
> --
> Ryan E. Benson
> > > > >

From: Steve Green
Date: Wed, Mar 14 2018 8:31AM
Subject: Re: Selects with drop downs
← Previous message | Next message →

I have been testing those Whatsock comboboxes recently and I find that they only work well under certain specific circumstances. There are many ways in which a user can interact with even a simple combobox (I have tested ten ways but there are potentially more), and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected.

It's worth noting that even when the behaviour is acceptable, the user experience is substantially different from a native combobox. I find it disappointing and frustrating that the HTML5 and ARIA specifications have not been written such that it is possible to closely or exactly emulate a native combobox. It would be interesting to know if there is a reason for this. It seems such an obvious thing to want to do.

I hadn't planned to post these comments yet but I felt obliged to since you were recommending these designs. I will send Bryan Garaventa my report as soon as it is complete. I very much hope that he can fix his designs because they are better than any other combobox replacements I have tested. However, I don't regard them as being good enough to recommend to our clients yet.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Brandon Keith Biggs
Sent: 14 March 2018 14:03
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Are these datalists?
https://www.w3schools.com/tags/tag_datalist.asp

Otherwise, AccDC has some fantastic comboboxes:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm

There are several others, but you can find them in the technical style guide.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
wrote:

> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with
> built-in search/filter functions. I believe there was a thread here a
> while ago, but can't find it. Unless I am mistaken, the thread leaned
> towards not using them, even though they can be made accessible. The
> PM and the second developer didn't know what framework they were
> using, and have yet to hear back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.
>
> --
> Ryan E. Benson
> > > archives at http://webaim.org/discussion/archives
> >

From: Bryan Garaventa
Date: Wed, Mar 14 2018 12:08PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

"and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected."

Hi,
There are many possibilities which may be causing this confusion, not just the programming of the widget. E.G The purpose you are trying to use the combobox for, support level differences between browsers or screen reader bugs, or configuration settings available within the combobox widget that you may not be aware of.

So, when you get a chance, can you please reply with steps to reproduce, including the version of JAWS and which browser you are using plus the widget example you are testing? Also please explain the negative behavior that you are experiencing, which will give me a sense of where to home in specifically.

Thanks,
Bryan



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 7:31 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

I have been testing those Whatsock comboboxes recently and I find that they only work well under certain specific circumstances. There are many ways in which a user can interact with even a simple combobox (I have tested ten ways but there are potentially more), and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected.

It's worth noting that even when the behaviour is acceptable, the user experience is substantially different from a native combobox. I find it disappointing and frustrating that the HTML5 and ARIA specifications have not been written such that it is possible to closely or exactly emulate a native combobox. It would be interesting to know if there is a reason for this. It seems such an obvious thing to want to do.

I hadn't planned to post these comments yet but I felt obliged to since you were recommending these designs. I will send Bryan Garaventa my report as soon as it is complete. I very much hope that he can fix his designs because they are better than any other combobox replacements I have tested. However, I don't regard them as being good enough to recommend to our clients yet.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Brandon Keith Biggs
Sent: 14 March 2018 14:03
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Are these datalists?
https://www.w3schools.com/tags/tag_datalist.asp

Otherwise, AccDC has some fantastic comboboxes:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm

There are several others, but you can find them in the technical style guide.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
wrote:

> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with
> built-in search/filter functions. I believe there was a thread here a
> while ago, but can't find it. Unless I am mistaken, the thread leaned
> towards not using them, even though they can be made accessible. The
> PM and the second developer didn't know what framework they were
> using, and have yet to hear back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.
>
> --
> Ryan E. Benson
> > > archives at http://webaim.org/discussion/archives
> >

From: Steve Green
Date: Wed, Mar 14 2018 12:46PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

Hi Bryan,

I will reply off-list. At this stage all I really want is a replacement for a native combobox, so I have only been testing the Country combobox at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm. All the other whizzy features such as autocomplete can wait until we get the basic widget working.

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: 14 March 2018 18:09
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

"and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected."

Hi,
There are many possibilities which may be causing this confusion, not just the programming of the widget. E.G The purpose you are trying to use the combobox for, support level differences between browsers or screen reader bugs, or configuration settings available within the combobox widget that you may not be aware of.

So, when you get a chance, can you please reply with steps to reproduce, including the version of JAWS and which browser you are using plus the widget example you are testing? Also please explain the negative behavior that you are experiencing, which will give me a sense of where to home in specifically.

Thanks,
Bryan



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 7:31 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

I have been testing those Whatsock comboboxes recently and I find that they only work well under certain specific circumstances. There are many ways in which a user can interact with even a simple combobox (I have tested ten ways but there are potentially more), and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected.

It's worth noting that even when the behaviour is acceptable, the user experience is substantially different from a native combobox. I find it disappointing and frustrating that the HTML5 and ARIA specifications have not been written such that it is possible to closely or exactly emulate a native combobox. It would be interesting to know if there is a reason for this. It seems such an obvious thing to want to do.

I hadn't planned to post these comments yet but I felt obliged to since you were recommending these designs. I will send Bryan Garaventa my report as soon as it is complete. I very much hope that he can fix his designs because they are better than any other combobox replacements I have tested. However, I don't regard them as being good enough to recommend to our clients yet.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Brandon Keith Biggs
Sent: 14 March 2018 14:03
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Are these datalists?
https://www.w3schools.com/tags/tag_datalist.asp

Otherwise, AccDC has some fantastic comboboxes:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm

There are several others, but you can find them in the technical style guide.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
wrote:

> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with
> built-in search/filter functions. I believe there was a thread here a
> while ago, but can't find it. Unless I am mistaken, the thread leaned
> towards not using them, even though they can be made accessible. The
> PM and the second developer didn't know what framework they were
> using, and have yet to hear back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.
>
> --
> Ryan E. Benson
> > > archives at http://webaim.org/discussion/archives
> >

From: Birkir R. Gunnarsson
Date: Wed, Mar 14 2018 1:23PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

A lot of people don't know this, but HTML5 actually has simulated combox code.
That is the list attribute combined with the <datalist> element.
<label for="search">Search</label>
<input id="search" type="text" list="suggestions">
<datalist id="suggestions">
<option value="suggestion 1">
<option value="suggestion 2">
..
</datalist>

The <datalist> elemet should hold all the possible options, they can
be loaded from a JSon file.
When user starts typing into the search input the browser
automatically displays matching suggestions from the datalist (it
shows the value of the matching option elements).
In Firefox at least you can use arrow keys to navigate into and
through the list, enter to select an option and close it, and escape
to dismiss it without selecting.
There are support and implementation differences between browsers
(Firefox matches the string from the beginning, Chrome only matches
for a substring, IE11 doesn't do anything at all).

For instance, if you type "ppl" into the field and "apples" was one of
the options, Chrome would display it as a suggestion but Firefox would
not.

If we can file bugs and get the browser vendors committed this is
close to being an accessible no-JavaScript-needed solution.
I think this and accessibility support of the <dialog> element are the
biggest advances that current HTML5 has to offer, the amount of ARIA
and JavaScript and focus management that is needed to get those right
is beyond most ordinary developers, and I don't blame them.
But if they could do it with HTML, it would be amazing.

I don't know why this isn't gaining more traction, most web developers
I talk to have never heard of this, even if it is in the HTML5 spec.



On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Bryan,
>
> I will reply off-list. At this stage all I really want is a replacement for
> a native combobox, so I have only been testing the Country combobox at
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm.
> All the other whizzy features such as autocomplete can wait until we get the
> basic widget working.
>
> Steve
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Bryan Garaventa
> Sent: 14 March 2018 18:09
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> "and the Whatsock designs don't work at all well in some cases. In one
> specific case, JAWS 2018 announces that the combobox has been set to a
> different value than has actually been selected."
>
> Hi,
> There are many possibilities which may be causing this confusion, not just
> the programming of the widget. E.G The purpose you are trying to use the
> combobox for, support level differences between browsers or screen reader
> bugs, or configuration settings available within the combobox widget that
> you may not be aware of.
>
> So, when you get a chance, can you please reply with steps to reproduce,
> including the version of JAWS and which browser you are using plus the
> widget example you are testing? Also please explain the negative behavior
> that you are experiencing, which will give me a sense of where to home in
> specifically.
>
> Thanks,
> Bryan
>
>
>
> Bryan Garaventa
> Accessibility Fellow
> Level Access, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve
> Green
> Sent: Wednesday, March 14, 2018 7:31 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> I have been testing those Whatsock comboboxes recently and I find that they
> only work well under certain specific circumstances. There are many ways in
> which a user can interact with even a simple combobox (I have tested ten
> ways but there are potentially more), and the Whatsock designs don't work at
> all well in some cases. In one specific case, JAWS 2018 announces that the
> combobox has been set to a different value than has actually been selected.
>
> It's worth noting that even when the behaviour is acceptable, the user
> experience is substantially different from a native combobox. I find it
> disappointing and frustrating that the HTML5 and ARIA specifications have
> not been written such that it is possible to closely or exactly emulate a
> native combobox. It would be interesting to know if there is a reason for
> this. It seems such an obvious thing to want to do.
>
> I hadn't planned to post these comments yet but I felt obliged to since you
> were recommending these designs. I will send Bryan Garaventa my report as
> soon as it is complete. I very much hope that he can fix his designs because
> they are better than any other combobox replacements I have tested. However,
> I don't regard them as being good enough to recommend to our clients yet.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Brandon Keith Biggs
> Sent: 14 March 2018 14:03
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> Are these datalists?
> https://www.w3schools.com/tags/tag_datalist.asp
>
> Otherwise, AccDC has some fantastic comboboxes:
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
>
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm
>
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm
>
> There are several others, but you can find them in the technical style
> guide.
> Thanks,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
> On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Pardon the title, I am not sure what these things are officially called.
>> There's a group bent on using select elements aka dropdowns with
>> built-in search/filter functions. I believe there was a thread here a
>> while ago, but can't find it. Unless I am mistaken, the thread leaned
>> towards not using them, even though they can be made accessible. The
>> PM and the second developer didn't know what framework they were
>> using, and have yet to hear back from the lead, but they think Bootstrap
>> "or based on it."
>>
>> Any pointers would be great, since i have yet to get access to their
>> code.
>>
>> --
>> Ryan E. Benson
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Wed, Mar 14 2018 1:36PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

Just to give credit where credit is due, Brandon posted a reply earlier
today that asked if datalists were being used.

On Wed, Mar 14, 2018 at 1:23 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> A lot of people don't know this, but HTML5 actually has simulated combox
> code.
> That is the list attribute combined with the <datalist> element.
>

From: Steve Green
Date: Wed, Mar 14 2018 1:50PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

Browser support for <datalist> is very poor, which is a shame because it does exactly what I need in our CRM system.

The W3Schools website says that Safari does not support it at all. It works in Chrome but it's got a nasty behaviour insofar as the list does not fully repopulate if you type some characters and then delete them all. You have to either close the dropdown and re-open it, or click in the textbox.

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: 14 March 2018 19:24
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

A lot of people don't know this, but HTML5 actually has simulated combox code.
That is the list attribute combined with the <datalist> element.
<label for="search">Search</label>
<input id="search" type="text" list="suggestions"> <datalist id="suggestions"> <option value="suggestion 1"> <option value="suggestion 2"> ..
</datalist>

The <datalist> elemet should hold all the possible options, they can be loaded from a JSon file.
When user starts typing into the search input the browser automatically displays matching suggestions from the datalist (it shows the value of the matching option elements).
In Firefox at least you can use arrow keys to navigate into and through the list, enter to select an option and close it, and escape to dismiss it without selecting.
There are support and implementation differences between browsers (Firefox matches the string from the beginning, Chrome only matches for a substring, IE11 doesn't do anything at all).

For instance, if you type "ppl" into the field and "apples" was one of the options, Chrome would display it as a suggestion but Firefox would not.

If we can file bugs and get the browser vendors committed this is close to being an accessible no-JavaScript-needed solution.
I think this and accessibility support of the <dialog> element are the biggest advances that current HTML5 has to offer, the amount of ARIA and JavaScript and focus management that is needed to get those right is beyond most ordinary developers, and I don't blame them.
But if they could do it with HTML, it would be amazing.

I don't know why this isn't gaining more traction, most web developers I talk to have never heard of this, even if it is in the HTML5 spec.



On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Bryan,
>
> I will reply off-list. At this stage all I really want is a
> replacement for a native combobox, so I have only been testing the
> Country combobox at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm.
> All the other whizzy features such as autocomplete can wait until we
> get the basic widget working.
>
> Steve
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Bryan Garaventa
> Sent: 14 March 2018 18:09
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> "and the Whatsock designs don't work at all well in some cases. In one
> specific case, JAWS 2018 announces that the combobox has been set to a
> different value than has actually been selected."
>
> Hi,
> There are many possibilities which may be causing this confusion, not
> just the programming of the widget. E.G The purpose you are trying to
> use the combobox for, support level differences between browsers or
> screen reader bugs, or configuration settings available within the
> combobox widget that you may not be aware of.
>
> So, when you get a chance, can you please reply with steps to
> reproduce, including the version of JAWS and which browser you are
> using plus the widget example you are testing? Also please explain the
> negative behavior that you are experiencing, which will give me a
> sense of where to home in specifically.
>
> Thanks,
> Bryan
>
>
>
> Bryan Garaventa
> Accessibility Fellow
> Level Access, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Steve Green
> Sent: Wednesday, March 14, 2018 7:31 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> I have been testing those Whatsock comboboxes recently and I find that
> they only work well under certain specific circumstances. There are
> many ways in which a user can interact with even a simple combobox (I
> have tested ten ways but there are potentially more), and the Whatsock
> designs don't work at all well in some cases. In one specific case,
> JAWS 2018 announces that the combobox has been set to a different value than has actually been selected.
>
> It's worth noting that even when the behaviour is acceptable, the user
> experience is substantially different from a native combobox. I find
> it disappointing and frustrating that the HTML5 and ARIA
> specifications have not been written such that it is possible to
> closely or exactly emulate a native combobox. It would be interesting
> to know if there is a reason for this. It seems such an obvious thing to want to do.
>
> I hadn't planned to post these comments yet but I felt obliged to
> since you were recommending these designs. I will send Bryan Garaventa
> my report as soon as it is complete. I very much hope that he can fix
> his designs because they are better than any other combobox
> replacements I have tested. However, I don't regard them as being good enough to recommend to our clients yet.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Brandon Keith Biggs
> Sent: 14 March 2018 14:03
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> Are these datalists?
> https://www.w3schools.com/tags/tag_datalist.asp
>
> Otherwise, AccDC has some fantastic comboboxes:
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
> oxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
>
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
> oxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%2
> 0Match)/demo.htm
>
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
> oxes%20(Simulated,%20Readonly)/demo.htm
>
> There are several others, but you can find them in the technical style
> guide.
> Thanks,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
> On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson
> < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Pardon the title, I am not sure what these things are officially called.
>> There's a group bent on using select elements aka dropdowns with
>> built-in search/filter functions. I believe there was a thread here a
>> while ago, but can't find it. Unless I am mistaken, the thread leaned
>> towards not using them, even though they can be made accessible. The
>> PM and the second developer didn't know what framework they were
>> using, and have yet to hear back from the lead, but they think
>> Bootstrap "or based on it."
>>
>> Any pointers would be great, since i have yet to get access to their
>> code.
>>
>> --
>> Ryan E. Benson
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Birkir R. Gunnarsson
Date: Wed, Mar 14 2018 2:24PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

This is where I think we as a community sometimes back off too quick.
Instead of using perfectly semantic correct HML and make it the
problem of the browser and assistive technology vendors to translate
it into usable and accessible experience, (that is their job) we back
of and do not use those patterns, opting instead for resource
intensive custom solutions that cannot be shared.

This is HTML5, it has been in the spec for years, browsers should support that.

WCAG gives an opt out if we are using native browser settings, e.g.
for keybord focus (WCAG 2.4.7).
Shouldn't the same apply to this scenario?


On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> Browser support for <datalist> is very poor, which is a shame because it
> does exactly what I need in our CRM system.
>
> The W3Schools website says that Safari does not support it at all. It works
> in Chrome but it's got a nasty behaviour insofar as the list does not fully
> repopulate if you type some characters and then delete them all. You have to
> either close the dropdown and re-open it, or click in the textbox.
>
> Steve
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: 14 March 2018 19:24
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> A lot of people don't know this, but HTML5 actually has simulated combox
> code.
> That is the list attribute combined with the <datalist> element.
> <label for="search">Search</label>
> <input id="search" type="text" list="suggestions"> <datalist
> id="suggestions"> <option value="suggestion 1"> <option value="suggestion
> 2"> ..
> </datalist>
>
> The <datalist> elemet should hold all the possible options, they can be
> loaded from a JSon file.
> When user starts typing into the search input the browser automatically
> displays matching suggestions from the datalist (it shows the value of the
> matching option elements).
> In Firefox at least you can use arrow keys to navigate into and through the
> list, enter to select an option and close it, and escape to dismiss it
> without selecting.
> There are support and implementation differences between browsers (Firefox
> matches the string from the beginning, Chrome only matches for a substring,
> IE11 doesn't do anything at all).
>
> For instance, if you type "ppl" into the field and "apples" was one of the
> options, Chrome would display it as a suggestion but Firefox would not.
>
> If we can file bugs and get the browser vendors committed this is close to
> being an accessible no-JavaScript-needed solution.
> I think this and accessibility support of the <dialog> element are the
> biggest advances that current HTML5 has to offer, the amount of ARIA and
> JavaScript and focus management that is needed to get those right is beyond
> most ordinary developers, and I don't blame them.
> But if they could do it with HTML, it would be amazing.
>
> I don't know why this isn't gaining more traction, most web developers I
> talk to have never heard of this, even if it is in the HTML5 spec.
>
>
>
> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>> Hi Bryan,
>>
>> I will reply off-list. At this stage all I really want is a
>> replacement for a native combobox, so I have only been testing the
>> Country combobox at
>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm.
>> All the other whizzy features such as autocomplete can wait until we
>> get the basic widget working.
>>
>> Steve
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Bryan Garaventa
>> Sent: 14 March 2018 18:09
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Selects with drop downs
>>
>> "and the Whatsock designs don't work at all well in some cases. In one
>> specific case, JAWS 2018 announces that the combobox has been set to a
>> different value than has actually been selected."
>>
>> Hi,
>> There are many possibilities which may be causing this confusion, not
>> just the programming of the widget. E.G The purpose you are trying to
>> use the combobox for, support level differences between browsers or
>> screen reader bugs, or configuration settings available within the
>> combobox widget that you may not be aware of.
>>
>> So, when you get a chance, can you please reply with steps to
>> reproduce, including the version of JAWS and which browser you are
>> using plus the widget example you are testing? Also please explain the
>> negative behavior that you are experiencing, which will give me a
>> sense of where to home in specifically.
>>
>> Thanks,
>> Bryan
>>
>>
>>
>> Bryan Garaventa
>> Accessibility Fellow
>> Level Access, Inc.
>> = EMAIL ADDRESS REMOVED =
>> 415.624.2709 (o)
>> www.LevelAccess.com
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Steve Green
>> Sent: Wednesday, March 14, 2018 7:31 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Selects with drop downs
>>
>> I have been testing those Whatsock comboboxes recently and I find that
>> they only work well under certain specific circumstances. There are
>> many ways in which a user can interact with even a simple combobox (I
>> have tested ten ways but there are potentially more), and the Whatsock
>> designs don't work at all well in some cases. In one specific case,
>> JAWS 2018 announces that the combobox has been set to a different value
>> than has actually been selected.
>>
>> It's worth noting that even when the behaviour is acceptable, the user
>> experience is substantially different from a native combobox. I find
>> it disappointing and frustrating that the HTML5 and ARIA
>> specifications have not been written such that it is possible to
>> closely or exactly emulate a native combobox. It would be interesting
>> to know if there is a reason for this. It seems such an obvious thing to
>> want to do.
>>
>> I hadn't planned to post these comments yet but I felt obliged to
>> since you were recommending these designs. I will send Bryan Garaventa
>> my report as soon as it is complete. I very much hope that he can fix
>> his designs because they are better than any other combobox
>> replacements I have tested. However, I don't regard them as being good
>> enough to recommend to our clients yet.
>>
>> Steve Green
>> Managing Director
>> Test Partners Ltd
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Brandon Keith Biggs
>> Sent: 14 March 2018 14:03
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Selects with drop downs
>>
>> Are these datalists?
>> https://www.w3schools.com/tags/tag_datalist.asp
>>
>> Otherwise, AccDC has some fantastic comboboxes:
>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
>> oxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
>>
>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
>> oxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%2
>> 0Match)/demo.htm
>>
>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
>> oxes%20(Simulated,%20Readonly)/demo.htm
>>
>> There are several others, but you can find them in the technical style
>> guide.
>> Thanks,
>>
>>
>> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>>
>> On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson
>> < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Pardon the title, I am not sure what these things are officially called.
>>> There's a group bent on using select elements aka dropdowns with
>>> built-in search/filter functions. I believe there was a thread here a
>>> while ago, but can't find it. Unless I am mistaken, the thread leaned
>>> towards not using them, even though they can be made accessible. The
>>> PM and the second developer didn't know what framework they were
>>> using, and have yet to hear back from the lead, but they think
>>> Bootstrap "or based on it."
>>>
>>> Any pointers would be great, since i have yet to get access to their
>>> code.
>>>
>>> --
>>> Ryan E. Benson
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

From: Patrick H. Lauke
Date: Wed, Mar 14 2018 4:53PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

On 14/03/2018 20:24, Birkir R. Gunnarsson wrote:
> This is where I think we as a community sometimes back off too quick.
> Instead of using perfectly semantic correct HML and make it the
> problem of the browser and assistive technology vendors to translate
> it into usable and accessible experience, (that is their job) we back
> of and do not use those patterns, opting instead for resource
> intensive custom solutions that cannot be shared.

If you don't mind having things on your live site that actually don't
work, or don't work for a specific set of your users, sure...

> This is HTML5, it has been in the spec for years, browsers should support that.
>
> WCAG gives an opt out if we are using native browser settings, e.g.
> for keybord focus (WCAG 2.4.7).
> Shouldn't the same apply to this scenario?

If things aren't "accessibility supported", I don't think that rationale
holds.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: glen walker
Date: Wed, Mar 14 2018 5:43PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

In addition to what Patrick said, not only would you have a site that might
not work, but it could be your responsibility (legally) to make your site
work even if you do have semantically correct code. It's one of those
"principals" of the issue where you're correct, but you still have to write
a workaround to be legally binding.

(Note, I'm not a lawyer so don't take this as legal advice.)

From: Bryan Garaventa
Date: Wed, Mar 14 2018 5:50PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

Hi,
I just tested the demo you mentioned using JAWS2018 in IE11, and it does appear to be working as intended.

The problem appears to be that you are testing a multiselect combobox, and expecting this to work in the same manner as a single select combobox. Comboboxes are not one-size-fits-all, so some are editable, some readonly, some simulated readonly, and some use different string matching scenarios like first character string matching, or sub-string matching, or even whole word string matching. The WhatSock Combobox module supports all of these as configuration options during setup.

If you are just trying to test a single native select comparison, then you should be testing the following example:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

Instead, you are testing a multiselect combobox for advanced functionality, in which you are supposed to arrow up and down between the listbox options and press the Spacebar to toggle which option is selected, then press Enter to save your selections.

Where focus is located when Enter is pressed in this case, doesn't matter, because only the checked options are saved, not the one that has focus. This is intended to work this way because if the focused option was also saved regardless if it were checked or unchecked, it would break this multiselect functionality.

All of these variations are explained in the ARIA Combobox mapping table at
http://whatsock.com/training/matrices/#combobox
And strictly adhere to the ARIA Combobox design pattern guidance documented at
https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/

The reason why a general keyboard pattern is used for all of these comboboxes, in which the Down arrow opens them and Up and Down navigates them, plus Spacebar by itself toggles multiselection if this is enabled, is because then all of these key paradigms work equally across all browsers that support a keyboard.

In contrast, if using a native select element, then Alt+Down is needed to open the combobox, though the Down arrow can be used instead, but this latter will automatically trigger the onChange handler to fire if this is present on the control, which may cause automatic form submissions if something like this is applied. Also, if using a select combined with the multiple attribute, then this control turns into a multiselect listbox instead, and in IE11 you have to press Shift+F8 to expand a multiselect listbox so you can then press Up and Down to navigate without automatically selecting whatever has focus and press the Spacebar to toggle selection. However, if you use the same control in Firefox, then you have to hold down the Control key while pressing Up or Down to move focus between multiselect options and use the Spacebar to toggle selection instead, which is totally different from the way that IE11 does it.

As a result, if I were to attempt to simulate a native select exactly, then I would have to program different keyboard paradigms for use in every browser, which would be really annoying and extremely buggy, and would end up confusing people if I implemented the IE11 use of pressing Shift+F8 and forced users in Firefox and Chrome to have to do the same thing even though native selects don't work that way on those browsers.

It makes more sense to me to simply stick with the simplest approach, and use Down to open a combobox widget, Up and Down to navigate it, Enter or Tab to save your selection and move focus to the next control, or Escape to close without saving and return focus to the original combobox field, and to make certain this works the same across all browsers equally.

It's also important to keep in mind that, in ARIA, a Listbox is not the same control as a Combobox, and both of these have different requirements. Live examples that demonstrate this for Listbox widgets can be found in the right-most Implementation Notes column at
http://whatsock.com/training/matrices/#listbox

A Listbox is most useful for widgets that are always present on the page, whereas a Combobox is useful for rendering dynamic lists of options based on user interaction.

Hopefully this helps a bit,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 11:47 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Hi Bryan,

I will reply off-list. At this stage all I really want is a replacement for a native combobox, so I have only been testing the Country combobox at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm. All the other whizzy features such as autocomplete can wait until we get the basic widget working.

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: 14 March 2018 18:09
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

"and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected."

Hi,
There are many possibilities which may be causing this confusion, not just the programming of the widget. E.G The purpose you are trying to use the combobox for, support level differences between browsers or screen reader bugs, or configuration settings available within the combobox widget that you may not be aware of.

So, when you get a chance, can you please reply with steps to reproduce, including the version of JAWS and which browser you are using plus the widget example you are testing? Also please explain the negative behavior that you are experiencing, which will give me a sense of where to home in specifically.

Thanks,
Bryan



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 7:31 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

I have been testing those Whatsock comboboxes recently and I find that they only work well under certain specific circumstances. There are many ways in which a user can interact with even a simple combobox (I have tested ten ways but there are potentially more), and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected.

It's worth noting that even when the behaviour is acceptable, the user experience is substantially different from a native combobox. I find it disappointing and frustrating that the HTML5 and ARIA specifications have not been written such that it is possible to closely or exactly emulate a native combobox. It would be interesting to know if there is a reason for this. It seems such an obvious thing to want to do.

I hadn't planned to post these comments yet but I felt obliged to since you were recommending these designs. I will send Bryan Garaventa my report as soon as it is complete. I very much hope that he can fix his designs because they are better than any other combobox replacements I have tested. However, I don't regard them as being good enough to recommend to our clients yet.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Brandon Keith Biggs
Sent: 14 March 2018 14:03
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Are these datalists?
https://www.w3schools.com/tags/tag_datalist.asp

Otherwise, AccDC has some fantastic comboboxes:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm

There are several others, but you can find them in the technical style guide.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
wrote:

> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with
> built-in search/filter functions. I believe there was a thread here a
> while ago, but can't find it. Unless I am mistaken, the thread leaned
> towards not using them, even though they can be made accessible. The
> PM and the second developer didn't know what framework they were
> using, and have yet to hear back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.
>
> --
> Ryan E. Benson
> > > archives at http://webaim.org/discussion/archives
> >

From: Ryan Benson
Date: Wed, Mar 14 2018 6:00PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

> What you're describing are probably comboboxes https://www.w3.org/TR/wai-aria-practices-1.1/#combobox

Yes this is pretty close, though I don't know if the interaction is the same. These examples are text boxes with a pop up. What the app is using is the reverse.

--
Ryan E. Benson

Sent from my iPad

> On Mar 14, 2018, at 09:23, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On 14/03/2018 12:54, Ryan E. Benson wrote:
>> Pardon the title, I am not sure what these things are officially called.
>> There's a group bent on using select elements aka dropdowns with built-in
>> search/filter functions. I believe there was a thread here a while ago, but
>> can't find it. Unless I am mistaken, the thread leaned towards not using
>> them, even though they can be made accessible. The PM and the second
>> developer didn't know what framework they were using, and have yet to hear
>> back from the lead, but they think Bootstrap "or based on it."
>> Any pointers would be great, since i have yet to get access to their code.
>
> What you're describing are probably comboboxes https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
>
> Plain Bootstrap doesn't have any ready-made filterable/searchable combobox/autocomplete type functionality, so if they're using Bootstrap, it's likely only providing the look and feel and the actual functionality is done through a Bootstrap extension/plugin or different underlying framework.
>
> And the discussion thread on here you're probably thinking of is this, I think: https://webaim.org/discussion/mail_thread?thread…66
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > >

From: Ryan E. Benson
Date: Wed, Mar 14 2018 6:30PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

> There are support and implementation differences between browsers (Firefox
matches the string from the beginning, Chrome only matches for a substring,
IE11 doesn't do anything at all).

The app I am talking about works fine in IE 11. If we look past all the
bonuses about HTML5, my interpretation of the render would look like:

<label for="country">Select a country</label>
<select name="country" id="">
<option value=""><input type="text"></option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>


--
Ryan E. Benson

On Wed, Mar 14, 2018 at 3:23 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> A lot of people don't know this, but HTML5 actually has simulated combox
> code.
> That is the list attribute combined with the <datalist> element.
> <label for="search">Search</label>
> <input id="search" type="text" list="suggestions">
> <datalist id="suggestions">
> <option value="suggestion 1">
> <option value="suggestion 2">
> ..
> </datalist>
>
> The <datalist> elemet should hold all the possible options, they can
> be loaded from a JSon file.
> When user starts typing into the search input the browser
> automatically displays matching suggestions from the datalist (it
> shows the value of the matching option elements).
> In Firefox at least you can use arrow keys to navigate into and
> through the list, enter to select an option and close it, and escape
> to dismiss it without selecting.
> There are support and implementation differences between browsers
> (Firefox matches the string from the beginning, Chrome only matches
> for a substring, IE11 doesn't do anything at all).
>
> For instance, if you type "ppl" into the field and "apples" was one of
> the options, Chrome would display it as a suggestion but Firefox would
> not.
>
> If we can file bugs and get the browser vendors committed this is
> close to being an accessible no-JavaScript-needed solution.
> I think this and accessibility support of the <dialog> element are the
> biggest advances that current HTML5 has to offer, the amount of ARIA
> and JavaScript and focus management that is needed to get those right
> is beyond most ordinary developers, and I don't blame them.
> But if they could do it with HTML, it would be amazing.
>
> I don't know why this isn't gaining more traction, most web developers
> I talk to have never heard of this, even if it is in the HTML5 spec.
>
>
>
> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi Bryan,
> >
> > I will reply off-list. At this stage all I really want is a replacement
> for
> > a native combobox, so I have only been testing the Country combobox at
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
> 20Editable%20with%20Substring%20Match)/demo.htm.
> > All the other whizzy features such as autocomplete can wait until we get
> the
> > basic widget working.
> >
> > Steve
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf
> > Of Bryan Garaventa
> > Sent: 14 March 2018 18:09
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > "and the Whatsock designs don't work at all well in some cases. In one
> > specific case, JAWS 2018 announces that the combobox has been set to a
> > different value than has actually been selected."
> >
> > Hi,
> > There are many possibilities which may be causing this confusion, not
> just
> > the programming of the widget. E.G The purpose you are trying to use the
> > combobox for, support level differences between browsers or screen reader
> > bugs, or configuration settings available within the combobox widget that
> > you may not be aware of.
> >
> > So, when you get a chance, can you please reply with steps to reproduce,
> > including the version of JAWS and which browser you are using plus the
> > widget example you are testing? Also please explain the negative behavior
> > that you are experiencing, which will give me a sense of where to home in
> > specifically.
> >
> > Thanks,
> > Bryan
> >
> >
> >
> > Bryan Garaventa
> > Accessibility Fellow
> > Level Access, Inc.
> > = EMAIL ADDRESS REMOVED =
> > 415.624.2709 (o)
> > www.LevelAccess.com
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Steve
> > Green
> > Sent: Wednesday, March 14, 2018 7:31 AM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > I have been testing those Whatsock comboboxes recently and I find that
> they
> > only work well under certain specific circumstances. There are many ways
> in
> > which a user can interact with even a simple combobox (I have tested ten
> > ways but there are potentially more), and the Whatsock designs don't
> work at
> > all well in some cases. In one specific case, JAWS 2018 announces that
> the
> > combobox has been set to a different value than has actually been
> selected.
> >
> > It's worth noting that even when the behaviour is acceptable, the user
> > experience is substantially different from a native combobox. I find it
> > disappointing and frustrating that the HTML5 and ARIA specifications have
> > not been written such that it is possible to closely or exactly emulate a
> > native combobox. It would be interesting to know if there is a reason for
> > this. It seems such an obvious thing to want to do.
> >
> > I hadn't planned to post these comments yet but I felt obliged to since
> you
> > were recommending these designs. I will send Bryan Garaventa my report as
> > soon as it is complete. I very much hope that he can fix his designs
> because
> > they are better than any other combobox replacements I have tested.
> However,
> > I don't regard them as being good enough to recommend to our clients yet.
> >
> > Steve Green
> > Managing Director
> > Test Partners Ltd
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf
> > Of Brandon Keith Biggs
> > Sent: 14 March 2018 14:03
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > Are these datalists?
> > https://www.w3schools.com/tags/tag_datalist.asp
> >
> > Otherwise, AccDC has some fantastic comboboxes:
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> 20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
> >
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
> 20Editable%20with%20Substring%20Match)/demo.htm
> >
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> 20Comboboxes%20(Simulated,%20Readonly)/demo.htm
> >
> > There are several others, but you can find them in the technical style
> > guide.
> > Thanks,
> >
> >
> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> >
> > On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
> > wrote:
> >
> >> Pardon the title, I am not sure what these things are officially called.
> >> There's a group bent on using select elements aka dropdowns with
> >> built-in search/filter functions. I believe there was a thread here a
> >> while ago, but can't find it. Unless I am mistaken, the thread leaned
> >> towards not using them, even though they can be made accessible. The
> >> PM and the second developer didn't know what framework they were
> >> using, and have yet to hear back from the lead, but they think Bootstrap
> >> "or based on it."
> >>
> >> Any pointers would be great, since i have yet to get access to their
> >> code.
> >>
> >> --
> >> Ryan E. Benson
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > > > > > archives at
> > http://webaim.org/discussion/archives
> > > > > > > archives at
> > http://webaim.org/discussion/archives
> > > > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >

From: Birkir R. Gunnarsson
Date: Wed, Mar 14 2018 7:49PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

My rant is purely philosophical in nature.
IN reality the web content authors are responsible, and we do all the
JavaScript workarounds and extra testing to make sure our web content
is usable, but I think this is a fundamentally flawed paradigm and
that user agents (browsers and assistive technology applications) need
to do more.
Until they do, accessibility will justifiably be considered resource
intensive and difficult to implement, but it doesn't have to be like
that.

all we can do is to diligently file bugs or promote bugs if already
filed to keep the issues alive on the vendor's to-do list.



On 3/14/18, Ryan E. Benson < = EMAIL ADDRESS REMOVED = > wrote:
> > There are support and implementation differences between browsers
> (Firefox
> matches the string from the beginning, Chrome only matches for a substring,
> IE11 doesn't do anything at all).
>
> The app I am talking about works fine in IE 11. If we look past all the
> bonuses about HTML5, my interpretation of the render would look like:
>
> <label for="country">Select a country</label>
> <select name="country" id="">
> <option value=""><input type="text"></option>
> <option value="USA">USA</option>
> <option value="Canada">Canada</option>
> <option value="Mexico">Mexico</option>
> </select>
>
>
> --
> Ryan E. Benson
>
> On Wed, Mar 14, 2018 at 3:23 PM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> A lot of people don't know this, but HTML5 actually has simulated combox
>> code.
>> That is the list attribute combined with the <datalist> element.
>> <label for="search">Search</label>
>> <input id="search" type="text" list="suggestions">
>> <datalist id="suggestions">
>> <option value="suggestion 1">
>> <option value="suggestion 2">
>> ..
>> </datalist>
>>
>> The <datalist> elemet should hold all the possible options, they can
>> be loaded from a JSon file.
>> When user starts typing into the search input the browser
>> automatically displays matching suggestions from the datalist (it
>> shows the value of the matching option elements).
>> In Firefox at least you can use arrow keys to navigate into and
>> through the list, enter to select an option and close it, and escape
>> to dismiss it without selecting.
>> There are support and implementation differences between browsers
>> (Firefox matches the string from the beginning, Chrome only matches
>> for a substring, IE11 doesn't do anything at all).
>>
>> For instance, if you type "ppl" into the field and "apples" was one of
>> the options, Chrome would display it as a suggestion but Firefox would
>> not.
>>
>> If we can file bugs and get the browser vendors committed this is
>> close to being an accessible no-JavaScript-needed solution.
>> I think this and accessibility support of the <dialog> element are the
>> biggest advances that current HTML5 has to offer, the amount of ARIA
>> and JavaScript and focus management that is needed to get those right
>> is beyond most ordinary developers, and I don't blame them.
>> But if they could do it with HTML, it would be amazing.
>>
>> I don't know why this isn't gaining more traction, most web developers
>> I talk to have never heard of this, even if it is in the HTML5 spec.
>>
>>
>>
>> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>> > Hi Bryan,
>> >
>> > I will reply off-list. At this stage all I really want is a replacement
>> for
>> > a native combobox, so I have only been testing the Country combobox at
>> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
>> 20Editable%20with%20Substring%20Match)/demo.htm.
>> > All the other whizzy features such as autocomplete can wait until we get
>> the
>> > basic widget working.
>> >
>> > Steve
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf
>> > Of Bryan Garaventa
>> > Sent: 14 March 2018 18:09
>> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> > Subject: Re: [WebAIM] Selects with drop downs
>> >
>> > "and the Whatsock designs don't work at all well in some cases. In one
>> > specific case, JAWS 2018 announces that the combobox has been set to a
>> > different value than has actually been selected."
>> >
>> > Hi,
>> > There are many possibilities which may be causing this confusion, not
>> just
>> > the programming of the widget. E.G The purpose you are trying to use the
>> > combobox for, support level differences between browsers or screen
>> > reader
>> > bugs, or configuration settings available within the combobox widget
>> > that
>> > you may not be aware of.
>> >
>> > So, when you get a chance, can you please reply with steps to reproduce,
>> > including the version of JAWS and which browser you are using plus the
>> > widget example you are testing? Also please explain the negative
>> > behavior
>> > that you are experiencing, which will give me a sense of where to home
>> > in
>> > specifically.
>> >
>> > Thanks,
>> > Bryan
>> >
>> >
>> >
>> > Bryan Garaventa
>> > Accessibility Fellow
>> > Level Access, Inc.
>> > = EMAIL ADDRESS REMOVED =
>> > 415.624.2709 (o)
>> > www.LevelAccess.com
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Steve
>> > Green
>> > Sent: Wednesday, March 14, 2018 7:31 AM
>> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> > Subject: Re: [WebAIM] Selects with drop downs
>> >
>> > I have been testing those Whatsock comboboxes recently and I find that
>> they
>> > only work well under certain specific circumstances. There are many ways
>> in
>> > which a user can interact with even a simple combobox (I have tested ten
>> > ways but there are potentially more), and the Whatsock designs don't
>> work at
>> > all well in some cases. In one specific case, JAWS 2018 announces that
>> the
>> > combobox has been set to a different value than has actually been
>> selected.
>> >
>> > It's worth noting that even when the behaviour is acceptable, the user
>> > experience is substantially different from a native combobox. I find it
>> > disappointing and frustrating that the HTML5 and ARIA specifications
>> > have
>> > not been written such that it is possible to closely or exactly emulate
>> > a
>> > native combobox. It would be interesting to know if there is a reason
>> > for
>> > this. It seems such an obvious thing to want to do.
>> >
>> > I hadn't planned to post these comments yet but I felt obliged to since
>> you
>> > were recommending these designs. I will send Bryan Garaventa my report
>> > as
>> > soon as it is complete. I very much hope that he can fix his designs
>> because
>> > they are better than any other combobox replacements I have tested.
>> However,
>> > I don't regard them as being good enough to recommend to our clients
>> > yet.
>> >
>> > Steve Green
>> > Managing Director
>> > Test Partners Ltd
>> >
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf
>> > Of Brandon Keith Biggs
>> > Sent: 14 March 2018 14:03
>> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> > Subject: Re: [WebAIM] Selects with drop downs
>> >
>> > Are these datalists?
>> > https://www.w3schools.com/tags/tag_datalist.asp
>> >
>> > Otherwise, AccDC has some fantastic comboboxes:
>> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
>> >
>> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
>> 20Editable%20with%20Substring%20Match)/demo.htm
>> >
>> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Simulated,%20Readonly)/demo.htm
>> >
>> > There are several others, but you can find them in the technical style
>> > guide.
>> > Thanks,
>> >
>> >
>> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>> >
>> > On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
>> > wrote:
>> >
>> >> Pardon the title, I am not sure what these things are officially
>> >> called.
>> >> There's a group bent on using select elements aka dropdowns with
>> >> built-in search/filter functions. I believe there was a thread here a
>> >> while ago, but can't find it. Unless I am mistaken, the thread leaned
>> >> towards not using them, even though they can be made accessible. The
>> >> PM and the second developer didn't know what framework they were
>> >> using, and have yet to hear back from the lead, but they think
>> >> Bootstrap
>> >> "or based on it."
>> >>
>> >> Any pointers would be great, since i have yet to get access to their
>> >> code.
>> >>
>> >> --
>> >> Ryan E. Benson
>> >> >> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >>
>> > >> > >> archives at
>> > http://webaim.org/discussion/archives
>> > >> > >> > >> archives at
>> > http://webaim.org/discussion/archives
>> > >> > >> > >> archives at
>> > http://webaim.org/discussion/archives
>> > >> > >> > >> > >> > >> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.

From: chagnon@pubcom.com
Date: Wed, Mar 14 2018 9:13PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

<< all we can do is to diligently file bugs or promote bugs if already filed to keep the issues alive on the vendor's to-do list.>>

Definitely, do that.
But how about another tactic?

Sec. 508 requires the federal government buy accessible software and hardware. Enforce it, especially if you're a government entity or one that is covered by accessibility regulations, such as schools and colleges.

Tell the manufacturers why their products will no longer be purchased, that you'll consider them again in the future if they correct their shortcomings.

This strategy has worked in the past with other manufacturers in the industry.

—Bevi Chagnon

— — —
Bevi Chagnon, founder/CEO | = EMAIL ADDRESS REMOVED =
— — —
PubCom: Technologists for Accessible Design + Publishing
consulting • training • development • design • sec. 508 services
Upcoming classes at www.PubCom.com/classes
— — —


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, March 14, 2018 9:49 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

My rant is purely philosophical in nature.
IN reality the web content authors are responsible, and we do all the JavaScript workarounds and extra testing to make sure our web content is usable, but I think this is a fundamentally flawed paradigm and that user agents (browsers and assistive technology applications) need to do more.
Until they do, accessibility will justifiably be considered resource intensive and difficult to implement, but it doesn't have to be like that.

all we can do is to diligently file bugs or promote bugs if already filed to keep the issues alive on the vendor's to-do list.



On 3/14/18, Ryan E. Benson < = EMAIL ADDRESS REMOVED = > wrote:
> > There are support and implementation differences between browsers
> (Firefox matches the string from the beginning, Chrome only matches
> for a substring,
> IE11 doesn't do anything at all).
>
> The app I am talking about works fine in IE 11. If we look past all
> the bonuses about HTML5, my interpretation of the render would look like:
>
> <label for="country">Select a country</label> <select name="country"
> id="">
> <option value=""><input type="text"></option>
> <option value="USA">USA</option>
> <option value="Canada">Canada</option>
> <option value="Mexico">Mexico</option> </select>
>
>
> --
> Ryan E. Benson
>
> On Wed, Mar 14, 2018 at 3:23 PM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> A lot of people don't know this, but HTML5 actually has simulated
>> combox code.
>> That is the list attribute combined with the <datalist> element.
>> <label for="search">Search</label>
>> <input id="search" type="text" list="suggestions"> <datalist
>> id="suggestions"> <option value="suggestion 1"> <option
>> value="suggestion 2"> ..
>> </datalist>
>>
>> The <datalist> elemet should hold all the possible options, they can
>> be loaded from a JSon file.
>> When user starts typing into the search input the browser
>> automatically displays matching suggestions from the datalist (it
>> shows the value of the matching option elements).
>> In Firefox at least you can use arrow keys to navigate into and
>> through the list, enter to select an option and close it, and escape
>> to dismiss it without selecting.
>> There are support and implementation differences between browsers
>> (Firefox matches the string from the beginning, Chrome only matches
>> for a substring, IE11 doesn't do anything at all).
>>
>> For instance, if you type "ppl" into the field and "apples" was one
>> of the options, Chrome would display it as a suggestion but Firefox
>> would not.
>>
>> If we can file bugs and get the browser vendors committed this is
>> close to being an accessible no-JavaScript-needed solution.
>> I think this and accessibility support of the <dialog> element are
>> the biggest advances that current HTML5 has to offer, the amount of
>> ARIA and JavaScript and focus management that is needed to get those
>> right is beyond most ordinary developers, and I don't blame them.
>> But if they could do it with HTML, it would be amazing.
>>
>> I don't know why this isn't gaining more traction, most web
>> developers I talk to have never heard of this, even if it is in the HTML5 spec.
>>
>>
>>
>> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>> > Hi Bryan,
>> >
>> > I will reply off-list. At this stage all I really want is a
>> > replacement
>> for
>> > a native combobox, so I have only been testing the Country combobox
>> > at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
>> 20Editable%20with%20Substring%20Match)/demo.htm.
>> > All the other whizzy features such as autocomplete can wait until
>> > we get
>> the
>> > basic widget working.
>> >
>> > Steve
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf
>> > Of Bryan Garaventa
>> > Sent: 14 March 2018 18:09
>> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> > Subject: Re: [WebAIM] Selects with drop downs
>> >
>> > "and the Whatsock designs don't work at all well in some cases. In
>> > one specific case, JAWS 2018 announces that the combobox has been
>> > set to a different value than has actually been selected."
>> >
>> > Hi,
>> > There are many possibilities which may be causing this confusion,
>> > not
>> just
>> > the programming of the widget. E.G The purpose you are trying to
>> > use the combobox for, support level differences between browsers or
>> > screen reader bugs, or configuration settings available within the
>> > combobox widget that you may not be aware of.
>> >
>> > So, when you get a chance, can you please reply with steps to
>> > reproduce, including the version of JAWS and which browser you are
>> > using plus the widget example you are testing? Also please explain
>> > the negative behavior that you are experiencing, which will give me
>> > a sense of where to home in specifically.
>> >
>> > Thanks,
>> > Bryan
>> >
>> >
>> >
>> > Bryan Garaventa
>> > Accessibility Fellow
>> > Level Access, Inc.
>> > = EMAIL ADDRESS REMOVED =
>> > 415.624.2709 (o)
>> > www.LevelAccess.com
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf
>> > Of
>> Steve
>> > Green
>> > Sent: Wednesday, March 14, 2018 7:31 AM
>> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> > Subject: Re: [WebAIM] Selects with drop downs
>> >
>> > I have been testing those Whatsock comboboxes recently and I find
>> > that
>> they
>> > only work well under certain specific circumstances. There are many
>> > ways
>> in
>> > which a user can interact with even a simple combobox (I have
>> > tested ten ways but there are potentially more), and the Whatsock
>> > designs don't
>> work at
>> > all well in some cases. In one specific case, JAWS 2018 announces
>> > that
>> the
>> > combobox has been set to a different value than has actually been
>> selected.
>> >
>> > It's worth noting that even when the behaviour is acceptable, the
>> > user experience is substantially different from a native combobox.
>> > I find it disappointing and frustrating that the HTML5 and ARIA
>> > specifications have not been written such that it is possible to
>> > closely or exactly emulate a native combobox. It would be
>> > interesting to know if there is a reason for this. It seems such an
>> > obvious thing to want to do.
>> >
>> > I hadn't planned to post these comments yet but I felt obliged to
>> > since
>> you
>> > were recommending these designs. I will send Bryan Garaventa my
>> > report as soon as it is complete. I very much hope that he can fix
>> > his designs
>> because
>> > they are better than any other combobox replacements I have tested.
>> However,
>> > I don't regard them as being good enough to recommend to our
>> > clients yet.
>> >
>> > Steve Green
>> > Managing Director
>> > Test Partners Ltd
>> >
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf
>> > Of Brandon Keith Biggs
>> > Sent: 14 March 2018 14:03
>> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> > Subject: Re: [WebAIM] Selects with drop downs
>> >
>> > Are these datalists?
>> > https://www.w3schools.com/tags/tag_datalist.asp
>> >
>> > Otherwise, AccDC has some fantastic comboboxes:
>> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.ht
>> m
>> >
>> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
>> 20Editable%20with%20Substring%20Match)/demo.htm
>> >
>> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>> 20Comboboxes%20(Simulated,%20Readonly)/demo.htm
>> >
>> > There are several others, but you can find them in the technical
>> > style guide.
>> > Thanks,
>> >
>> >
>> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>> >
>> > On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson
>> > < = EMAIL ADDRESS REMOVED = >
>> > wrote:
>> >
>> >> Pardon the title, I am not sure what these things are officially
>> >> called.
>> >> There's a group bent on using select elements aka dropdowns with
>> >> built-in search/filter functions. I believe there was a thread
>> >> here a while ago, but can't find it. Unless I am mistaken, the
>> >> thread leaned towards not using them, even though they can be made
>> >> accessible. The PM and the second developer didn't know what
>> >> framework they were using, and have yet to hear back from the
>> >> lead, but they think Bootstrap "or based on it."
>> >>
>> >> Any pointers would be great, since i have yet to get access to
>> >> their code.
>> >>
>> >> --
>> >> Ryan E. Benson
>> >> >> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >>
>> > >> > >> archives at
>> > http://webaim.org/discussion/archives
>> > >> > >> > >> archives at
>> > http://webaim.org/discussion/archives
>> > >> > >> > >> archives at
>> > http://webaim.org/discussion/archives
>> > >> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Ryan Benson
Date: Wed, Mar 14 2018 9:41PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

In regards to my situation, the application is built in house, so while that could be a tactic, I can't use it here. I could shut down the use of whatever framework used, but I wanted to see if there was an accessible example to point to. The example that Patrick pointed to this morning was kind of the interaction the application has. While I think the interaction they want is dumb, I wanted more ground to stand on.


Ryan

Sent from my iPad

> On Mar 14, 2018, at 23:13, < = EMAIL ADDRESS REMOVED = > < = EMAIL ADDRESS REMOVED = > wrote:
>
> << all we can do is to diligently file bugs or promote bugs if already filed to keep the issues alive on the vendor's to-do list.>>
>
> Definitely, do that.
> But how about another tactic?
>
> Sec. 508 requires the federal government buy accessible software and hardware. Enforce it, especially if you're a government entity or one that is covered by accessibility regulations, such as schools and colleges.
>
> Tell the manufacturers why their products will no longer be purchased, that you'll consider them again in the future if they correct their shortcomings.
>
> This strategy has worked in the past with other manufacturers in the industry.
>
> —Bevi Chagnon
>
> — — —
> Bevi Chagnon, founder/CEO | = EMAIL ADDRESS REMOVED =
> — — —
> PubCom: Technologists for Accessible Design + Publishing
> consulting • training • development • design • sec. 508 services
> Upcoming classes at www.PubCom.com/classes
> — — —
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
> Sent: Wednesday, March 14, 2018 9:49 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> My rant is purely philosophical in nature.
> IN reality the web content authors are responsible, and we do all the JavaScript workarounds and extra testing to make sure our web content is usable, but I think this is a fundamentally flawed paradigm and that user agents (browsers and assistive technology applications) need to do more.
> Until they do, accessibility will justifiably be considered resource intensive and difficult to implement, but it doesn't have to be like that.
>
> all we can do is to diligently file bugs or promote bugs if already filed to keep the issues alive on the vendor's to-do list.
>
>
>
> On 3/14/18, Ryan E. Benson < = EMAIL ADDRESS REMOVED = > wrote:
>>> There are support and implementation differences between browsers
>> (Firefox matches the string from the beginning, Chrome only matches
>> for a substring,
>> IE11 doesn't do anything at all).
>>
>> The app I am talking about works fine in IE 11. If we look past all
>> the bonuses about HTML5, my interpretation of the render would look like:
>>
>> <label for="country">Select a country</label> <select name="country"
>> id="">
>> <option value=""><input type="text"></option>
>> <option value="USA">USA</option>
>> <option value="Canada">Canada</option>
>> <option value="Mexico">Mexico</option> </select>
>>
>>
>> --
>> Ryan E. Benson
>>
>> On Wed, Mar 14, 2018 at 3:23 PM, Birkir R. Gunnarsson <
>> = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> A lot of people don't know this, but HTML5 actually has simulated
>>> combox code.
>>> That is the list attribute combined with the <datalist> element.
>>> <label for="search">Search</label>
>>> <input id="search" type="text" list="suggestions"> <datalist
>>> id="suggestions"> <option value="suggestion 1"> <option
>>> value="suggestion 2"> ..
>>> </datalist>
>>>
>>> The <datalist> elemet should hold all the possible options, they can
>>> be loaded from a JSon file.
>>> When user starts typing into the search input the browser
>>> automatically displays matching suggestions from the datalist (it
>>> shows the value of the matching option elements).
>>> In Firefox at least you can use arrow keys to navigate into and
>>> through the list, enter to select an option and close it, and escape
>>> to dismiss it without selecting.
>>> There are support and implementation differences between browsers
>>> (Firefox matches the string from the beginning, Chrome only matches
>>> for a substring, IE11 doesn't do anything at all).
>>>
>>> For instance, if you type "ppl" into the field and "apples" was one
>>> of the options, Chrome would display it as a suggestion but Firefox
>>> would not.
>>>
>>> If we can file bugs and get the browser vendors committed this is
>>> close to being an accessible no-JavaScript-needed solution.
>>> I think this and accessibility support of the <dialog> element are
>>> the biggest advances that current HTML5 has to offer, the amount of
>>> ARIA and JavaScript and focus management that is needed to get those
>>> right is beyond most ordinary developers, and I don't blame them.
>>> But if they could do it with HTML, it would be amazing.
>>>
>>> I don't know why this isn't gaining more traction, most web
>>> developers I talk to have never heard of this, even if it is in the HTML5 spec.
>>>
>>>
>>>
>>>> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>>>> Hi Bryan,
>>>>
>>>> I will reply off-list. At this stage all I really want is a
>>>> replacement
>>> for
>>>> a native combobox, so I have only been testing the Country combobox
>>>> at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
>>> 20Editable%20with%20Substring%20Match)/demo.htm.
>>>> All the other whizzy features such as autocomplete can wait until
>>>> we get
>>> the
>>>> basic widget working.
>>>>
>>>> Steve
>>>>
>>>> -----Original Message-----
>>>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>>> Behalf
>>>> Of Bryan Garaventa
>>>> Sent: 14 March 2018 18:09
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>>> Subject: Re: [WebAIM] Selects with drop downs
>>>>
>>>> "and the Whatsock designs don't work at all well in some cases. In
>>>> one specific case, JAWS 2018 announces that the combobox has been
>>>> set to a different value than has actually been selected."
>>>>
>>>> Hi,
>>>> There are many possibilities which may be causing this confusion,
>>>> not
>>> just
>>>> the programming of the widget. E.G The purpose you are trying to
>>>> use the combobox for, support level differences between browsers or
>>>> screen reader bugs, or configuration settings available within the
>>>> combobox widget that you may not be aware of.
>>>>
>>>> So, when you get a chance, can you please reply with steps to
>>>> reproduce, including the version of JAWS and which browser you are
>>>> using plus the widget example you are testing? Also please explain
>>>> the negative behavior that you are experiencing, which will give me
>>>> a sense of where to home in specifically.
>>>>
>>>> Thanks,
>>>> Bryan
>>>>
>>>>
>>>>
>>>> Bryan Garaventa
>>>> Accessibility Fellow
>>>> Level Access, Inc.
>>>> = EMAIL ADDRESS REMOVED =
>>>> 415.624.2709 (o)
>>>> www.LevelAccess.com
>>>>
>>>> -----Original Message-----
>>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf
>>>> Of
>>> Steve
>>>> Green
>>>> Sent: Wednesday, March 14, 2018 7:31 AM
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>>> Subject: Re: [WebAIM] Selects with drop downs
>>>>
>>>> I have been testing those Whatsock comboboxes recently and I find
>>>> that
>>> they
>>>> only work well under certain specific circumstances. There are many
>>>> ways
>>> in
>>>> which a user can interact with even a simple combobox (I have
>>>> tested ten ways but there are potentially more), and the Whatsock
>>>> designs don't
>>> work at
>>>> all well in some cases. In one specific case, JAWS 2018 announces
>>>> that
>>> the
>>>> combobox has been set to a different value than has actually been
>>> selected.
>>>>
>>>> It's worth noting that even when the behaviour is acceptable, the
>>>> user experience is substantially different from a native combobox.
>>>> I find it disappointing and frustrating that the HTML5 and ARIA
>>>> specifications have not been written such that it is possible to
>>>> closely or exactly emulate a native combobox. It would be
>>>> interesting to know if there is a reason for this. It seems such an
>>>> obvious thing to want to do.
>>>>
>>>> I hadn't planned to post these comments yet but I felt obliged to
>>>> since
>>> you
>>>> were recommending these designs. I will send Bryan Garaventa my
>>>> report as soon as it is complete. I very much hope that he can fix
>>>> his designs
>>> because
>>>> they are better than any other combobox replacements I have tested.
>>> However,
>>>> I don't regard them as being good enough to recommend to our
>>>> clients yet.
>>>>
>>>> Steve Green
>>>> Managing Director
>>>> Test Partners Ltd
>>>>
>>>>
>>>> -----Original Message-----
>>>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>>> Behalf
>>>> Of Brandon Keith Biggs
>>>> Sent: 14 March 2018 14:03
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>>> Subject: Re: [WebAIM] Selects with drop downs
>>>>
>>>> Are these datalists?
>>>> https://www.w3schools.com/tags/tag_datalist.asp
>>>>
>>>> Otherwise, AccDC has some fantastic comboboxes:
>>>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>>> 20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.ht
>>> m
>>>>
>>>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
>>> 20Editable%20with%20Substring%20Match)/demo.htm
>>>>
>>>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
>>> 20Comboboxes%20(Simulated,%20Readonly)/demo.htm
>>>>
>>>> There are several others, but you can find them in the technical
>>>> style guide.
>>>> Thanks,
>>>>
>>>>
>>>> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>>>>
>>>> On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson
>>>> < = EMAIL ADDRESS REMOVED = >
>>>> wrote:
>>>>
>>>>> Pardon the title, I am not sure what these things are officially
>>>>> called.
>>>>> There's a group bent on using select elements aka dropdowns with
>>>>> built-in search/filter functions. I believe there was a thread
>>>>> here a while ago, but can't find it. Unless I am mistaken, the
>>>>> thread leaned towards not using them, even though they can be made
>>>>> accessible. The PM and the second developer didn't know what
>>>>> framework they were using, and have yet to hear back from the
>>>>> lead, but they think Bootstrap "or based on it."
>>>>>
>>>>> Any pointers would be great, since i have yet to get access to
>>>>> their code.
>>>>>
>>>>> --
>>>>> Ryan E. Benson
>>>>> >>>>> >>>>> archives at http://webaim.org/discussion/archives
>>>>> >>>>>
>>>> >>>> >>> archives at
>>>> http://webaim.org/discussion/archives
>>>> >>>> >>>> >>> archives at
>>>> http://webaim.org/discussion/archives
>>>> >>>> >>>> >>> archives at
>>>> http://webaim.org/discussion/archives
>>>> >>>> >>>> >>>> archives at http://webaim.org/discussion/archives
>>>> >>>>
>>>
>>>
>>> --
>>> Work hard. Have fun. Make history.
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >
> > > >

From: Steve Green
Date: Wed, Mar 14 2018 10:05PM
Subject: Re: Selects with drop downs
← Previous message | Next message →

Hi Bryan,

I'm sorry, I somehow put the wrong URL in my email. At this stage I am only interested in doing a single native select comparison and I was indeed testing the URL you said I should use. Specifically, I was only testing the Country combobox on that page. Could you please check if you get the same results that I do?

The explanations in your email and in your various websites are enormously helpful. Frankly, the whole thing is so insanely complex it's no surprise that no one else can build any kind of combobox that works correctly. I don't have the development skills to even attempt it, but I do have the testing skills to evaluate other people's designs, and your writings have helped me understand why I get the results that I do.

Regards,
Steve

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: 14 March 2018 23:51
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Hi,
I just tested the demo you mentioned using JAWS2018 in IE11, and it does appear to be working as intended.

The problem appears to be that you are testing a multiselect combobox, and expecting this to work in the same manner as a single select combobox. Comboboxes are not one-size-fits-all, so some are editable, some readonly, some simulated readonly, and some use different string matching scenarios like first character string matching, or sub-string matching, or even whole word string matching. The WhatSock Combobox module supports all of these as configuration options during setup.

If you are just trying to test a single native select comparison, then you should be testing the following example:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

Instead, you are testing a multiselect combobox for advanced functionality, in which you are supposed to arrow up and down between the listbox options and press the Spacebar to toggle which option is selected, then press Enter to save your selections.

Where focus is located when Enter is pressed in this case, doesn't matter, because only the checked options are saved, not the one that has focus. This is intended to work this way because if the focused option was also saved regardless if it were checked or unchecked, it would break this multiselect functionality.

All of these variations are explained in the ARIA Combobox mapping table at http://whatsock.com/training/matrices/#combobox
And strictly adhere to the ARIA Combobox design pattern guidance documented at https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/

The reason why a general keyboard pattern is used for all of these comboboxes, in which the Down arrow opens them and Up and Down navigates them, plus Spacebar by itself toggles multiselection if this is enabled, is because then all of these key paradigms work equally across all browsers that support a keyboard.

In contrast, if using a native select element, then Alt+Down is needed to open the combobox, though the Down arrow can be used instead, but this latter will automatically trigger the onChange handler to fire if this is present on the control, which may cause automatic form submissions if something like this is applied. Also, if using a select combined with the multiple attribute, then this control turns into a multiselect listbox instead, and in IE11 you have to press Shift+F8 to expand a multiselect listbox so you can then press Up and Down to navigate without automatically selecting whatever has focus and press the Spacebar to toggle selection. However, if you use the same control in Firefox, then you have to hold down the Control key while pressing Up or Down to move focus between multiselect options and use the Spacebar to toggle selection instead, which is totally different from the way that IE11 does it.

As a result, if I were to attempt to simulate a native select exactly, then I would have to program different keyboard paradigms for use in every browser, which would be really annoying and extremely buggy, and would end up confusing people if I implemented the IE11 use of pressing Shift+F8 and forced users in Firefox and Chrome to have to do the same thing even though native selects don't work that way on those browsers.

It makes more sense to me to simply stick with the simplest approach, and use Down to open a combobox widget, Up and Down to navigate it, Enter or Tab to save your selection and move focus to the next control, or Escape to close without saving and return focus to the original combobox field, and to make certain this works the same across all browsers equally.

It's also important to keep in mind that, in ARIA, a Listbox is not the same control as a Combobox, and both of these have different requirements. Live examples that demonstrate this for Listbox widgets can be found in the right-most Implementation Notes column at http://whatsock.com/training/matrices/#listbox

A Listbox is most useful for widgets that are always present on the page, whereas a Combobox is useful for rendering dynamic lists of options based on user interaction.

Hopefully this helps a bit,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 11:47 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Hi Bryan,

I will reply off-list. At this stage all I really want is a replacement for a native combobox, so I have only been testing the Country combobox at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm. All the other whizzy features such as autocomplete can wait until we get the basic widget working.

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: 14 March 2018 18:09
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

"and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected."

Hi,
There are many possibilities which may be causing this confusion, not just the programming of the widget. E.G The purpose you are trying to use the combobox for, support level differences between browsers or screen reader bugs, or configuration settings available within the combobox widget that you may not be aware of.

So, when you get a chance, can you please reply with steps to reproduce, including the version of JAWS and which browser you are using plus the widget example you are testing? Also please explain the negative behavior that you are experiencing, which will give me a sense of where to home in specifically.

Thanks,
Bryan



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 7:31 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

I have been testing those Whatsock comboboxes recently and I find that they only work well under certain specific circumstances. There are many ways in which a user can interact with even a simple combobox (I have tested ten ways but there are potentially more), and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected.

It's worth noting that even when the behaviour is acceptable, the user experience is substantially different from a native combobox. I find it disappointing and frustrating that the HTML5 and ARIA specifications have not been written such that it is possible to closely or exactly emulate a native combobox. It would be interesting to know if there is a reason for this. It seems such an obvious thing to want to do.

I hadn't planned to post these comments yet but I felt obliged to since you were recommending these designs. I will send Bryan Garaventa my report as soon as it is complete. I very much hope that he can fix his designs because they are better than any other combobox replacements I have tested. However, I don't regard them as being good enough to recommend to our clients yet.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Brandon Keith Biggs
Sent: 14 March 2018 14:03
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

Are these datalists?
https://www.w3schools.com/tags/tag_datalist.asp

Otherwise, AccDC has some fantastic comboboxes:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm

There are several others, but you can find them in the technical style guide.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
wrote:

> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with
> built-in search/filter functions. I believe there was a thread here a
> while ago, but can't find it. Unless I am mistaken, the thread leaned
> towards not using them, even though they can be made accessible. The
> PM and the second developer didn't know what framework they were
> using, and have yet to hear back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.
>
> --
> Ryan E. Benson
> > > archives at http://webaim.org/discussion/archives
> >

From: Brandon Keith Biggs
Date: Thu, Mar 15 2018 3:21AM
Subject: Re: Selects with drop downs
← Previous message | Next message →

Hello,
You can use AccDC along with any other framework. What framework are they
using?
I'm slowly working on bringing AccDC into React, but it is a little
difficult as AccDC manipulates the DOM and React is trying to get people to
move away from touching the dom. If there is anyone working on React, I
would love some help!
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 8:41 PM, Ryan Benson < = EMAIL ADDRESS REMOVED = > wrote:

> In regards to my situation, the application is built in house, so while
> that could be a tactic, I can't use it here. I could shut down the use of
> whatever framework used, but I wanted to see if there was an accessible
> example to point to. The example that Patrick pointed to this morning was
> kind of the interaction the application has. While I think the interaction
> they want is dumb, I wanted more ground to stand on.
>
>
> Ryan
>
> Sent from my iPad
>
> > On Mar 14, 2018, at 23:13, < = EMAIL ADDRESS REMOVED = > < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> > << all we can do is to diligently file bugs or promote bugs if already
> filed to keep the issues alive on the vendor's to-do list.>>
> >
> > Definitely, do that.
> > But how about another tactic?
> >
> > Sec. 508 requires the federal government buy accessible software and
> hardware. Enforce it, especially if you're a government entity or one that
> is covered by accessibility regulations, such as schools and colleges.
> >
> > Tell the manufacturers why their products will no longer be purchased,
> that you'll consider them again in the future if they correct their
> shortcomings.
> >
> > This strategy has worked in the past with other manufacturers in the
> industry.
> >
> > —Bevi Chagnon
> >
> > — — —
> > Bevi Chagnon, founder/CEO | = EMAIL ADDRESS REMOVED =
> > — — —
> > PubCom: Technologists for Accessible Design + Publishing
> > consulting • training • development • design • sec. 508 services
> > Upcoming classes at www.PubCom.com/classes
> > — — —
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> > Sent: Wednesday, March 14, 2018 9:49 PM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > My rant is purely philosophical in nature.
> > IN reality the web content authors are responsible, and we do all the
> JavaScript workarounds and extra testing to make sure our web content is
> usable, but I think this is a fundamentally flawed paradigm and that user
> agents (browsers and assistive technology applications) need to do more.
> > Until they do, accessibility will justifiably be considered resource
> intensive and difficult to implement, but it doesn't have to be like that.
> >
> > all we can do is to diligently file bugs or promote bugs if already
> filed to keep the issues alive on the vendor's to-do list.
> >
> >
> >
> > On 3/14/18, Ryan E. Benson < = EMAIL ADDRESS REMOVED = > wrote:
> >>> There are support and implementation differences between browsers
> >> (Firefox matches the string from the beginning, Chrome only matches
> >> for a substring,
> >> IE11 doesn't do anything at all).
> >>
> >> The app I am talking about works fine in IE 11. If we look past all
> >> the bonuses about HTML5, my interpretation of the render would look
> like:
> >>
> >> <label for="country">Select a country</label> <select name="country"
> >> id="">
> >> <option value=""><input type="text"></option>
> >> <option value="USA">USA</option>
> >> <option value="Canada">Canada</option>
> >> <option value="Mexico">Mexico</option> </select>
> >>
> >>
> >> --
> >> Ryan E. Benson
> >>
> >> On Wed, Mar 14, 2018 at 3:23 PM, Birkir R. Gunnarsson <
> >> = EMAIL ADDRESS REMOVED = > wrote:
> >>
> >>> A lot of people don't know this, but HTML5 actually has simulated
> >>> combox code.
> >>> That is the list attribute combined with the <datalist> element.
> >>> <label for="search">Search</label>
> >>> <input id="search" type="text" list="suggestions"> <datalist
> >>> id="suggestions"> <option value="suggestion 1"> <option
> >>> value="suggestion 2"> ..
> >>> </datalist>
> >>>
> >>> The <datalist> elemet should hold all the possible options, they can
> >>> be loaded from a JSon file.
> >>> When user starts typing into the search input the browser
> >>> automatically displays matching suggestions from the datalist (it
> >>> shows the value of the matching option elements).
> >>> In Firefox at least you can use arrow keys to navigate into and
> >>> through the list, enter to select an option and close it, and escape
> >>> to dismiss it without selecting.
> >>> There are support and implementation differences between browsers
> >>> (Firefox matches the string from the beginning, Chrome only matches
> >>> for a substring, IE11 doesn't do anything at all).
> >>>
> >>> For instance, if you type "ppl" into the field and "apples" was one
> >>> of the options, Chrome would display it as a suggestion but Firefox
> >>> would not.
> >>>
> >>> If we can file bugs and get the browser vendors committed this is
> >>> close to being an accessible no-JavaScript-needed solution.
> >>> I think this and accessibility support of the <dialog> element are
> >>> the biggest advances that current HTML5 has to offer, the amount of
> >>> ARIA and JavaScript and focus management that is needed to get those
> >>> right is beyond most ordinary developers, and I don't blame them.
> >>> But if they could do it with HTML, it would be amazing.
> >>>
> >>> I don't know why this isn't gaining more traction, most web
> >>> developers I talk to have never heard of this, even if it is in the
> HTML5 spec.
> >>>
> >>>
> >>>
> >>>> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> >>>> Hi Bryan,
> >>>>
> >>>> I will reply off-list. At this stage all I really want is a
> >>>> replacement
> >>> for
> >>>> a native combobox, so I have only been testing the Country combobox
> >>>> at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> >>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
> >>> 20Editable%20with%20Substring%20Match)/demo.htm.
> >>>> All the other whizzy features such as autocomplete can wait until
> >>>> we get
> >>> the
> >>>> basic widget working.
> >>>>
> >>>> Steve
> >>>>
> >>>> -----Original Message-----
> >>>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> >>> Behalf
> >>>> Of Bryan Garaventa
> >>>> Sent: 14 March 2018 18:09
> >>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> >>>> Subject: Re: [WebAIM] Selects with drop downs
> >>>>
> >>>> "and the Whatsock designs don't work at all well in some cases. In
> >>>> one specific case, JAWS 2018 announces that the combobox has been
> >>>> set to a different value than has actually been selected."
> >>>>
> >>>> Hi,
> >>>> There are many possibilities which may be causing this confusion,
> >>>> not
> >>> just
> >>>> the programming of the widget. E.G The purpose you are trying to
> >>>> use the combobox for, support level differences between browsers or
> >>>> screen reader bugs, or configuration settings available within the
> >>>> combobox widget that you may not be aware of.
> >>>>
> >>>> So, when you get a chance, can you please reply with steps to
> >>>> reproduce, including the version of JAWS and which browser you are
> >>>> using plus the widget example you are testing? Also please explain
> >>>> the negative behavior that you are experiencing, which will give me
> >>>> a sense of where to home in specifically.
> >>>>
> >>>> Thanks,
> >>>> Bryan
> >>>>
> >>>>
> >>>>
> >>>> Bryan Garaventa
> >>>> Accessibility Fellow
> >>>> Level Access, Inc.
> >>>> = EMAIL ADDRESS REMOVED =
> >>>> 415.624.2709 (o)
> >>>> www.LevelAccess.com
> >>>>
> >>>> -----Original Message-----
> >>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf
> >>>> Of
> >>> Steve
> >>>> Green
> >>>> Sent: Wednesday, March 14, 2018 7:31 AM
> >>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> >>>> Subject: Re: [WebAIM] Selects with drop downs
> >>>>
> >>>> I have been testing those Whatsock comboboxes recently and I find
> >>>> that
> >>> they
> >>>> only work well under certain specific circumstances. There are many
> >>>> ways
> >>> in
> >>>> which a user can interact with even a simple combobox (I have
> >>>> tested ten ways but there are potentially more), and the Whatsock
> >>>> designs don't
> >>> work at
> >>>> all well in some cases. In one specific case, JAWS 2018 announces
> >>>> that
> >>> the
> >>>> combobox has been set to a different value than has actually been
> >>> selected.
> >>>>
> >>>> It's worth noting that even when the behaviour is acceptable, the
> >>>> user experience is substantially different from a native combobox.
> >>>> I find it disappointing and frustrating that the HTML5 and ARIA
> >>>> specifications have not been written such that it is possible to
> >>>> closely or exactly emulate a native combobox. It would be
> >>>> interesting to know if there is a reason for this. It seems such an
> >>>> obvious thing to want to do.
> >>>>
> >>>> I hadn't planned to post these comments yet but I felt obliged to
> >>>> since
> >>> you
> >>>> were recommending these designs. I will send Bryan Garaventa my
> >>>> report as soon as it is complete. I very much hope that he can fix
> >>>> his designs
> >>> because
> >>>> they are better than any other combobox replacements I have tested.
> >>> However,
> >>>> I don't regard them as being good enough to recommend to our
> >>>> clients yet.
> >>>>
> >>>> Steve Green
> >>>> Managing Director
> >>>> Test Partners Ltd
> >>>>
> >>>>
> >>>> -----Original Message-----
> >>>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> >>> Behalf
> >>>> Of Brandon Keith Biggs
> >>>> Sent: 14 March 2018 14:03
> >>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> >>>> Subject: Re: [WebAIM] Selects with drop downs
> >>>>
> >>>> Are these datalists?
> >>>> https://www.w3schools.com/tags/tag_datalist.asp
> >>>>
> >>>> Otherwise, AccDC has some fantastic comboboxes:
> >>>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> >>> 20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.ht
> >>> m
> >>>>
> >>>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> >>> 20Comboboxes%20(Native%20Inputs,%20Multiselect%
> >>> 20Editable%20with%20Substring%20Match)/demo.htm
> >>>>
> >>>> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%
> >>> 20Comboboxes%20(Simulated,%20Readonly)/demo.htm
> >>>>
> >>>> There are several others, but you can find them in the technical
> >>>> style guide.
> >>>> Thanks,
> >>>>
> >>>>
> >>>> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> >>>>
> >>>> On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson
> >>>> < = EMAIL ADDRESS REMOVED = >
> >>>> wrote:
> >>>>
> >>>>> Pardon the title, I am not sure what these things are officially
> >>>>> called.
> >>>>> There's a group bent on using select elements aka dropdowns with
> >>>>> built-in search/filter functions. I believe there was a thread
> >>>>> here a while ago, but can't find it. Unless I am mistaken, the
> >>>>> thread leaned towards not using them, even though they can be made
> >>>>> accessible. The PM and the second developer didn't know what
> >>>>> framework they were using, and have yet to hear back from the
> >>>>> lead, but they think Bootstrap "or based on it."
> >>>>>
> >>>>> Any pointers would be great, since i have yet to get access to
> >>>>> their code.
> >>>>>
> >>>>> --
> >>>>> Ryan E. Benson
> >>>>> > >>>>> > >>>>> archives at http://webaim.org/discussion/archives
> >>>>> > >>>>>
> >>>> > >>>> > >>> archives at
> >>>> http://webaim.org/discussion/archives
> >>>> > >>>> > >>>> > >>> archives at
> >>>> http://webaim.org/discussion/archives
> >>>> > >>>> > >>>> > >>> archives at
> >>>> http://webaim.org/discussion/archives
> >>>> > >>>> > >>>> > >>>> archives at http://webaim.org/discussion/archives
> >>>> > >>>>
> >>>
> >>>
> >>> --
> >>> Work hard. Have fun. Make history.
> >>> > >>> > >>> archives at http://webaim.org/discussion/archives
> >>> > >>>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > > > > > > > > > > >

From: Brandon Keith Biggs
Date: Thu, Mar 15 2018 3:29AM
Subject: Re: Selects with drop downs
← Previous message | Next message →

I think you should file the bug on Chrome and put a message that people
should use Firefox or it may not work as expected. There is no excuse for
browsers to not support HTML5 completely after 10 years.
Most screen reader users use Firefox anyways, so datalists work great.
Thank you,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 12:50 PM, Steve Green <
= EMAIL ADDRESS REMOVED = > wrote:

> Browser support for <datalist> is very poor, which is a shame because it
> does exactly what I need in our CRM system.
>
> The W3Schools website says that Safari does not support it at all. It
> works in Chrome but it's got a nasty behaviour insofar as the list does not
> fully repopulate if you type some characters and then delete them all. You
> have to either close the dropdown and re-open it, or click in the textbox.
>
> Steve
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: 14 March 2018 19:24
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> A lot of people don't know this, but HTML5 actually has simulated combox
> code.
> That is the list attribute combined with the <datalist> element.
> <label for="search">Search</label>
> <input id="search" type="text" list="suggestions"> <datalist
> id="suggestions"> <option value="suggestion 1"> <option value="suggestion
> 2"> ..
> </datalist>
>
> The <datalist> elemet should hold all the possible options, they can be
> loaded from a JSon file.
> When user starts typing into the search input the browser automatically
> displays matching suggestions from the datalist (it shows the value of the
> matching option elements).
> In Firefox at least you can use arrow keys to navigate into and through
> the list, enter to select an option and close it, and escape to dismiss it
> without selecting.
> There are support and implementation differences between browsers (Firefox
> matches the string from the beginning, Chrome only matches for a substring,
> IE11 doesn't do anything at all).
>
> For instance, if you type "ppl" into the field and "apples" was one of the
> options, Chrome would display it as a suggestion but Firefox would not.
>
> If we can file bugs and get the browser vendors committed this is close to
> being an accessible no-JavaScript-needed solution.
> I think this and accessibility support of the <dialog> element are the
> biggest advances that current HTML5 has to offer, the amount of ARIA and
> JavaScript and focus management that is needed to get those right is beyond
> most ordinary developers, and I don't blame them.
> But if they could do it with HTML, it would be amazing.
>
> I don't know why this isn't gaining more traction, most web developers I
> talk to have never heard of this, even if it is in the HTML5 spec.
>
>
>
> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi Bryan,
> >
> > I will reply off-list. At this stage all I really want is a
> > replacement for a native combobox, so I have only been testing the
> > Country combobox at http://whatsock.com/tsg/Coding%20Arena/ARIA%
> 20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%
> 20Editable%20with%20Substring%20Match)/demo.htm.
> > All the other whizzy features such as autocomplete can wait until we
> > get the basic widget working.
> >
> > Steve
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Bryan Garaventa
> > Sent: 14 March 2018 18:09
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > "and the Whatsock designs don't work at all well in some cases. In one
> > specific case, JAWS 2018 announces that the combobox has been set to a
> > different value than has actually been selected."
> >
> > Hi,
> > There are many possibilities which may be causing this confusion, not
> > just the programming of the widget. E.G The purpose you are trying to
> > use the combobox for, support level differences between browsers or
> > screen reader bugs, or configuration settings available within the
> > combobox widget that you may not be aware of.
> >
> > So, when you get a chance, can you please reply with steps to
> > reproduce, including the version of JAWS and which browser you are
> > using plus the widget example you are testing? Also please explain the
> > negative behavior that you are experiencing, which will give me a
> > sense of where to home in specifically.
> >
> > Thanks,
> > Bryan
> >
> >
> >
> > Bryan Garaventa
> > Accessibility Fellow
> > Level Access, Inc.
> > = EMAIL ADDRESS REMOVED =
> > 415.624.2709 (o)
> > www.LevelAccess.com
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> > Steve Green
> > Sent: Wednesday, March 14, 2018 7:31 AM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > I have been testing those Whatsock comboboxes recently and I find that
> > they only work well under certain specific circumstances. There are
> > many ways in which a user can interact with even a simple combobox (I
> > have tested ten ways but there are potentially more), and the Whatsock
> > designs don't work at all well in some cases. In one specific case,
> > JAWS 2018 announces that the combobox has been set to a different value
> than has actually been selected.
> >
> > It's worth noting that even when the behaviour is acceptable, the user
> > experience is substantially different from a native combobox. I find
> > it disappointing and frustrating that the HTML5 and ARIA
> > specifications have not been written such that it is possible to
> > closely or exactly emulate a native combobox. It would be interesting
> > to know if there is a reason for this. It seems such an obvious thing to
> want to do.
> >
> > I hadn't planned to post these comments yet but I felt obliged to
> > since you were recommending these designs. I will send Bryan Garaventa
> > my report as soon as it is complete. I very much hope that he can fix
> > his designs because they are better than any other combobox
> > replacements I have tested. However, I don't regard them as being good
> enough to recommend to our clients yet.
> >
> > Steve Green
> > Managing Director
> > Test Partners Ltd
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Brandon Keith Biggs
> > Sent: 14 March 2018 14:03
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > Are these datalists?
> > https://www.w3schools.com/tags/tag_datalist.asp
> >
> > Otherwise, AccDC has some fantastic comboboxes:
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
> > oxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
> >
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
> > oxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%2
> > 0Match)/demo.htm
> >
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Combob
> > oxes%20(Simulated,%20Readonly)/demo.htm
> >
> > There are several others, but you can find them in the technical style
> > guide.
> > Thanks,
> >
> >
> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> >
> > On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson
> > < = EMAIL ADDRESS REMOVED = >
> > wrote:
> >
> >> Pardon the title, I am not sure what these things are officially called.
> >> There's a group bent on using select elements aka dropdowns with
> >> built-in search/filter functions. I believe there was a thread here a
> >> while ago, but can't find it. Unless I am mistaken, the thread leaned
> >> towards not using them, even though they can be made accessible. The
> >> PM and the second developer didn't know what framework they were
> >> using, and have yet to hear back from the lead, but they think
> >> Bootstrap "or based on it."
> >>
> >> Any pointers would be great, since i have yet to get access to their
> >> code.
> >>
> >> --
> >> Ryan E. Benson
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > at http://webaim.org/discussion/archives
> > > > > >

From: Steve Green
Date: Thu, Mar 15 2018 4:11AM
Subject: Re: Selects with drop downs
← Previous message | Next message →

I have filed a bug report.

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Brandon Keith Biggs
Sent: 15 March 2018 09:29
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Selects with drop downs

I think you should file the bug on Chrome and put a message that people should use Firefox or it may not work as expected. There is no excuse for browsers to not support HTML5 completely after 10 years.
Most screen reader users use Firefox anyways, so datalists work great.
Thank you,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 12:50 PM, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:

> Browser support for <datalist> is very poor, which is a shame because
> it does exactly what I need in our CRM system.
>
> The W3Schools website says that Safari does not support it at all. It
> works in Chrome but it's got a nasty behaviour insofar as the list
> does not fully repopulate if you type some characters and then delete
> them all. You have to either close the dropdown and re-open it, or click in the textbox.
>
> Steve
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: 14 March 2018 19:24
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Selects with drop downs
>
> A lot of people don't know this, but HTML5 actually has simulated
> combox code.
> That is the list attribute combined with the <datalist> element.
> <label for="search">Search</label>
> <input id="search" type="text" list="suggestions"> <datalist
> id="suggestions"> <option value="suggestion 1"> <option
> value="suggestion 2"> ..
> </datalist>
>
> The <datalist> elemet should hold all the possible options, they can
> be loaded from a JSon file.
> When user starts typing into the search input the browser
> automatically displays matching suggestions from the datalist (it
> shows the value of the matching option elements).
> In Firefox at least you can use arrow keys to navigate into and
> through the list, enter to select an option and close it, and escape
> to dismiss it without selecting.
> There are support and implementation differences between browsers
> (Firefox matches the string from the beginning, Chrome only matches
> for a substring,
> IE11 doesn't do anything at all).
>
> For instance, if you type "ppl" into the field and "apples" was one of
> the options, Chrome would display it as a suggestion but Firefox would not.
>
> If we can file bugs and get the browser vendors committed this is
> close to being an accessible no-JavaScript-needed solution.
> I think this and accessibility support of the <dialog> element are the
> biggest advances that current HTML5 has to offer, the amount of ARIA
> and JavaScript and focus management that is needed to get those right
> is beyond most ordinary developers, and I don't blame them.
> But if they could do it with HTML, it would be amazing.
>
> I don't know why this isn't gaining more traction, most web developers
> I talk to have never heard of this, even if it is in the HTML5 spec.
>
>
>
> On 3/14/18, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi Bryan,
> >
> > I will reply off-list. At this stage all I really want is a
> > replacement for a native combobox, so I have only been testing the
> > Country combobox at http://whatsock.com/tsg/Coding%20Arena/ARIA%
> 20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%
> 20Editable%20with%20Substring%20Match)/demo.htm.
> > All the other whizzy features such as autocomplete can wait until we
> > get the basic widget working.
> >
> > Steve
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Bryan Garaventa
> > Sent: 14 March 2018 18:09
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > "and the Whatsock designs don't work at all well in some cases. In
> > one specific case, JAWS 2018 announces that the combobox has been
> > set to a different value than has actually been selected."
> >
> > Hi,
> > There are many possibilities which may be causing this confusion,
> > not just the programming of the widget. E.G The purpose you are
> > trying to use the combobox for, support level differences between
> > browsers or screen reader bugs, or configuration settings available
> > within the combobox widget that you may not be aware of.
> >
> > So, when you get a chance, can you please reply with steps to
> > reproduce, including the version of JAWS and which browser you are
> > using plus the widget example you are testing? Also please explain
> > the negative behavior that you are experiencing, which will give me
> > a sense of where to home in specifically.
> >
> > Thanks,
> > Bryan
> >
> >
> >
> > Bryan Garaventa
> > Accessibility Fellow
> > Level Access, Inc.
> > = EMAIL ADDRESS REMOVED =
> > 415.624.2709 (o)
> > www.LevelAccess.com
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf
> > Of Steve Green
> > Sent: Wednesday, March 14, 2018 7:31 AM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > I have been testing those Whatsock comboboxes recently and I find
> > that they only work well under certain specific circumstances. There
> > are many ways in which a user can interact with even a simple
> > combobox (I have tested ten ways but there are potentially more),
> > and the Whatsock designs don't work at all well in some cases. In
> > one specific case, JAWS 2018 announces that the combobox has been
> > set to a different value
> than has actually been selected.
> >
> > It's worth noting that even when the behaviour is acceptable, the
> > user experience is substantially different from a native combobox. I
> > find it disappointing and frustrating that the HTML5 and ARIA
> > specifications have not been written such that it is possible to
> > closely or exactly emulate a native combobox. It would be
> > interesting to know if there is a reason for this. It seems such an
> > obvious thing to
> want to do.
> >
> > I hadn't planned to post these comments yet but I felt obliged to
> > since you were recommending these designs. I will send Bryan
> > Garaventa my report as soon as it is complete. I very much hope that
> > he can fix his designs because they are better than any other
> > combobox replacements I have tested. However, I don't regard them as
> > being good
> enough to recommend to our clients yet.
> >
> > Steve Green
> > Managing Director
> > Test Partners Ltd
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Brandon Keith Biggs
> > Sent: 14 March 2018 14:03
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Selects with drop downs
> >
> > Are these datalists?
> > https://www.w3schools.com/tags/tag_datalist.asp
> >
> > Otherwise, AccDC has some fantastic comboboxes:
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comb
> > ob oxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
> >
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comb
> > ob
> > oxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring
> > %2
> > 0Match)/demo.htm
> >
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comb
> > ob oxes%20(Simulated,%20Readonly)/demo.htm
> >
> > There are several others, but you can find them in the technical
> > style guide.
> > Thanks,
> >
> >
> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> >
> > On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson
> > < = EMAIL ADDRESS REMOVED = >
> > wrote:
> >
> >> Pardon the title, I am not sure what these things are officially called.
> >> There's a group bent on using select elements aka dropdowns with
> >> built-in search/filter functions. I believe there was a thread here
> >> a while ago, but can't find it. Unless I am mistaken, the thread
> >> leaned towards not using them, even though they can be made
> >> accessible. The PM and the second developer didn't know what
> >> framework they were using, and have yet to hear back from the lead,
> >> but they think Bootstrap "or based on it."
> >>
> >> Any pointers would be great, since i have yet to get access to
> >> their code.
> >>
> >> --
> >> Ryan E. Benson
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >

From: Patrick H. Lauke
Date: Thu, Mar 15 2018 4:18AM
Subject: Re: Selects with drop downs
← Previous message | Next message →

On 15/03/2018 03:13, = EMAIL ADDRESS REMOVED = wrote:
> << all we can do is to diligently file bugs or promote bugs if already filed to keep the issues alive on the vendor's to-do list.>>
>
> Definitely, do that.
> But how about another tactic?
>
> Sec. 508 requires the federal government buy accessible software and hardware. Enforce it, especially if you're a government entity or one that is covered by accessibility regulations, such as schools and colleges.
>
> Tell the manufacturers why their products will no longer be purchased, that you'll consider them again in the future if they correct their shortcomings.
>
> This strategy has worked in the past with other manufacturers in the industry.

That doesn't work in this context, which was: go ahead and use
HTML/CSS/JS features as per spec, and tough if browsers don't support
it, it's their responsibility. Because you don't control what browser
your end users are using (this is not about purchasing any system)...

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Ryan E. Benson
Date: Thu, Mar 15 2018 7:38PM
Subject: Re: Selects with drop downs
← Previous message | No next message

> That doesn't work in this context, which was: go ahead and use
HTML/CSS/JS features as per spec, and tough if browsers don't support it,
it's their responsibility. Because you don't control what browser your end
users are using (this is not about purchasing any system)

This is an internal system, so knowing all internal systems must run on IE,
then that issue is solved. If it was public facing, then such issues would
come into play.

--
Ryan E. Benson

On Thu, Mar 15, 2018 at 6:18 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> On 15/03/2018 03:13, = EMAIL ADDRESS REMOVED = wrote:
>
>> << all we can do is to diligently file bugs or promote bugs if already
>> filed to keep the issues alive on the vendor's to-do list.>>
>>
>> Definitely, do that.
>> But how about another tactic?
>>
>> Sec. 508 requires the federal government buy accessible software and
>> hardware. Enforce it, especially if you're a government entity or one that
>> is covered by accessibility regulations, such as schools and colleges.
>>
>> Tell the manufacturers why their products will no longer be purchased,
>> that you'll consider them again in the future if they correct their
>> shortcomings.
>>
>> This strategy has worked in the past with other manufacturers in the
>> industry.
>>
>
> That doesn't work in this context, which was: go ahead and use HTML/CSS/JS
> features as per spec, and tough if browsers don't support it, it's their
> responsibility. Because you don't control what browser your end users are
> using (this is not about purchasing any system)...
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >