Octave Bands <smart-octave-bands>

Accessibility Attributes

The OctaveBands is drawn on a canvas, which is not accessible to a screen reader. Everything drawn on the canvas is therefore also available as text: the header carries the band width, the weighting and the averaging, the overall level is a status line that is announced when it changes, the number of bands above the limit is written out, and a list under the plot gives the level of every band with its centre frequency. The plot's label names the overall level and the highest band.

The following ARIA attributes are used inside the OctaveBands:

• role="img" - set on the plot area that holds the canvas. A canvas has no readable structure, so the plot needs a text alternative; the legend and the readout outside it stay operable.
• aria-label - names the analyser with its title, the bands it shows, the overall level, the highest band and the bands above the limit, for example "Octave band analyser Compressor room, position 3, 29 third-octave bands from 25 Hz to 16k Hz, overall 83.3 dB SPL, highest 82.4 dB SPL at 1.25k Hz, 1 bands above the limit". It is rewritten after every block.
• role="status" - set on the overall level in the header, so a change of level is announced without moving focus.
• role="list" - set on the band readout, with an aria-label, so the levels are announced as one named list. Each entry reads the centre frequency and the level, for example "1.25k Hz 82.4 dB SPL". The list is visually hidden; the bars carry the same values.
• aria-disabled - indicates that the chart is disabled.

Keyboard Interaction

The OctaveBands is a display. It takes no keyboard focus and has nothing to operate: weighting, averaging and resolution are properties set by the application, and the application's own controls for them carry the keyboard interaction. The band readout is real text and is reachable by a screen reader's browse mode. Clicking a band raises an event with its level.

Localization

All strings the OctaveBands 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 OctaveBands uses the following message keys:

• chartLabel, chartSummary, exceededSummary, resolutionOctave, resolutionThird
• noData, noModule, paused
• header, overall, exceeded
• averagingNone, averagingFast, averagingSlow
• bandsLabel, band

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.