diff --git a/public/.well-known/agent-skills/index.json b/public/.well-known/agent-skills/index.json index 5926f19e..2a55089f 100644 --- a/public/.well-known/agent-skills/index.json +++ b/public/.well-known/agent-skills/index.json @@ -6,7 +6,7 @@ "type": "skill-md", "description": "Query and apply The Website Specification — a platform-agnostic specification of what a good website does. Use when the user asks what their site should have, whether something is required, how to audit a URL, what's missing for agent readiness, or anything else where you'd otherwise be guessing at web best practice. Backs answers with primary sources and ships an MCP server with search, list, fetch, checklist, and audit tools.", "url": "/.well-known/agent-skills/specification-website/SKILL.md", - "digest": "sha256:17d9594c060aeb8ee300a09956e4893609ec8f14a971c68558bd0d0a1936c3a5" + "digest": "sha256:eee0e0eed9c58b7de016b1fbcf57589d3224c0a8d64e067e008dbfe1d25523c0" } ] } diff --git a/public/.well-known/agent-skills/specification-website/SKILL.md b/public/.well-known/agent-skills/specification-website/SKILL.md index 7a0dd1c5..ef1cbaec 100644 --- a/public/.well-known/agent-skills/specification-website/SKILL.md +++ b/public/.well-known/agent-skills/specification-website/SKILL.md @@ -5,7 +5,7 @@ description: Query and apply The Website Specification — a platform-agnostic s # specification.website -The Website Specification is a single source of truth for what a good website does. Ten categories, 160 pages, every item tagged with a status. It ships in three machine-readable forms: per-page Markdown, llms.txt / llms-full.txt, and an MCP server. +The Website Specification is a single source of truth for what a good website does. Ten categories, 161 pages, every item tagged with a status. It ships in three machine-readable forms: per-page Markdown, llms.txt / llms-full.txt, and an MCP server. ## When to use this skill diff --git a/public/og-default.png b/public/og-default.png index 081fabe4..31ca8e21 100644 Binary files a/public/og-default.png and b/public/og-default.png differ diff --git a/public/og/checklist.png b/public/og/checklist.png index b02495be..3228fae6 100644 Binary files a/public/og/checklist.png and b/public/og/checklist.png differ diff --git a/public/og/spec.png b/public/og/spec.png index 1d6e2840..4b6fae5e 100644 Binary files a/public/og/spec.png and b/public/og/spec.png differ diff --git a/public/og/spec/accessibility.png b/public/og/spec/accessibility.png index cc9ef9db..f5d2b15a 100644 Binary files a/public/og/spec/accessibility.png and b/public/og/spec/accessibility.png differ diff --git a/public/og/spec/accessibility/dragging-movements.png b/public/og/spec/accessibility/dragging-movements.png new file mode 100644 index 00000000..995bcc28 Binary files /dev/null and b/public/og/spec/accessibility/dragging-movements.png differ diff --git a/src/content/changelog/2026-07-10-dragging-movements.md b/src/content/changelog/2026-07-10-dragging-movements.md new file mode 100644 index 00000000..547a97e4 --- /dev/null +++ b/src/content/changelog/2026-07-10-dragging-movements.md @@ -0,0 +1,8 @@ +--- +title: Dragging movements need a single-pointer alternative +date: "2026-07-10" +type: added +relatedSlugs: [dragging-movements, touch-target-size, keyboard-navigation] +--- + +Added a page on [dragging movements](/spec/accessibility/dragging-movements/), WCAG 2.2 Success Criterion 2.5.7. Sliders, sortable lists, drag-to-pan maps and swipe carousels each have to offer a route that a single pointer can walk without ever dragging, because a sustained, path-following press excludes people with tremor, switch users, and anyone driving the page with a head-pointer. The criterion does not ban drag and drop — it asks you to add the second route alongside it. diff --git a/src/content/spec/accessibility/dragging-movements.md b/src/content/spec/accessibility/dragging-movements.md new file mode 100644 index 00000000..ec40ca36 --- /dev/null +++ b/src/content/spec/accessibility/dragging-movements.md @@ -0,0 +1,82 @@ +--- +title: "Dragging movements" +slug: dragging-movements +category: accessibility +summary: "Anything you can drag must also work with a single pointer that never drags. Sliders, sortable lists, and drag-to-pan maps each need a click or tap alternative." +status: recommended +order: 146 +appliesTo: [all] +relatedSlugs: + [touch-target-size, keyboard-navigation, native-interactive-elements, mobile-form-inputs] +updated: "2026-07-10T00:00:00.000Z" +sources: + - title: "WCAG 2.5.7 — Dragging Movements (Level AA)" + url: "https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html" + publisher: "W3C" + - title: "WCAG 2.2 Recommendation" + url: "https://www.w3.org/TR/WCAG22/#dragging-movements" + publisher: "W3C" + - title: "WCAG 2.5.1 — Pointer Gestures (Level A)" + url: "https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html" + publisher: "W3C" + - title: "MDN — Pointer events" + url: "https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events" + publisher: "MDN" +--- + +## What it is + +**Dragging Movements** is WCAG 2.2 Success Criterion 2.5.7, at **Level AA**. A dragging movement is any operation where the pointer presses down on one point, moves along a path while held, and releases somewhere else — dragging a slider thumb, reordering a list, panning a map, swiping a carousel. + +The criterion says that all functionality using a dragging movement must also be achievable **with a single pointer that never drags**, unless dragging is essential or the behaviour belongs to the user agent rather than to you. + +Three exceptions apply. Dragging may be **essential** — a drawing canvas or a signature field is the drag. The functionality may be **determined by the user agent and not modified by the author**, which exempts native scrollbars, touch scrolling, and the scrolling a browser supplies for a CSS `overflow` container. And a **path-based gesture** that traces a specific shape is governed by SC 2.5.1 Pointer Gestures instead. + +### It does not ban drag and drop + +The wrong belief to correct is that 2.5.7 outlaws dragging. It does not. Dragging is a fine interaction and most people like it. The criterion is purely **additive**: keep the drag, and add a second path to the same outcome that a single tap or click can walk. A sortable list that offers both drag handles and "move up" / "move down" buttons passes. A list that offers only the buttons also passes — but nobody asked you to remove the handles. + +The other common confusion is with SC 2.5.1 Pointer Gestures. That criterion is about **multipoint or path-based** gestures — pinch-to-zoom, a two-finger swipe, tracing an L-shape. 2.5.7 is about the humble **single-pointer drag**. A control can fail one and pass the other, so check both. + +## Why it matters + +A drag is a sustained, precise, path-following press. It asks the user to keep contact while moving accurately, then release at exactly the right place. That combination excludes people who can point but cannot drag: + +- Users with tremor, spasticity, or limited dexterity, for whom holding a press steady through a movement is unreliable. +- Users of head-pointers, eye-tracking, or mouth-sticks, where "press and hold while moving" is slow and error-prone. +- Switch-access users, who have no continuous pointer path at all. +- Anyone on a trackpad in a moving vehicle, or operating a touchscreen one-handed. + +When the drag is the only route, these visitors are not merely inconvenienced — the feature is unreachable. If reordering your saved items or setting a price filter exists only as a drag, that function does not exist for them. + +## How to implement + +Start from the platform. `` already ships a non-dragging alternative: click anywhere on the track to jump the thumb there, and use the arrow keys once focused. A custom slider built from `
`s and `pointermove` handlers usually ships neither, which is how a passing control becomes a failing one. + +Where you own the interaction, pair every drag with a click target: + +- **Sliders and range controls.** Allow a click on the track to move the thumb. Add stepper buttons for fine adjustment where the range is wide. +- **Sortable lists.** Give each row "move up" and "move down" buttons, or a "move to…" control that opens a position picker. Keep the drag handle as well. +- **Maps and pannable canvases.** Provide directional arrow buttons and zoom `+` / `−` controls alongside drag-to-pan. +- **Carousels.** Provide previous / next buttons; do not rely on swipe alone. +- **Drop targets.** Offer a click-to-select, then click-to-place flow, or a plain file input beside the drag-and-drop zone. + +Make the alternative a real, focusable control — a `