8 Accessibility✎
Reading a graph without colour, contrast in every theme, targets a finger can hit, screen readers, and motion.
Normative · Levels 3 and 4Draft 0.1Pending review
§8.1 and §8.2 hold every renderer (level 3); the rest hold every editor (level 4). Where this page and another disagree, this one wins.
8.1 Reading without colour
A renderer MUST NOT rely on colour alone to tell any two things on the canvas apart.
Every colour has a second cue:
- A node's category: the glyph in its tab (§5.4).
- A pin's kind: flow pins are triangles, and a data pin's shape is its family (§5.5).
- A pin's type: the chip on an output, and the full name on request (§5.5).
- A step and a value: their shapes (§5.3).
- An error and a warning: the error's count is a number in an oval, the warning's mark a single sign in a circle, and the note says which it is in words.
- A selected node and the anchor: the ring's weight (§5.8).
8.2 Contrast in every theme
A theme MUST be refused if any of these is lower than its minimum, using the WCAG 2 contrast ratio:
| Colour | Against | At least |
|---|---|---|
| Body text | The window, and panels | 4.5 : 1 |
| Secondary text | The window, and panels | 3 : 1 |
| Faint text | The window, and panels | 2 : 1 |
| A node's body | The canvas | 1.12 : 1 |
| Code colours | A text field | 3 : 1, and 2 : 1 for comments |
These are the checks validateTheme in core/theme.ts makes of every theme Roswaal ships or loads.
A theme MUST say whether it is dark, and the claim MUST match its window colour, because the overlays worked out from it (§5.7) depend on it.
Not yet checked
8.3 Hit targets
Starting a wire takes aim, and a pin's target MAY be little more than the pin, so the rest of the node can still be grabbed. Roswaal's is the 16-unit slot plus 3 units around it.
Landing a wire takes no aim: while a wire is in flight every pin's target MUST grow. Roswaal's grows to 9 units around the slot, 34 across.
On a touch screen, every control SHOULD be at least 44 by 44 CSS pixels at the zoom the graph is shown at, as WCAG 2.5.5 asks, and where a control cannot be, the editor SHOULD offer a way to zoom to one that is.
On a touch screen Roswaal's toolbar buttons grow to 38 pixels, and its pins do not grow at all.
8.4 Keyboard and screen readers
Every action of chapter 4 MUST be possible from the keyboard alone: moving between nodes and between a node's pins, making and removing a wire, opening the node list and placing a node, moving a node, and editing its values.
Nothing on Roswaal's canvas is reached by the keyboard yet.
A node MUST have an accessible name: its title, its kind, and its problems. A pin MUST have one: its name, its side, its type, and what it is wired to.
Roswaal's nodes and pins have no accessible names; its menus, dialogs and panels have roles and labels.
Changes a person makes SHOULD be announced: a wire made, a node placed or deleted, a problem found or fixed.
Roswaal announces only compiling and its toasts.
Focus MUST be visible on the canvas, on a node and on a pin.
Roswaal draws no focus ring on its canvas.
Where Roswaal falls short
8.5 Motion
Where the system asks for reduced motion, an editor MUST drop animation that is not needed to understand a change, such as controls fading in on hover.
An editor MUST NOT move the view without being asked, except to show something the person asked to see.
Not reviewed yet