Operator screens and process graphics

Mimic Symbol <smart-mimic-symbol>

MimicSymbol displays one piece of equipment on a process diagram, such as a pump, a valve, a tank or a motor, with its tag, state and reading.

Accessibility Attributes

A MimicSymbol is one piece of equipment on a process diagram. Because the operator clicks it to open its details, it is an interactive control: it is focusable, exposed as a button and operated with Enter or Space. A symbol placed on a diagram for display only can be removed from the tab order, in which case it is exposed as an image.

The following ARIA attributes are used inside the MimicSymbol:

  • role="button" - set on the symbol's container while it is interactive, which is the default, because the symbol raises symbolClick. Setting unfocusable, or disabling the symbol, changes this to role="img", which is the right answer for a symbol that is only decoration.
  • aria-label - composed from the equipment tag, the symbol type, the state and the reading - "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 alternative.
  • tabindex - 0 while interactive, so the symbol is reachable by keyboard; -1 when unfocusable or disabled, which takes it out of the tab order while leaving it programmatically focusable.
  • aria-hidden="true" - set on the symbol graphic, so the SVG contributes nothing to the accessibility tree.
  • aria-disabled - indicates that the symbol is disabled.

Keyboard Interaction

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

Key Action
Tab Moves focus to the symbol and away again, while it is interactive.
Enter or Space Reports the symbol as chosen, raising symbolClick - the same event a pointer click raises. Space also has its default page-scroll suppressed, because a mimic usually sits inside a scrolling diagram.

A diagram made of many symbols puts each one in the tab order. That is correct for a standalone symbol, which is an independent control; a large diagram should group them so the whole canvas is a single stop.

Localization

All strings the MimicSymbol 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 MimicSymbol uses the following message keys:

  • normal
  • running
  • stopped
  • fault
  • manual
  • maintenance
  • unknown
  • symbolLabel

German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Strings that are also exposed as properties default to empty and fall back to the pack, so the default text stays translatable while an explicit property value takes precedence.

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