Operator screens and process graphics
Faceplate <smart-faceplate>
Faceplate is a control loop faceplate that shows the process value, the setpoint and the controller output of a loop together with its mode.
Accessibility Attributes
A faceplate shows three values and a mode, and the relationship between the values is the information. Each column therefore has its own role, range and spoken value, instead of the whole faceplate being announced as one graphic.
The following ARIA attributes are used inside the Faceplate:
- role="group" - set on the faceplate's container, named with the tag and the description: "FIC-101, Feed flow".
- role="meter" - set on the process value column, always. The process value is a measurement, not something anyone chooses, so it is never exposed as a control however interactive the faceplate is. The output column is also a meter unless the faceplate is interactive and the loop is in manual.
- role="slider" - set on the setpoint marker on the process value column when the faceplate is interactive and the loop is not in cascade or out of service. The marker is named "Setpoint", carries the process range in aria-valuemin and aria-valuemax, and speaks the confirmed setpoint with its unit: "430.0 t/h". A press or a drag on the process value track also requests a setpoint.
- role="slider" - replaces the meter role on the output column when the faceplate is interactive and the mode is manual, which is the only time an operator may drive the output directly.
- aria-valuemin, aria-valuemax, aria-valuenow - the range and the reading, on each column. A column with no reading carries no aria-valuenow at all rather than a zero, because zero is a claim about the plant and absence is not.
- aria-valuetext - what is actually spoken: the reading with its unit, then the quality if it is not good. The process value column then adds the alarm limit if one has been crossed and any outstanding setpoint request: "412.0 t/h, reading stale, high alarm".
- role="radiogroup" and role="radio" - the mode selector and its buttons, with aria-checked on the current mode.
- aria-hidden="true" - set on the embedded trend. The readouts above it already carry the numbers, and a screen reader walking a hundred samples learns nothing it was not already told.
- aria-disabled - indicates that the faceplate is disabled.
Quality, and why it is in the spoken value
The worst failure this component could have is to read a stale number out as though it were current. A sighted operator sees the quality badge; anyone using a screen reader would otherwise hear only the number. The quality is therefore part of aria-valuetext, not merely a visual mark.
Keyboard Interaction
A faceplate that is not interactive takes no keyboard focus at all. It reports and cannot be operated, and a screen carrying a dozen loops would otherwise collect dozens of tab stops that do nothing.
When it is interactive, there are at most three stops: the setpoint marker, unless the loop is in cascade or out of service; the output column, when the loop is in manual; and the mode selector. The mode selector is a single stop, with the arrow keys moving between its modes.
| Key | Action |
|---|---|
| Up Arrow, Right Arrow (setpoint, output) | Requests one step higher. |
| Down Arrow, Left Arrow (setpoint, output) | Requests one step lower. |
| Page Up, Page Down (setpoint, output) | Requests ten steps higher or lower. |
| Home, End (setpoint, output) | Requests the bottom or the top of the range. |
| Left Arrow, Right Arrow (mode selector) | Moves between the modes on offer, wrapping at the ends. |
| Home, End (mode selector) | Moves to the first or the last mode. |
| Enter, Space (mode selector) | Requests the highlighted mode. |
The keys that act on a setpoint, an output or a mode request it. None of them changes a value. The faceplate raises an event and waits for the application to write the value back from the control layer. A pointer gets the same behaviour, and no keyboard path bypasses the round trip.
Announcements
Crossing an alarm limit is announced through the framework's single shared live region, and only on the transition, not on every update. A high-high or low-low interrupts; a high or low is announced politely. The process value itself is never announced as it changes: a loop updating once a second would make the screen unusable with a reader running.
Localization
All strings the Faceplate 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 Faceplate uses the following message keys:
- auto, manual, cascade, outOfService - the mode names
- hiHi, hi, lo, loLo, normal - the alarm limits
- good, uncertain, bad, stale - the quality words
- pv, sp, op and their long forms processValue, setpoint, output
- pending, noValue, faceplateLabel, mode
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. 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.
Additional information on WAI-ARIA for the SMART Framework can be found here.