WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Selects with drop downs

for

From: Birkir R. Gunnarsson
Date: Mar 14, 2018 7:49PM

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