What is frontend-a11y?

A checklist for making user interfaces accessible to people using keyboards, screen readers, or reduced-motion settings. It follows WCAG 2.2 AA, a commonly used accessibility standard.

Use it to add keyboard support, label controls, improve dialogs and menus, support assistive technology, check contrast, and verify accessibility fixes.

It helps find barriers such as missing labels, poor keyboard focus, low colour contrast, and overlays that do not manage focus correctly.

frontend-a11y — Skill for Claude Code and Codex by tmj-90/gaffer

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add tmj-90/gaffer --skill frontend-a11y

Clone the repo

git clone --depth 1 https://github.com/tmj-90/gaffer

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/tmj-90/gaffer/frontend-a11y/github.svg)](https://agentmods.dev/skills/tmj-90/gaffer/frontend-a11y)

Your own site

<a href="https://agentmods.dev/skills/tmj-90/gaffer/frontend-a11y"><img src="https://agentmods.dev/badge/skills/tmj-90/gaffer/frontend-a11y/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/tmj-90/gaffer/frontend-a11y"><img src="https://agentmods.dev/badge/skills/tmj-90/gaffer/frontend-a11y.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 83 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,878 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00083	$0.01878
Opus 5.5	$0.00033	$0.00751
Sonnet 5.5	$0.00017	$0.00376
Haiku 4.5	$0.00008	$0.00188

Measured 1mo ago against content hash 6ee0e3969543, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-a11y scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

runner/skills/frontend-a11y/SKILL.md · 107 lines

How it starts

The opening of the file, as written. The whole thing — 107 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Make the UI accessible

Bring the UI the ticket touches to WCAG 2.2 Level AA and prove it with automated checks plus a keyboard walk. Inaccessible UI is broken UI: a control a keyboard cannot reach does not work for that user. The reviewer's accessibility-review lens checks the same list below, so build to it.

Steps

Scope and conventions. List every control, form, dialog, menu, live update and media element the change adds or alters. Call search_lore for the repo's a11y helpers (focus-trap, visually-hidden class, announcer) and reuse them.
Native element first. button for actions, a href for navigation, label + input, fieldset/legend for groups, dialog (opened with showModal()) for modals, details/summary for disclosure, landmarks (header, nav, main, footer), one h1 and no skipped heading levels. ARIA only when no native element exists — and then follow the matching WAI-ARIA Authoring Practices (APG) pattern exactly (roles, states, keys). A div onClick is a defect. Do not use role="menu" for site navigation; APG menus are for application-style menus.
Keyboard (WCAG 2.1.1, 2.1.2, 2.4.3, 2.4.7). Everything operable with Tab, Shift+Tab, Enter, Space, Escape, and arrows where the APG pattern says so (tabs, listbox, radio group, grid use a roving tabindex or aria-activedescendant). Focus order follows reading order; no positive tabindex; no trap outside a modal.
Focus visible and not hidden (2.4.7, 2.4.11 new in 2.2). A :focus-visible style with at least 3:1 contrast against adjacent colours (1.4.11); never outline: none without a replacement. A sticky header, cookie banner or toast must not completely cover the focused element — add scroll-padding-top or move the overlay.
Names, roles, states (1.1.1, 1.3.1, 4.1.2). Every control has an accessible name that contains its visible label (2.5.3); icon-only buttons get aria-label or visually hidden text; decorative images alt=""; toggles expose aria-pressed or aria-expanded; errors link via aria-describedby and set aria-invalid.
Dynamic changes (4.1.3). Status messages (saved, 3 results, error) go to a live region that exists in the DOM before the text is inserted (role="status" polite, role="alert" only for urgent). Route changes in an SPA move focus to the new h1 or announce the page title.
Overlays. On open move focus inside; keep it inside while modal (native dialog or inert on the background); Escape closes; on close return focus to the trigger.
Pointer and target size (2.5.7, 2.5.8 new in 2.2). Targets at least 24×24 CSS px or spaced so a 24px circle does not overlap a neighbour (44×44 is the comfortable touch goal). Any drag interaction (reorder, slider, map pan) has a single-pointer alternative (buttons, click-to-place).
Visual (1.4.1, 1.4.3, 1.4.11, 1.4.10, 1.4.12). Text contrast 4.5:1 (3:1 at ≥ 24px or ≥ 18.66px bold); UI components and graphics 3:1; colour never the only signal; content reflows at 320 CSS px wide and survives WCAG text-spacing overrides.
Motion (2.2.2; 2.3.3 is AAA but cheap). Wrap non-essential animation in @media (prefers-reduced-motion: no-preference); anything that moves for more than 5s can be paused.
Forms and auth (3.3.1, 3.3.3, 3.3.7, 3.3.8 new in 2.2). Errors identified in text with a fix suggestion; do not make users re-enter data they already gave in the flow; allow paste and password managers in credential fields, no puzzle-only CAPTCHA.
Verify. Run the repo's checks, then do the manual pass (below). Evidence each AC with the record-evidence skill (test_output for the axe, component and keyboard tests), then stop.

Read the full file on GitHub · 107 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

1mo ago Changed · +63 lines · +11 tokens per session 6ee0e3969543
2mo ago First seen · 44 lines · 72 tokens per session scan A faaf2ebad622

Subscribe to this mod's changes

frontend-a11y is a skill published in the GitHub repository tmj-90/gaffer (2 stars, last pushed today), licensed Apache-2.0. It adds 83 tokens to every session and 1,878 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Autonomous Agents Design and UX ai-agents ai-coding-assistant ai-governance anthropic claude

visual-companion

Browser-based visual companion for showing mockups, diagrams, comparisons, and interactive options. Use when the user would understand something better by seeing it than reading it.

dork-labs/dorkos · 36 tokens

auditing-ui

Runs a lens-based UI/UX audit of the client and turns its findings into tracked, fenced work items, and measures the rendered page for a design review. Use when auditing the interface for quality gaps, running or scoping an audit (full, one lens, one surface, or a diff), driving the real-browser leg of an audit…

dork-labs/dorkos · 115 tokens

maintaining-dev-playground

Keeps the Dev Playground current with the application. Use when editing UI components in apps/client/src/ — assesses playground candidacy, checks existing playground coverage, and guides adding or updating showcases. Also use when directly editing files in apps/client/src/dev/, building new widgets or features, or…

dork-labs/dorkos · 95 tokens

frontend-a11y