Instrument readouts and controls
Bar Graph <smart-bar-graph>
BarGraph is a segmented level meter, such as the column of lit blocks on an audio console or a vibration monitor.
Accessibility Attributes
The BarGraph is a segmented level meter. It is read-only by default and is not in the tab order, so that a meter that cannot be operated does not become an empty tab stop. Setting interactive turns it into a control, which is then focusable and keyboard-operable.
The following ARIA attributes are used inside the BarGraph:
- role="slider" - inherited from Tank.
- aria-label - re-set after Tank's render(), which would otherwise name it "Tank".
- aria-valuenow / aria-valuemin / aria-valuemax - the current value and the ends of the scale.
- aria-valuetext - the value with its unit, and, when peak hold is on, the held peak alongside it, formatted to the same precision. The peak is information a sighted operator gets from a marker on the bar, so it has to be in the text alternative or it is lost.
- tabindex - 0 only while interactive is set; -1 otherwise.
- aria-hidden="true" - set on the segments and the readout, which carry nothing the value attributes do not.
- Alarm bands as colour and position - a lit segment inside an alarm band takes that band's colour, but the band is also a position on a fixed scale, so severity is not carried by colour alone.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the BarGraph:
| Key | Action |
|---|---|
| Arrow Up/Right | Increases the value by interval. Only when interactive is set. Right is reversed under rightToLeft. |
| Arrow Down/Left | Decreases it by the same step. |
| Home / End | Jumps to the minimum / maximum. |
A read-only meter ignores the keyboard entirely and is not focusable, which is deliberate: it has no state an operator can change.
Localization
All strings the BarGraph 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 BarGraph uses the following message keys:
- barGraphLabel
- peak
Additional information on WAI-ARIA for the SMART Framework can be found here.