Instrument readouts and controls
Panel Meter <smart-panel-meter>
PanelMeter draws the moving-coil instrument screwed into the front of a rack: a rectangular case, a shallow arc of scale across the top of it and a long needle swinging from a pivot near the bottom.
Accessibility Attributes
A panel meter says everything it says by the angle of a needle against an arc. None of that reaches a screen reader, so the reading is carried by the slider value attributes and everything else on the plate is carried in words by aria-valuetext: the reading with its unit, whether the needle is against an end stop, and the setpoint when a set pointer is drawn. The scale itself is marked aria-hidden — reading out every number printed on a plate is not the same as being told what the instrument reads.
The over-range state is a word, not only a red border: the case raises a flag on the face and the accessible text says over range or under range. The reading reported is the end of the scale, because a value outside aria-valuemin and aria-valuemax is a broken contract; offScale tells an application what the host actually wrote.
Damping never reaches the accessible text. damping moves the needle, not the value, so what is read out is the reading at this instant, undamped, exactly as the digital display shows it.
The following ARIA attributes are used inside the PanelMeter:
- role="slider" - inherited from the scale engine, with aria-valuemin, aria-valuemax and aria-valuenow giving the ends of the scale and the reading.
- aria-valuetext - the reading with its unit, then over range or under range when the needle is against a stop, then the setpoint when one is shown.
- aria-label - the label property, which is what is being measured; a meter with no label is named "Panel meter".
- aria-hidden="true" - set on the face, so the scale's numbers are not read out in place of the reading.
- quality - reflected to an attribute, so a reading that is bad, uncertain or stale is drawn differently and described as such.
- title - set on the set pointer with its value, for the pointer.
Keyboard Interaction
A panel meter reads. It is an indicator, it is out of the tab order, and it has no keyboard interaction until interactive is set. With interactive on, the following keyboard shortcuts are available:
| Key | Action |
|---|---|
| Tab | Moves focus to the instrument. |
| Up arrow, Right arrow | Raises the reading by one step: interval when customInterval is set, otherwise a hundredth of the scale. |
| Down arrow, Left arrow | Lowers the reading by one step. |
| Home | Sets the reading to the bottom of the scale. |
| End | Sets the reading to the top of the scale. |
Each of these raises change with the new reading, which is a request from the operator: the host decides what to do with it.
Colour and contrast
Colour is never the only carrier. Off scale is a word on the face as well as a red bezel; an alarm band colours the needle and is also a band printed on the plate, which is readable in greyscale by its position; a bad reading greys the needle and hatches the case rather than only tinting it. Every colour is a theme token, so a plant that needs higher contrast sets the tokens rather than overriding the component. The face is one viewBox, so the whole instrument scales with the page rather than becoming a bitmap at 200 per cent zoom.
Localization
All strings the PanelMeter 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 PanelMeter uses the following message keys:
- panelMeterLabel, setpointIs, overRange, underRange, overRangeFlag
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. The unit on the plate comes from the application and is not localized; the numbers follow decimalSeparator.
Additional information on WAI-ARIA for the SMART Framework can be found here.