miscoded

Incidentally, just a couple of days after reading and commenting on this blog post regarding current Opera versions' accessibility shortcomings, I find a page that is broken precisely due to one of the accessibility features we do have..

As far as I know, Opera is the only browser that lets users use SELECT elements with several possible choices entirely from the keyboard. I've got a demo here, if you tab into the SELECT element you'll see that you can move focus with up/down arrows and use the space key to create selections. The code is good, old-school HTML - as simple as it gets:

<select multiple size="4">
	<option>A</option>
	<option>B</option>
	<option>C</option>
	<option>D</option>
</select>

CodeMirror.net has an autocomplete-demo - for example try to type 'get' and press ctrl-space in that editor. It's rather clever of them to pop up a dynamically created SELECT element to let you choose from - but unfortunately, they've set select.multiple to true:

    // Build the select widget
    var complete = document.createElement("div");
    complete.className = "completions";
    var sel = complete.appendChild(document.createElement("select"));
    sel.multiple = true;

Hence, if you try to use arrow-down you'll see Opera's pre-selection focus move down, the selection won't change. If you try to use space, the page interprets that as a confirmation of the current selection. It's just not possible to select anything but the first entry by keyboard.

Our best efforts at making <SELECT multiple> keyboard-accessible makes this page inaccessible. It's hard to innovate on the web. Even the subtlest innovations for the best reasons can cause compatibility problems..

In this case it's clearly the site's fault. It is semantically incorrect of them to say that this list is a multi-select when the user is only expected to select one single entry. (Luckily, I expect the coders behind this site to be receptive to arguments based on semantic correctness .)

Anyway, being stuck with this choice is obviously a bad thing:

<select>
<option>Accessible</option>
<option>Compatible</option>
</select>

What's wrong with that code? Well, someone forgot to put in the multiple attribute, of course.