Instrument readouts and controls
Thermometer <smart-thermometer>
Thermometer shows a temperature as the instrument that measures it: a bulb that always holds the liquid, a capillary stem above it and a column standing at the reading.
Accessibility Attributes
A thermometer says everything it says by position: the height of a column against a scale. None of that is available to a screen reader, so the reading is carried by the value attributes, and everything else drawn on the stem is carried in words by aria-valuetext — the reading with its unit, whether it is off the scale, the same reading in the second unit when one is shown, the setpoint, and the highest and lowest of the max-min memory. A user who cannot see the instrument is told what a sighted user can see on it, and not less.
Readings are spoken at the precision set by precisionDigits. A raw floating point number read out to fifteen places is not a reading, it is an internal value, so the text is formatted exactly as the printed one is.
The unit is part of the reading and is shown by default: 40 is a warm day or a cool oven depending on the scale, and a number without its unit tells a screen reader user nothing they can act on.
The following ARIA attributes are used inside the Thermometer:
- role="meter" - set while the thermometer only reads. With interactive on it is role="slider". Either way aria-valuemin and aria-valuemax give the ends of the scale.
- aria-valuenow - the reading rounded as the readout shows it, and held within min and max; a reading off the scale is given in full by aria-valuetext. With no reading, aria-valuenow is removed.
- aria-valuetext - the reading with its unit, followed by "over range" or "under range" when it is past an end of the scale, the second unit when secondaryUnit is set, the setpoint when showSetpoint is on, and the highest and lowest when showExtremes is on. With no reading it is "no reading".
- aria-label - the label property, which is what is being measured; a thermometer with no label is named "Thermometer". When the reading's quality is not good, the quality is added to the name, for example "Reactor R-101, quality bad".
- quality - reflected to an attribute, so a reading that is bad, uncertain or stale is drawn differently, shown with the word BAD, UNCERTAIN or STALE under the instrument, and named as such in aria-label rather than shown as though it could be trusted.
- title - set on the setpoint and the max-min markers with their values, for the pointer.
- aria-hidden="true" - set on the drawing itself, so the scale's tick labels are not read out one at a time in place of the reading.
Keyboard Interaction
A thermometer reads. It is an indicator, it is out of the tab order, and it has no keyboard interaction until interactive is set — a read-only instrument that takes focus is a tab stop that does nothing. 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. An alarm band the reading has entered is drawn behind the column and named in the accessible text through the reading itself; a bad reading is hatched as well as coloured; the max-min markers are open outlines rather than a second shade of the liquid, so they are not mistaken for the reading. Every colour is a theme token, so a plant that needs a higher contrast sets the tokens rather than overriding the component.
Localization
All strings the Thermometer 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 Thermometer uses the following message keys:
- thermometerLabel, highest, lowest, setpointIs, alsoReads, noConversion
- overRange, underRange, overRangeFlag, underRangeFlag, noReading, noReadingFlag
- qualityUncertain, qualityBad, qualityStale, uncertainFlag, badFlag, staleFlag
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. The unit symbols — °C, °F and K — are not localized, because they are the same everywhere; the numbers follow decimalSeparator.
Additional information on WAI-ARIA for the SMART Framework can be found here.