CodeMirror’s autocomplete broken by Opera keyboard accessibility feature

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.

Advertisements

7 thoughts on “CodeMirror’s autocomplete broken by Opera keyboard accessibility feature

  1. Hi,you can make multiple selections in firefox using the ctrl + arrow keys.In IE after making your initial selection you have to press shift + F8, then use the arrow keys to move to another option.

  2. Thanks, useful to know.Really makes me wonder how spec'ed this stuff should be, no..? UI and keyboard stuff is traditionally seen as the UA's domain, a field of innovation and differentiation. But when web sites rely on particular keypress combinations not being used by the UA it seems the pressure to conform will be quite strong in the end..

  3. If your guys want to avoid this type of hiccup I suggest you force the UA and interface team to use Firefox Nightly for a month. They have some very talented people, and there are a few little features coming soon that are really useful for certain browsing situations.Like the ability to not load all the tabs until you goto use them. The ability to distinguish when you have highlighted an actual web address. Ability to unclose a tab from context menu on every tab. They remember closed tabs after the browser restarts, that might be due to an extension I installed. And it remembers where you last saved a file for each domain separately.

  4. Either it needs to be standardized and handled by script tags only, or the keyboard UI should be aligned a bit better. For the most part Opera's keyboard support is very good. Last time I checked it is not possible to summon the menu with a keybpress while in fullscreen in Firefox, a glaring defect. Both Internet Explorer and Opera will display a menu if you press [Alt].Hm, I posted on that fellows blog but I will make the same suggestion here: find out whether Opera could allow more rights to an extension that does not want network access. Better Screen Reader/Voice Navigation support could be enabled with a third-party extension that uses VoiceXML. Right? And it should be a lot less work for Opera than rebuilding the engine with full TTS.

  5. Originally posted by toyotabedzrock:

    They have some very talented people, and there are a few little features coming soon that are really useful for certain browsing situations.

    Excuse me – don't insult Opera developers.Mozilla might have talented people but these talented people are leaving Mozilla year by year – like recently Alex Faaborg, a senior UI designer at Mozilla left the company – don't remember the month exactly; but either October 2011 or this month itself.There are some more key personalities like Mike Beltzner (and one more; don;t remember the name but it starts with Christian) left; if they leave Mozilla, then Firefox would die within a decade.

  6. Opera already uses conditional loading when a session with open pages is resumed in Opera Mini or Opera Mobile. This has been the case for quite some time. In fact, Mini will immediately deallocate background pages to allow a foreground page to finish loading. (in cases of low memory)Of course with Opera Desktop, even 100 tabs will resume successfully – all at the same time. There is no pressing need to bother with a conditional resume.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s