Operator screens and process graphics
Mimic <smart-mimic>
Mimic is a process diagram canvas.
Accessibility Attributes
A process diagram is difficult to make accessible because much of its meaning is spatial. The Mimic makes every piece of equipment reachable and describable: the canvas is a single tab stop, the arrow keys move between symbols, and each symbol carries its tag, state and reading as text.
The following ARIA attributes are used inside the Mimic:
- role="group" - set on the diagram, with an aria-label reporting how many items are on it, so a reader knows the size of what it has landed in before exploring it.
- One tab stop, roving - the canvas is a single tab stop and the arrow keys move between symbols. A diagram with forty separate tab stops would be difficult to use from the keyboard.
- Symbol labels - each symbol is a MimicSymbol and carries its own accessible name, tag, type, state and reading, as in "P-2101A, pump, running, 6.28 bar". The state is conveyed visually by colour and line style, so it has to be in the text.
- aria-hidden="true" - set on the connection layer. Lines between named items carry no information a reader needs; the meaning is in the equipment at either end, and announcing every segment would bury it.
- tabindex="0" on the viewport - so the canvas itself can be focused and panned with the keyboard rather than only by dragging.
- aria-disabled - indicates that the diagram is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the Mimic:
| Key | Action |
|---|---|
| Tab | Moves into the diagram, landing on the symbol that holds the tab stop, and out again. One stop however many items are on it. |
| Arrow keys | Move between symbols in document order. Reversed horizontally when rightToLeft is set. |
| Home / End | Move to the first / last symbol. |
| Enter or Space | Selects the focused symbol and raises symbolClick - the same event a pointer click raises, so a keyboard user reaches the detail view by the same path. |
| Ctrl or Cmd + wheel | Zooms about the pointer. A plain wheel is left to the page, because a mimic usually sits on a scrolling screen and hijacking the wheel outright means the page cannot be scrolled past the diagram. |
Arrow key navigation follows the order in which the symbols were declared, not their position on the canvas. This is predictable but not spatial; a spatial walk would need a geometry index, which is not implemented. Declaring the symbols in process order gives a keyboard user a meaningful sequence.
Localization
All strings the Mimic 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 Mimic uses the following message keys:
- mimicLabel
- empty
Additional information on WAI-ARIA for the SMART Framework can be found here.