Intensity Graph <smart-intensity-graph>

Accessibility Attributes

The IntensityGraph is drawn on a canvas, which is not accessible to a screen reader, and it carries its information as colour, which is not available to one either. What the canvas shows is therefore also available as text: the plot area carries a summary with the shape of the matrix, the z range of the colour ramp and where the highest value is, and the cursor legend reads each cursor's x, y and the value of the cell under it. Moving a cursor with the keyboard updates the legend, so a value is read from the display by its coordinates.

The following ARIA attributes are used inside the IntensityGraph:

• 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 cursor legend outside it stays readable.
• aria-label - names the plot area with its title, the shape of the matrix, the z range and the position of the highest value, for example "Intensity graph ST-2112 run-up, 257 rows by 97 columns, z from -60 dB to 0 dB, highest 0.01 dB at x 21 s y 38.85 Hz". It is rewritten on every change of data or cursor.
• role="group" with an aria-label - set on the cursor legend, so it is announced as one named group.
• aria-disabled - indicates that the graph is disabled.

Keyboard Interaction

The plot area is one tab stop.

On the plot area:

• The arrow keys move the active cursor by one cell; with Shift, by ten.
• N makes the next cursor the active one.

With a pointer: drag a cursor to move it, or click the plot to move the active cursor there.

Localization

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

• chartLabel, chartSummary, noData
• legendLabel, plotHidden
• cursorsLabel, cursorRow, cursorValue, cursorDelta

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.