Instrument readouts and controls

Touch Keyboard <smart-touch-keyboard>

TouchKeyboard is the on-screen keyboard for a panel PC that has none, or a kiosk browser whose system keyboard covers the field it types into.

Accessibility Attributes

The TouchKeyboard is a group of buttons. Letters, digits and symbols are named by what they type; every other key - Backspace, Enter, Shift, the symbols switch, Space, the arrows and Hide - is drawn as an icon and named in words. A line above the keys names the field being typed into, which a screen reader can read and which a sighted operator needs when the keyboard covers the field.

The following ARIA attributes are used inside the TouchKeyboard:

  • role="group" - set on the container, named "On-screen keyboard".
  • aria-label - set on every key drawn as an icon. Enter is named "New line" when the field is a text area, because that is what it does there.
  • aria-pressed - set on Shift. With caps lock on it is named "Caps lock".
  • aria-hidden - set on the icons, so a key is read by its name only.
  • aria-disabled - indicates that the touch keyboard is disabled.

A key pressed with a mouse or a finger does not take focus: the field keeps its focus and caret, so a screen reader stays on the field and hears it change. A full field refuses the key and announces the limit. A popup or docked keyboard appears only while a field is being typed into and never takes focus when it does; the line above its keys names the field and, for a number, its range - "Typing into Quantity ยท 0 to 12000".

Keyboard Interaction

The following keyboard shortcuts are available to interact with the TouchKeyboard:

Key Action
Tab Moves to the keys as one stop, on the last key used.
Arrow keys Move between keys: across a row, and up and down to the nearest key in the next row.
Home / End Go to the first and last key of the row.
Enter or Space Presses the focused key, typing into the last field used.
Escape In the page, raises close. A popup or docked keyboard goes away - from its keys or from the field.
Tab From a field to the next one: a popup or docked keyboard follows, and goes away when focus leaves the fields.

A user with a keyboard of their own does not need this one, and should not have to tab through forty keys to get past it: that is why the keys are one stop.

Localization

All strings the TouchKeyboard exposes to assistive technology come from its messages property, so they can be provided in the user's language. Set locale to select a language and add a language through messages. Assigning messages replaces the whole object, so include the existing languages when adding one: el.messages = Object.assign({}, el.messages, { de: pack }); If the built-in en pack is dropped, switching back to English shows raw message keys.

The letters are the layout's, not the pack's: layout chooses qwerty, qwertz or azerty.

The TouchKeyboard uses the following message keys:

  • panelLabel, typingInto, typing, noTarget, backspace
  • enter, newLine, shift, capsLock, symbols
  • symbolsLabel, letters, lettersLabel, space, left
  • right, hide, full, done, range
  • atLeast, atMost, minus, decimal

German, French, Spanish and Chinese packs are included in the Smart.Industrial package.

Additional information on WAI-ARIA for the SMART Framework can be found here.