Digital Waveform <smart-digital-waveform>

Accessibility Attributes

The DigitalWaveform 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 area carries a summary with the number of lines and buses and the time range shown, and the cursor legend reads the level of every line and the word of every bus at each cursor, and the time between the first two cursors. Moving a cursor with the keyboard updates the legend, so a state is read from the trace without seeing the line.

The following ARIA attributes are used inside the DigitalWaveform:

• 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 number of lines and buses and the time range shown, for example "Digital waveform SPI capture, 12 lines and 1 buses, from 0 s to 3.99 µs". It is rewritten on every change of data, view 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:

• 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.

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 DigitalWaveform 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 DigitalWaveform uses the following message keys:

• chartLabel, chartSummary, noData, zoomed
• high, low, unknown
• 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.