Scope and basis

Product: Smart.Industrial, the 54 components shipped in smart.industrial.js and styled by smart.industrial-elements.css, together with the ISA-101 light and dark themes.

Standard: WCAG 2.2, Level AA. Report format: modelled on a VPAT: each criterion listed is marked Supports, Partially supports, Does not support or Not applicable, with the reason given. It is not a complete VPAT: the summary lists 13 of the Level A and AA criteria, and the criteria that have not been evaluated are named under Known limitations. WCAG 2.x Level AA is the technical basis of EN 301 549 (clause 9, web) and of the revised Section 508 standards, so the criteria below map directly onto both; the report does not evaluate the non-web clauses of either.

Basis of evaluation. The report is based on measurement. Contrast was computed from the resolved colours in both themes, with translucent foregrounds blended against the actual background. Focus indicators were measured by comparing screenshots taken with and without focus rather than by reading the stylesheets, because a rule that looks correct can be overridden by a z-index or an outline: none elsewhere; two components in the suite were affected by this. Keyboard operation was tested with synthesised key events against each component. The behavioural test suite contains more than 1,300 specs for the Industrial components and modules.

Scope of the report. The report covers the components. It cannot cover an application built with them: page structure, headings, landmarks, page titles, language declaration, focus order across a whole screen and the accessible names chosen by the application are all part of the application, and several Level A criteria can only be met there. These are listed under Application responsibilities.

Summary

