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
> >
> >