Trends and signals

Control Chart <smart-control-chart>

ControlChart is a Shewhart control chart for statistical process control.

Accessibility Attributes

The ControlChart 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 chart type, the centre line, the limits and the in-control status; the violation list names every point that violates a rule and the rules it violates; and the capability readout contains Cp and Cpk. The marks on the canvas show the same information graphically.

The following ARIA attributes are used inside the ControlChart:

  • 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 chart with its type, its label, how many points it holds, its centre and limits, and whether it is in control - "X-bar and R chart. Shaft diameter, 25 points, centre 10.001, limits 9.986 to 10.015, in control". It is rewritten whenever the data, the limits or the rules change.
  • role="list" - set on the violation list, with an aria-label, so the offending points are announced as one named list. Each entry reads "Point 23: 9 in a row on one side" - the rule name, never a rule number, because the numbering collides between sources and an operator told "rule 2" learns nothing.
  • aria-disabled - indicates that the chart is disabled.

Keyboard Interaction

The ControlChart is a display. It takes no keyboard focus and has nothing to operate: the limits, rules and data are properties set by the application, and the application's own controls for them, a rule selector, a freeze button, carry the keyboard interaction. Where the violation list is longer than its box it scrolls, and is reachable by a screen reader's browse mode.

Localization

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

  • chartLabel, chartSummary
  • inControl, outOfControl, noData, noModule
  • center, ucl, lcl, usl, lsl, target, sigma, subgroup, baseline, held
  • capability, capabilityOneSided
  • violationsLabel, point, secondaryPoint
  • type-xbar-r, type-xbar-s, type-i-mr, type-p, type-np, type-c, type-u
  • secondary-r, secondary-s, secondary-mr
  • one key per rule name: beyond-3-sigma, nine-one-side, six-trending, fourteen-alternating, two-of-three-beyond-2-sigma, four-of-five-beyond-1-sigma, fifteen-within-1-sigma, eight-beyond-1-sigma, eight-one-side, beyond-limits

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.