---
type: "post"
id: "torch-a11y-open-source-accessibility-preferences-panel-that-edac67"
slug: "torch-a11y-open-source-accessibility-preferences-panel-that-edac67"
title: "torch-a11y: open-source accessibility preferences panel that ships with a coding-agent skill"
description: "torch-a11y is an MIT-licensed accessibility preferences panel for websites, released with an agent skill that prepares a codebase to honor its settings."
retrieval_nugget: "torch-a11y is an MIT-licensed accessibility preferences panel for websites, released with an agent skill that prepares a codebase to honor its settings. Its importance is not a claim to automatic compliance: it is a compact example of a library making its integration contract actionable for coding agents."
published_at: "2026-10-31"
updated_at: "2026-10-31"
record_date: "2026-10-31"
date_kind: "published_at"
topics: ["evals","context-engineering"]
entities: ["torch-a11y","React","Next.js","Vite","Tailwind CSS","Atkinson Hyperlegible Next"]
related_patterns: ["skills-become-portable-capability-layer"]
novelty_label: "new_fact"
what_changed: "Introduces torch-a11y, an accessibility preferences panel that applies settings before first paint and includes an agent skill to prepare codebases; the prior covered a separate accessibility-data project."
prior_refs: ["memory:99ed4ba0-51c8-8068-afd1-e7c324075726"]
source_url: "https://github.com/AswinTorch/torch-a11y"
source_urls: ["https://github.com/AswinTorch/torch-a11y"]
schema_version: "newruntime-agent-readable-v0.2"
stable_id: "post:torch-a11y-open-source-accessibility-preferences-panel-that-edac67"
status: "published"
visuals: []
editor: {"role":"editor","name":"Andrey Reshetnikov","profile":"https://newruntime.com/owner-profile.md","profile_json":"https://newruntime.com/owner-profile.json","same_as":["https://www.linkedin.com/in/reshetnikov1/","https://t.me/lapetuse"]}
routes: {"html":"https://newruntime.com/posts/torch-a11y-open-source-accessibility-preferences-panel-that-edac67/","markdown":"https://newruntime.com/posts/torch-a11y-open-source-accessibility-preferences-panel-that-edac67.md","json":"https://newruntime.com/posts/torch-a11y-open-source-accessibility-preferences-panel-that-edac67.json"}
---

# torch-a11y: open-source accessibility preferences panel that ships with a coding-agent skill

## Retrieval answer

torch-a11y is an MIT-licensed accessibility preferences panel for websites, released with an agent skill that prepares a codebase to honor its settings. Its importance is not a claim to automatic compliance: it is a compact example of a library making its integration contract actionable for coding agents.

## Summary

torch-a11y is an MIT-licensed accessibility preferences panel for websites, released with an agent skill that prepares a codebase to honor its settings. Its importance is not a claim to automatic compliance: it is a compact example of a library making its integration contract actionable for coding agents.

## What happened

The public GitHub repository for torch-a11y describes a small website preferences panel with five controls: text size, high contrast, reduced motion, highlighted links, and a readable font. Text can be scaled from 90% to 200%. The readable-font option uses Atkinson Hyperlegible Next with looser spacing. A round corner button opens the controls, which are implemented as a labelled modal dialog; the panel can take its theme from a site’s CSS variables.

The package is designed to apply saved choices before first paint. In a Next.js App Router application, the documented setup places `A11yScript` inline in the document `head`, with `A11yPanel` first in the `body`. The repository says deferred scripts, including `next/script`, run after first paint, so they do not provide the same behavior. A nonce can be passed when a site uses a strict content-security policy. For Vite and other client-only React applications, the documented route is to inject the output of `a11yScript()` into `index.html` before CSS and the application bundle, then call `initA11y()` before the first render.

The panel writes its state to the `html` element. Its contract includes a root font-size and `--a11y-text-scale` for text scaling; `data-a11y-text` for the selected scale; `data-a11y-contrast` and `data-a11y-motion` attributes; and presence attributes for links and font. Contrast and motion initially follow the relevant system preference until a visitor changes them. The project also provides Tailwind CSS v4 integration that redefines Tailwind motion and contrast variants to follow the panel, and adds utilities for highlighted links and the readable font.

