frontend-a11y

frontend-a11y is a skill for Claude Code, Codex from tmj-90/gaffer. It costs 72 tokens per session (578 once invoked), scanned A, original, Apache-2.0.

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.

In plain words
What is it for?
Use it to add keyboard support, label controls, improve dialogs and menus, support assistive technology, check contrast, and verify accessibility fixes.
Why use it?
It helps find barriers such as missing labels, poor keyboard focus, low colour contrast, and overlays that do not manage focus correctly.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

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

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/tmj-90/gaffer/frontend-a11y
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.

agentmods badge for frontend-a11y

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.

agentmods 80×15 button for frontend-a11y

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 72 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 578 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00072 $0.00578
Opus 5 $0.00036 $0.00289
Sonnet 5 $0.00014 $0.00116
Haiku 4.5 $0.00007 $0.00058

Measured 8d ago against content hash faaf2ebad622, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, 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 8d 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 · 44 lines

How it starts

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

Make the UI accessible

Bring the affected UI to WCAG 2.2 AA: operable by keyboard, understandable to assistive tech, and tolerant of user preferences — proven, not assumed.

Steps

  1. Read the lore first. Call search_lore (Memory MCP) for the repo's accessibility conventions and any design-system a11y primitives already in use.
  2. Use semantic HTML before ARIA. Reach for the native element (button, a, label, nav, dialog) first; add ARIA roles/attributes only to fill real gaps.
  3. Make it keyboard operable. Every interactive element must be focusable and activatable by keyboard, in a logical tab order, with a visible focus indicator.
  4. Label everything. Associate inputs with labels, give icon-only controls an accessible name, and announce dynamic changes with live regions where needed.
  5. Manage focus for overlays/dialogs/menus: move focus in on open, trap it while open, restore it on close.
  6. Respect preferences. Honour prefers-reduced-motion; ensure text/background contrast meets AA (4.5:1 body, 3:1 large text).
  7. Verify + evidence. Run the repo's automated a11y checks and exercise keyboard flow; record the results via the record-evidence skill and submit for review.

Rules

  • Native semantics over ARIA; never use ARIA to paper over the wrong element.
  • No keyboard trap, no focus loss, no invisible focus.
  • Don't remove focus outlines without a compliant replacement.
  • Colour is never the only signal — pair it with text or icon.

Capture lore

This skill is one of the places durable, reusable knowledge naturally surfaces: An accessibility pattern or boundary this repo standardises on — a focus-management rule, a semantics convention, or an a11y check that must pass. That kind of fact is lore. Capture it via the lore-capture protocol in your brief (CLAUDE.factory.md, step 11 "Memory contribution"): call the Memory MCP suggest_lore once at the close of your work — reusable conventions, gotchas, decisions, and boundaries only, never per-ticket trivia.

Read the full file on GitHub · 44 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.

  1. 8d 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 yesterday), licensed Apache-2.0. It adds 72 tokens to every session and 578 once invoked, about $0.0004 per session on Opus 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.

Related

Other skills, from other repositories

bulwark-brainstorm

Role-based brainstorming with dual modes: --scoped (sequential Task tool, 5 roles) and --exploratory (Agent Teams peer debate, 4 roles). Use for feasibility assessment and idea validation.

QBall-Inc/the-bulwark · 50 tokens

plan-creation

Create structured implementation plans via a 4-role scrum team (Product Owner, Architect, Eng/Delivery Lead, QA/Critic) with optional Agent Teams peer debate mode.

QBall-Inc/the-bulwark · 38 tokens

anthropic-validator

Validates Claude Code assets (skills, hooks, agents, commands, MCP servers, plugins) against official Anthropic standards. Fetches latest docs dynamically and produces structured validation reports.

QBall-Inc/the-bulwark · 40 tokens

code-review

Comprehensive code review with distinct aspect based sections. Use when reviewing code, checking for security issues, finding type safety problems, auditing code quality, or when user asks to review code, PRs or changes. Three-phase workflow runs static tools, LLM judgment, and writes diagnostic log.

QBall-Inc/the-bulwark · 61 tokens

create-subagent

Generates single-purpose Claude Code sub-agents for use via the Task tool. Use when creating dedicated sub-agents, scaffolding agent definitions, or generating agents with diagnostics and permissions setup.

QBall-Inc/the-bulwark · 42 tokens

test-audit

Audit test suites for T1-T4 violations using AST analysis, mock detection, and multi-stage synthesis. Invoke when user asks to audit tests, check test quality, find mock violations, review test effectiveness, or inspect test suites for over-mocking. Triggers automatic rewrites when quality gates fail.

QBall-Inc/the-bulwark · 0 tokens