Skip to main content
Glama
kinti

a11y-toolkit

by kinti
OverviewSchemaSourceRelated ServersDiscussionsAdmin
Python
Local

a11y-toolkit: 320px reflow check

a11y_reflow
Read-onlyIdempotent

Tests WCAG 1.4.10 reflow by loading a page at 1280px and 320px, then reports horizontal scrolling and overflowing elements. Use per template to catch fixed-width layouts.

Instructions

Reflow check at 320px — criterion 1.4.10 (AA), the check axe and Lighthouse do not automate. Loads the URL at 1280px, then at 320px, and reports real horizontal scroll + the overflowing elements. Method note: browser zoom RE-LAYS OUT at 320 CSS px (that is the standard's own equivalence: 1280 @ 400% zoom = 320px), so the correct measurement is a 320px viewport. Requires local Playwright. — Scope: 320px reflow only (1.4.10); for the full rendered pass use a11y_audit_dom. Returns JSON: {url, viewport, horizontal_scroll, offenders [{selector, width}]}. Run once per template, not per page: fixed-width layouts are a property of the template.

Input Schema

NameRequiredDescriptionDefault
urlYesPage URL to test at 320px (http/https or file://)
langNoOutput language (default en)
browserNoBrowser engine (auto = detect the first available)
timeoutNoPage load timeout in seconds (default 45)
auth_stateNoPath to a Playwright storage_state JSON (exported session) to test behind login

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed1 schema field changedv5.6.0
    • removedInput schema / browser
      Removed value: -{
-  "description": "Browser engine (auto = detect the first available)",
-  "enum": [
-    "auto",
-    "chromium",
-    "firefox",
-    "webkit",
-    "chrome",
-    "msedge"
-  ],
-  "type": "string"
-}
  2. Changed1 schema field changedv5.5.0
    • addedInput schema / properties / browser
      Added value: +{
+  "description": "Browser engine (auto = detect the first available)",
+  "enum": [
+    "auto",
+    "chromium",
+    "firefox",
+    "webkit",
+    "chrome",
+    "msedge"
+  ],
+  "type": "string"
+}
  3. Changed5 schema fields changedv4.0.0
    • addedInput schema / browser
      Added value: +{
+  "description": "Browser engine (auto = detect the first available)",
+  "enum": [
+    "auto",
+    "chromium",
+    "firefox",
+    "webkit",
+    "chrome",
+    "msedge"
+  ],
+  "type": "string"
+}
    • addedInput schema / properties / auth_state
      Added value: +{
+  "description": "Path to a Playwright storage_state JSON (exported session) to test behind login",
+  "type": "string"
+}
    • addedInput schema / properties / lang / description
      Added value: +"Output language (default en)"
    • addedInput schema / properties / timeout / description
      Added value: +"Page load timeout in seconds (default 45)"
    • addedInput schema / properties / url / description
      Added value: +"Page URL to test at 320px (http/https or file://)"
  4. Addedv3.3.0

TDQS

A4.6/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnly/idempotent/non-destructive, and the description adds substantial context beyond them: the two-pass measurement method (1280px then 320px), the rationale that zoom re-layout is equivalent to a 320px viewport, the local Playwright dependency, and the exact JSON return shape. Nothing about the tool's runtime behavior is left to inference.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the check name and criterion, then method, scope, and return shape in a tight sequence. It is on the long side and dense with em-dash asides, but each sentence carries distinct operational value (dependency, method rationale, exclusion, cardinality rule).

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema, the description compensates by enumerating the return object ({url, viewport, horizontal_scroll, offenders[{selector, width}]}). Combined with the method note, scope boundary, and environment requirement, an agent has everything needed to call it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so every parameter (url, lang, browser, timeout, auth_state) is already documented structurally; the description only reinforces the 320px viewport semantics of url. It adds no syntax, format, or interaction detail beyond the schema, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ('Reflow check at 320px') tied to a named WCAG criterion (1.4.10, AA), and explicitly claims the niche axe/Lighthouse leave uncovered. It routes away from a sibling by name ('for the full rendered pass use a11y_audit_dom'), so an agent can distinguish it without opening any schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives explicit when-to-use (320px reflow / 1.4.10), an explicit alternative with its selecting condition (a11y_audit_dom for the full rendered pass), and a cardinality rule ('run once per template, not per page'). The prerequisite ('requires local Playwright') is also stated up front.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools