Trends and signals

Spectrum <smart-spectrum>

Spectrum is a spectrum analyzer display.

Accessibility Attributes

The Spectrum 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 contains the sample rate, the transform size, the bin width, the window and the averaging state, and the readout lists every marked peak with its frequency and level, and the THD value. The markers on the canvas show the same information graphically.

The following ARIA attributes are used inside the Spectrum:

  • 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 analyzer with its channel, the span it shows, its resolution and its strongest component - "Spectrum. Bearing DE, radial, 5 Hz to 5.12 kHz, 4097 bins of 1.25 Hz, strongest 25 Hz at -26.1 dBg". It is rewritten after every block.
  • role="list" - set on the peak list, with an aria-label, so the marked peaks are announced as one named list. Each entry reads "1 996.1 Hz -6.6 dBV" - the rank, the frequency in engineering notation and the level with its unit.
  • aria-disabled - indicates that the chart is disabled.

Keyboard Interaction

The Spectrum is a display. It takes no keyboard focus and has nothing to operate: averaging, window, span and hold are properties set by the application, and the application's own controls for them carry the keyboard interaction. The readout is real text and is reachable by a screen reader's browse mode.

Localization

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

  • chartLabel, chartSummary
  • noSignal, noModule, paused
  • header, averaged, peakHold
  • peaksLabel, peak, thd
  • scaling-amplitude, scaling-power, scaling-density

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.