Table view and texture

Every chart gets a table twin; texture is opt-in for accessibility.

From dataviz (references/marks-and-anatomy.md, palette.md).

A table twin for every chart

Find Q3 Travel with the mouse, then keyboard only.

Chart onlyBad

values: hover only

Table twin

Good

view: chart

<div role="group" aria-label="View">
  <button aria-pressed="true">Chart</button>
  <button aria-pressed="false">Table</button>
</div>
<svg role="img" aria-label="Spend by quarter">…</svg>
<table hidden><caption>Spend by quarter ($k)</caption>…</table>

Texture survives grayscale

Set Achromatopsia, then turn Texture on.

0° / 90° hatchingBad

rotate(0) · rotate(90) · both

45° / 135° tonalGood

rotate(45) · rotate(-45) · both, ink = darker step

.tex { opacity: 0; }
:root[data-a11y-texture] .tex { opacity: 1; }
@media print, (forced-colors: active) { .tex { opacity: 1; } }

Ordered texture for values

Turn on Achromatopsia and Texture, then drag Shift.

Shift +0 pts

Cycles by columnBad

angle = column

Angle and densityGood

/ over · \ under · none = neutral

const tex = bin === 0 ? null : {
  angle: v > 0 ? 45 : -45,
  gap: [0, 7, 5, 3.5][bin],
};

Why it matters

The table is the accessible equivalent and lets sub-3:1 fills ship. Texture carries identity where hue fails, and stays off unless asked for.

Pros

Every value reachable without a tooltip.
Sub-3:1 slots become legal.
Survives grayscale print.

Cons

Two angles only; past three series, facet instead.
Patterns and forced-colors styles add surface.
Never ship texture as a style choice.