The repository is explicit about the boundary: torch-a11y is not an accessibility overlay. It does not scan, patch, or “fix” a site, and installing it does not make a site accessible or compliant. Instead, the site must satisfy a CSS contract. Text must use `rem` rather than fixed pixels; colors should be centralized as tokens with stronger contrast values; and motion should be conditioned on the panel’s state rather than only a media query. The README suggests aiming for 7:1 contrast for text and 3:1 for borders and controls.

Alongside the library, torch-a11y ships an agent skill intended to prepare a codebase for that contract. The documented initialization command is `npx torch-a11y init`. This separates the visitor-facing panel from the integration work needed to make its choices real in an existing application. The React panel requires React 18 or later, while the core package has no dependencies.

## What the archive adds

This is a new application domain for a familiar packaging move, rather than a continuation of the same product story. [Appllama Skills](https://newruntime.com/posts/appllama-skills-a-builder-not-just-a-researcher-dcbd67/) similarly treated a skill as a reusable builder capability, while torch-a11y uses one to prepare an existing web codebase for a library’s explicit CSS requirements.

## Trend signal

The release supports the pattern that [skills become a portable capability layer](https://newruntime.com/patterns/skills-become-portable-capability-layer/). The interesting unit is not merely a `SKILL.md` file beside a package. Here, the skill is attached to a concrete integration contract: move text sizing to `rem`, expose color tokens, and connect motion to defined state. That makes the skill potentially useful where a generic prompt would be underspecified. The repository alone does not establish whether the skill is secure, broadly compatible, or behaviorally evaluated.

## Why it matters

Accessibility controls often fail in a predictable way: a widget can expose a switch, but the site’s CSS does not actually have the hooks required for the switch to change the interface. torch-a11y puts that dependency in the open. Its panel is only a control surface; the application must provide scalable type, tokenized contrast values, and state-aware motion rules.

For teams building with AI coding tools, the accompanying skill makes that integration work a first-class deliverable. Rather than asking an agent vaguely to “make the site work with this widget,” a package author can supply the implementation conventions the agent should establish. Teams should still review the resulting CSS and accessibility behavior. But the approach can reduce the distance between installing a component and adapting a codebase to the assumptions behind it.

## Limits and uncertainty

The source is a repository README, not an independent accessibility audit or a record of production deployments. It does not establish whether the defaults work across every framework, design system, browser, assistive technology, or content-security configuration. It also does not show the contents, evaluation, or security model of the included agent skill beyond its stated role in preparing the codebase.

Most importantly, the project itself says it does not make a site compliant or automatically accessible. Correct results depend on the host application’s CSS, semantic structure, keyboard behavior, content, and testing. The suggested contrast ratios are guidance in the documentation, not proof that every component in an adopting product meets them.

## Skill to build now

Take one preferences feature in an application and write its integration contract before asking an agent to implement it. Specify the state written to the document, the design tokens or attributes that consume it, and a small acceptance check for each preference. For a text-scale control, that means identifying fixed-pixel type that must become `rem`; for contrast, it means locating component colors that must become tokens. Then have the agent make the bounded changes and review the rendered result at each setting.

## Reader takeaway

torch-a11y is not an accessibility shortcut. Its useful idea is packaging a visible UI control with an agent-readable path for changing the surrounding code so that control has an effect. Libraries that depend on project-wide conventions can make those conventions part of the product.

Editor: [Andrey Reshetnikov](https://newruntime.com/owner-profile.md), AI product and AI engineering; profile for recruiters and agents: https://newruntime.com/owner-profile.json

## Continue in the graph

Next records for an agent, linked to their Markdown twins. Replace `.md` with `.json` for structured fields, including `next_reads`.

- topic hub: [Evals](https://newruntime.com/topics/evals.md): Explore the evals topic hub.
- topic hub: [Context Engineering](https://newruntime.com/topics/context-engineering.md): Explore the context-engineering topic hub.
- collection: [Field Notes](https://newruntime.com/posts.json): Open the latest editorial analysis.
- collection: [Source Ledger](https://newruntime.com/source-ledger.json): Inspect the public source evidence graph.
- whole graph: [discovery graph](https://newruntime.com/discovery-graph.json) (typed nodes and edges) and [site index](https://newruntime.com/site-index.md)