Accessibility

Usable without a mouse, without colour, without hurry

We target WCAG 2.2 level AA across the product and publish where we fall short. Three known issues are open right now, all in the chart editor.

Every action has a keyboard path

Including drag-and-drop, which has an explicit move dialog behind the same shortcut.

Named, announced, in order

Landmarks, live regions for async updates, and no icon-only control without a label.

Contrast checked in CI

4.5:1 for text and 3:1 for interface elements, enforced on every pull request.

Motion is optional

Reduced-motion preferences remove transitions and auto-advancing carousels entirely.

Captions and transcripts

Every tutorial video ships with human-checked captions and a full transcript.

Text scales to 200%

Layouts reflow rather than clip, and nothing depends on a fixed pixel height.

Hit a barrier? Tell us and we will fix it.

Write to access@northwind.dev — we acknowledge within two working days and give a target date within five.

Tested with NVDA, JAWS, VoiceOver, TalkBack and Dragon.

">

The prompt

Create an accessibility section with Tailwind CSS. Open with a small "Accessibility" label, a heading and a paragraph stating the conformance target plainly and admitting where gaps remain. Then a two-column layout: the wide column holds six commitment blocks in a two-column grid, each with a glyph tile, a bold heading and two lines — keyboard operability, screen reader labelling, contrast ratios, motion preferences, captioning, and text resizing to two hundred percent. The narrow column is a bordered card summarising the conformance report: a WCAG level pill, an audit date, the auditing firm, a link to the VPAT and a small "Known issues: 3" line linking to the tracker. Under both, a bordered strip on neutral-50 inviting reports of barriers with an email link and a promise about the response time, plus a line about the assistive technologies regularly tested.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .