WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Selects with drop downs

for

From: Ryan E. Benson
Date: Mar 14, 2018 6:30PM

> 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 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 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 REMOVED> ] On
> Behalf
> > Of Bryan Garaventa
> > Sent: 14 March 2018 18:09
> > To: WebAIM Discussion List < <EMAIL 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 REMOVED>
> > 415.624.2709 (o)
> > www.LevelAccess.com
> >
> > -----Original Message-----
> > From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Steve
> > Green
> > Sent: Wednesday, March 14, 2018 7:31 AM
> > To: WebAIM Discussion List < <EMAIL 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 REMOVED> ] On
> Behalf
> > Of Brandon Keith Biggs
> > Sent: 14 March 2018 14:03
> > To: WebAIM Discussion List < <EMAIL 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 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.
> > > > >