← ClaudeAtlas

artifact-accessibilitylisted

Make charts and data apps usable by everyone - colourblind-safe and greyscale-safe encoding, contrast, keyboard operation, focus management, screen-reader structure for SVG charts, data-table fallbacks, and reduced motion. Trigger on "accessibility", "a11y", "colorblind", "screen reader", "keyboard navigation", "contrast", "ARIA", "can everyone read this", "greyscale", "prefers-reduced-motion".
Lukehle/chartroom · ★ 0 · Web & Frontend · score 70
Install: claude install-skill Lukehle/chartroom
# Artifact accessibility Two framings, both true. The compliance one: some viewers cannot perceive colour differences, cannot use a mouse, or use a screen reader. The practical one: **every accessibility fix here also makes the page work in print, in greyscale, on a projector, and on a phone** — which is where board packs actually get read. --- ## Never encode by colour alone The rule that catches the most real failures. Around 8% of men have a colour vision deficiency, and every printed deck is greyscale. | Mark | Second encoding | |---|---| | Lines | Dash pattern, and a direct end-of-line label | | Bars | Position, direct value labels, hatch/texture for a special category | | Areas | Direct labels; ordering that matches the legend | | Scatter | Shape as well as colour | | Heatmap | Lightness ramp (already ordinal) plus values in cells | | Up/down deltas | A glyph (▲▼) or the sign — colour reinforces only | **The greyscale test:** apply `filter: grayscale(1)` to the page and read it. If two series become indistinguishable, add an encoding. Do this before shipping, not after someone prints it. Prefer **blue/orange** over red/green wherever the semantics allow. It survives every common form of colour blindness. --- ## Contrast | Element | Minimum | |---|---| | Body text | 4.5:1 | | Large text (18px+, or 14px bold) | 3:1 | | **Chart marks, axis lines, focus rings, control borders** | **3:1** | | Decorative only | none, but ask why it is there | The commonly missed on