Operator screens and process graphics
HMI Shell <smart-hmi-shell>
HmiShell is the display frame for operator screens described in ISA-101.
Accessibility Attributes
The HmiShell is the frame around an operator screen and is built from landmarks: a banner, a navigation, a main and a contentinfo region, each with a name, so a screen reader user can move between the header, the display navigation, the screen content and the alarm strip. The connection state is a status region with the state in words. The navigation bar is a composite widget with one tab stop and arrow key navigation, and the alarm count of every display is part of its accessible name, including the priority word, in addition to the colour of the badge.
The following ARIA attributes are used inside the HmiShell:
- role="group" - set on the container, with an aria-label naming the screen - "Operator screen: Plant overview".
- role="banner", role="navigation", role="main", role="contentinfo" - set on the header, the navigation bar, the main area and the alarm strip, each with an aria-label, so the four parts of every screen are landmarks a reader can jump between.
- role="status" - set on the connection state, with an aria-label - "Data connection: connected". A change is announced through the live region, assertively when the connection is lost.
- aria-label - set on each display in the navigation bar, as its name and its alarm count with the priority word - "Area 2 ยท Utilities, 1 critical alarms". The badge beside it is aria-hidden; the words carry the count.
- aria-current="page" - set on the display now shown.
- aria-pressed - set on the theme toggle, true when the dark theme is in force, with an aria-label saying what pressing it does.
- tabindex - managed as a roving tab stop across the navigation bar: one display is 0, the rest -1.
- aria-disabled - indicates that the shell is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the HmiShell:
| Key | Action |
|---|---|
| Tab | Moves through the header controls, into the navigation bar landing on the display that holds the tab stop, then into the screen's own content. The navigation bar is one stop however many displays there are. |
| Arrow Left/Right | Moves between the displays in the navigation bar. |
| Home / End | Moves to the first / last display. |
| Enter or Space | On a display, raises navigate; the application changes the screen. On the user button, raises userClick. On the theme toggle, switches the theme of the shell and everything inside it. |
The alarm strip is pressed with a pointer and raises alarmsClick; for the keyboard, the alarm list is a display in the navigation bar, which is where an operator without a pointer reaches it.
Localization
All strings the HmiShell 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 HmiShell uses the following message keys:
- shellLabel, headerLabel, navigationLabel, mainLabel, footerLabel
- connected, connecting, reconnecting, error, closed, unknown, connectionLabel
- userLabel, clockLabel, themeToggle, light, dark
- navigationItem, navigationAlarms, critical, warning, advisory
- noAlarms, alarmSummary, alarmCounts, newestAlarm, openAlarms
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.