Navigation By Prearranged Accesskeys

Sitemap of www.esprit.fr indexed by accesskeys

Accesskey is a feature of browsers, that allows users to jump to specific parts of a web page by keyboard. HTML elements use an attribute "accesskey=k" and have the same letter - here "k" - visually marked in their inner HTML. Activation requires a modifier key like <Alt>, <Ctrl> or even 2 being pressed and hold before the accesskey is typed.

The widget below uses unmodified accesskeys to navigate sitemap url's. The first circle of 1 character width takes your input. On focus the selections are shown in fullscreen mode. The accesskeys are the first characters of the selectable tokens. Selected tokens are concatenated in the breadcrumbs navigation. Backspace deletes the last token.

This sitemap has been chosen as example as it contains French accented characters in UTF-8 encoding. Sitemap files are destined to use UTF-8 but mostly contain only ASCII characters and have e.g. accented characters replaced by minus, omit the accent or contain both of them. If you do not have a French keyboard, you have to enter key sequences or click the corresponding table row.

Type unmodified accesskey and iterate on options Last complete input sequence as link

Technology

On touch devices the taipudex input widget works as virtual keyboard.

The Taipudex User Interface

This input technology allows item selection with minimal interaction. A dynamic multi-level menu shows the next possible letters and their definite completions according to the current prefix int the breadcrumbs section of the taipudex widget. Valid input and its completion string are inserted in the increasing breadcrumb left of the input field. As the input field accepts one of the next possible values its length is restricted to size one.

The user selects by keypresses or clicks. The menu shows valid keys in rounded boxes, that are unique and thus do not require additonal keypresses as known from the acceleration keys in application menus. The menu updates inplace and menu levels are not restricted. The final selection by either contained character or terminating return/enter key will popup the linked product page. The browser will ask you to allow popups on this page. Invalid input is visible in the input field. It is selected and the next keypress will overwrite. In case of mismatch the case toggled value is probed automatically and often saves pressing the shift key.

On touch devices this works as a fullscreen virtual keyboard. The Backspace-key or the upper right button "arrow-to-left" undoes the previous action. The Pos1-key or the upper left button "bar-with-rightwards-arrow" jumps to the start. A click into the breadcrumbs left of the single character input jumps to the previous menu accordingly.

As the activation area of the discriminating keys covers nearly the full screen, this interface works well with eye-tracking technologies like eye-gazer.

Common autocomplete input requires pressing the Tab key to accept the active completion or use navigation with arrow keys to cycle through suggestion. This are triggers to screen readers to "speak". This implementation does not support arrow navigation and hence the list of options is hidden from screen readers. However when a valid key is pressed, this key and its successors are spelled. When the End-key is pressed, the complete prefix is spelled in a preliminary alert-element with indication of the pressed keys. The Pos1-key produces an empty alert, as the input is reset. Backspace-action and invalid input is not audible. Invalid input is selected to get overwritten.

Traditional autocompletion triggers on a minimum prefix length ≥ 1. Taipudex completion triggers before the first keypress. The first offers 'complete' values, the latter iterates on definite sequences. If the current menu only contains few successors, they are made selectable with with auxiliary keys in the last column.

The Taipudex widget lets you select items from large lists in a single page. The maximum level of nested menus is ≤ length of longest item. The real menu level depends on language, the size of the alphabet in use and the number of elements. Taipudex is "accesskeys without the modifier keys" with any character supported.

References

Autocomplete
Incremental Find

Consultancy and Software Development

We provide software related engineering services. Deltadatentechnik GmbH

Most Common Questions

Why another selection user interface?

Have you ever wondered why you had to type another key like tab to accept input that has been autocompleted, even when alternatives did not exist?

Existing type-ahead solutions filter possible input by what the user has already typed ¹. Standard type ahead starts with an adjustable minimal length of user input and its results are truncated to an upper limit. Mostly you see the first results ordered alphabetically. The first match is possibly copied into the input field, with the suffix in selected mode to allow overwriting. A rare match is accepted by the tab key in full length.

This user interface shows next characters with definite next characters in advance. Typing a valid letter will take this letter or autocomplete the associated sequence if available and advance with the next collection.

No additional key has to be pressed to continue interactions. The last key pressed (i.e. the last relevant letter of your choice) will continue your interaction like you clicked a link. This works like a menu with submenues, that is displayed in place, and the current path is shown in a header line. Backspace undoes the last input. A click in the completion of a previous section jumps back to where this sequence was chosen.

Invalid input is shown on red background in selection mode and can be overtyped instantly. You may type case insensitive, as on mismatches the upper- or lowercase letter is probed. This sometimes eliminates the need to use the shift key.

This user interface specifically allows minimal manual interaction to select an item, where the total number of items does not fit into the screen area without scrolling.

¹ Standard search engines are not limited to prefixes like this demo. The user is not restricted to start words from the beginning, but may as well omit leading characters and still get useful matches.

How Does This Gui Work

This user interface implements a dynamic virtual keyboard. It provides extra large touchable areas on handheld devices. The tabular layout uses ascii sort order in columnar orientation. The large responsive cell area assists users using eye-mouse or eye-gaze software, like eviacam. It supports both typewriters and users of handheld devices without keyboard.
By default a filter on the first letter is set to show only letters a to z. The unfocussed input shows a caret inside a circular area that contains 3 vertical bars. It accepts one letter at a time. In typewriter mode a typo will appear selected in red, so you can overtype with a letter from the suggestions provided. In touch mode no text input is used, as this would activate the devices default soft keyboard.
Whenever non ambigous continuations exist, they are shown ahead and appended as breadcrumb on selection. This autocompletion method works with choosing the single letter shown in the circles that are vertically aligned in one or more columns. No additonal user interaction is required to achieve completion. The interaction that completes a list entry will open an intermediate page.
The backspace key undoes the previous affix. The home-key returns to the beginning. You may click on any affix to remove it.

The copy event takes the full sequence. Paste here to test.

How Does This Differ From Common Search?

The selection process is deterministic and independent of

user data tracking
statistics
cookies
friends you are connected to

The flow of typing is not interrupted by navigation to a suggested match by

pointer action
navigation keys
scrolling

Alternative keypresses and their definite completions are shown in advance

Accesskeys are used unmodified
The last input triggers an action
The last input is either the first letter of a possible completion or the return key, when the current prefix is already a valid item