Waveform Graph <smart-waveform-graph>

Accessibility Attributes

The WaveformGraph is drawn on a canvas, which is not accessible to a screen reader. What the canvas shows is therefore also available as text: the plot legend names every plot with its unit and whether it is shown, the cursor legend reads every cursor's position and value on each plot and the difference between the first two, and the plot area carries a summary of what it shows. Moving a cursor with the keyboard updates the cursor legend, so a reading is taken without seeing the line.

The following ARIA attributes are used inside the WaveformGraph:

• 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 legends outside it stay operable.
• aria-label - names the plot area with its title, the number of plots and the x range shown, for example "Waveform graph Rig 4, capture 1182, 4 plots, x from 0 s to 199.99 ms". It is rewritten on every change of data, view or cursor.
• role="group" with an aria-label - set on the plot legend and on the cursor legend, so each is announced as one named group.
• aria-pressed - set on each plot's legend button, true while the plot is shown, and on the auto scale button of the palette.
• role="toolbar" with an aria-label - set on the tool palette; each tool is a labelled button.
• aria-disabled - indicates that the graph is disabled.

Keyboard Interaction

The plot area, the plot legend and the tool palette are each one tab stop.

On the plot area:

• Left and Right arrow move the active cursor by one pixel of the view; with Shift, by ten. With no cursor, they pan the view.
• Home and End move the active cursor to the ends of the view.
• N makes the next cursor the active one.
• + and - zoom in and out about the centre of the view; 0 fits the whole record.

In the plot legend and the tool palette, the arrow keys move between items and Enter or Space activates one: a legend item hides or shows its plot, a tool zooms, fits, restores auto scale or raises the CSV export.

With a pointer: drag a cursor to move it, click the plot to move the active cursor there, drag the plot to pan, use the wheel to zoom about the pointer (with Shift, to pan), hold Shift and drag to zoom into a box, and double-click to fit.

Localization

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

• chartLabel, chartSummary, noData
• legendLabel, plotHidden
• cursorsLabel, cursorRow, cursorValue, cursorDelta
• paletteLabel, zoomIn, zoomOut, fit, autoScaleOn, autoScaleOff, exportCsv, zoomed

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.