Comparison Chart <smart-comparison-chart>

Accessibility Attributes

The ComparisonChart is never only a picture. The drawing is hidden from assistive technology, and every figure it shows is also in a table beside it - off the screen, not out of the page - with a caption, a row per item, its value, its share of the total and, on a Pareto chart, the running share. A bar past the limit says so in words in its row, since a colour is not something a screen reader reports. The chart as a whole is named by one sentence: how many items, the highest and its value, the total, and how many are past the limit.

The following ARIA attributes are used inside the ComparisonChart:

• role="figure" - set on the container, with an aria-label that is the chart's own summary - "Energy by line: 5 items, highest Line 2 at 418 kWh, total 1,267 kWh, 1 over the limit". The same sentence is returned by describe().
• aria-hidden="true" - set on the drawing, so a reader meets the figures once, in the table, rather than as a list of unlabelled shapes.
• caption, scope="col" and scope="row" - the table's native semantics: its caption is the chart's label, each row header an item's name.
• aria-disabled - indicates that the chart is disabled.

Keyboard Interaction

The ComparisonChart takes no keyboard focus. There is nothing on it to operate: it shows values, and a reader moves through its table with the reader's own table commands.

Localization

All strings the ComparisonChart 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.

Numbers are written in the language locale names, by the browser, so 1,267.5 reads 1.267,5 in German without anybody translating it.

The ComparisonChart uses the following message keys:

• chartLabel, noData, noValue, total, other
• share, over, limitLine
• columnItem, columnValue, columnShare, columnCumulative
• summary, summaryOver

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.