CriterionLevelConformanceBasis
1.1.1 Non-text ContentAPartially supports Every component exposes a text alternative through its messages pack. The mimic diagram is the exception see Known limitations.
1.3.1 Info and RelationshipsASupports Tabular components render HTML tables (the alarm grid and the sequence editor with the grid role of the Table they are built on); the annunciator, mimic and bit field expose composite roles; the faceplate exposes meter and radiogroup.
1.4.1 Use of ColourASupports State is never carried by colour alone. Alarm priority, tile state, trend direction and reading quality are each present as a word in the accessible name. The status tile spells out the trend direction because an arrow glyph read aloud conveys nothing.
1.4.3 Contrast (Minimum)AASupports Measured across both themes. Worst observed body text 4.65:1 on the light theme and 5.84:1 on the dark, against a 4.5:1 floor. Severity colours are read from separate -text tokens because several fill colours measure below 4.5:1 as text (down to 1.75:1 for the light theme's advisory yellow on white).
1.4.11 Non-text ContrastAAPartially supports Focus indicators are a two-tone ring, a solid core and a contrasting halo, so they clear 3:1 against both the near-white panel and the darker canvas an operator screen uses. A single-colour ring passes on one and fails on the other. The light theme's advisory fill measures 1.75:1 against the white panel (the warning fill 3.1:1); see Known limitations.
2.1.1 KeyboardASupports Every interactive component is fully operable from the keyboard. Composite widgets use a roving tabindex: one tab stop in, arrows within.
2.1.2 No Keyboard TrapASupports No component captures focus. The terminal's input releases on Tab.
2.4.3 Focus OrderAPartially supports Within a component, order follows the visual order. Across a screen it is the application's DOM order. See Host responsibilities.
2.4.7 Focus VisibleAASupports Measured, not assumed: 72 distinct tab stops across the nine Industrial screens and three templates, every one showing a visible indicator. See Known limitations for the default theme.
2.4.11 Focus Not Obscured (Minimum)AASupports Focus rings are drawn inside the component where an outward ring would be clipped by a scroll container: table bodies and the mimic canvas use an inset ring for this reason. A mimic symbol draws its ring 2 px outside the symbol.
3.3.2 Labels or InstructionsASupports Every control carries a programmatic label; every label is in a messages pack and therefore translatable.
4.1.2 Name, Role, ValueASupports Roles are chosen to match behaviour rather than appearance. A faceplate's process value is a meter and never a slider, because it is a measurement and not something anyone can set.
4.1.3 Status MessagesAASupports Most announcements go through one shared live region rather than one per component; the alarm banner, the numeric keypad, the shift log and the site map also have a polite live region of their own. Announcing is off by default on the status tile and rate limited on the terminal: thirty tiles or a thousand log lines a second each announcing themselves is not an accessible screen but an unusable one.

Known limitations

The following are the places where the product does not meet the standard, or meets it only with support from the application.

  • The mimic diagram has no complete text equivalent (1.1.1, partial). Each symbol can be reached, is named and can be operated: the canvas is one tab stop, the arrow keys move between symbols, and each symbol announces its tag, type and state. The topology is not conveyed: a screen reader user learns what equipment exists and its state, but not what is connected to what. An application that needs the topology to be accessible should render the connection list as text next to the diagram.
  • The default theme has no focus indicator on three standard controls. Measured: focusing smart-button, smart-slider or smart-gauge with the keyboard under the default theme changes nothing on the screen. smart-button has no :focus rule; smart-slider scales a halo that is behind opaque content at z-index: -1; smart-gauge sets outline: none and compensates with a rule for a class that is not in the rendered DOM. The Industrial themes correct this, and the claim under 2.4.7 above applies to them. Under the default theme these three controls do not support 2.4.7.
  • The alarm grid and the sequence editor rely on the application for row semantics beyond the state. Rows can be reached and operated by keyboard, and the state of each row is exposed. An application that adds its own row markup must do so through the _rowRendered hook rather than by modifying the DOM after rendering, because rows are recycled.
  • Two suite components used by the screens report automated findings. smart-gauge contains elements with a negative tabindex inside its slider role (axe: nested-interactive), and smart-tree exposes its scrollbar as a child of the tree role (axe: aria-required-children). Both are in the Smart UI suite rather than in this line; the screens that use them are operable by keyboard, and the findings are recorded here until the suite components are changed.
  • One fill of the light theme is below 3:1 against the panel (1.4.11, partial). The advisory yellow (#e8c033) measures 1.75:1 against the white panel; the warning orange (#d57d14) measures 3.1:1. The advisory range band of a gauge or a tank is drawn in the yellow, so on the light theme that band is not distinguishable by contrast alone. A yellow dark enough for 3:1 reads as olive, too close to the warning orange, so the advisory fill is not darkened. The critical fill measures 5.6:1, and on the dark theme every alarm fill clears 3:1 (critical 3.9:1, warning 7.0:1, advisory 10.1:1).
  • Not evaluated: 1.2.x (time-based media; none in the components). 1.4.10 Reflow and 1.4.12 Text Spacing have not been measured at 320 CSS pixels and 200% zoom for every component, so no claim is made. The 2.5.x pointer criteria have not been evaluated for touch. The criteria that are neither in the summary nor among the application responsibilities below have not been evaluated either, among them several that the components touch: 2.2.1 Timing Adjustable (the e-signature's session timeout and automatic close, the faceplate's pending timeout), 2.2.2 Pause, Stop, Hide and 2.3.1 Three Flashes or Below Threshold (the blinking alarm banner, annunciator and stack light), 2.5.7 Dragging Movements (the knob, the trend, the site map and the mimic in edit mode), 2.5.8 Target Size (Minimum), 3.3.1 Error Identification (the numeric keypad) and 3.3.8 Accessible Authentication (Minimum) (the e-signature's password).

Application responsibilities

The following criteria cannot be met by a component library. An application built with Smart.Industrial has to meet them itself:

  • 1.3.1, 2.4.1, 2.4.6: page structure, landmarks, headings and a bypass mechanism.
  • 2.4.2, 3.1.1, page title and the page's language.
  • 2.4.3: the focus order between components, which follows the DOM order.
  • 3.2.x: consistent navigation and identification across screens.
  • Accessible names: a component names itself from the data it is given. A faceplate without a tag has no useful name, and the library cannot supply one.

The three page templates in demos/page-templates/ show how to meet these criteria: landmarks, a skip link, a page title that moves focus to the heading on navigation, and a two-tone focus ring throughout.

Reproducing the measurements

Every figure in this report can be reproduced.

  • Contrast: resolve the computed colour of each text node and the first opaque background behind it, then compute the WCAG ratio. Translucent foregrounds must be blended first.
  • Focus indicators: take a screenshot of each element focused and unfocused and compare the decoded pixels. Comparing the PNG bytes is not the same as comparing pixels, and restoring focus with element.focus() does not reliably trigger :focus-visible, so later stops in such a walk are reported without an indicator.
  • Keyboard: drive the component with synthesised key events and check the resulting state, rather than calling the public API.
  • Behavioural suite: over 1,400 specs, run with karma against headless Chrome.

Per-component details are on the accessibility page of each component, linked from the component's documentation page.