agentleFS
Sign inStart free
zinimanziniman/ai-instruct/skills/web-accessibility/SKILL.md

web-accessibility

Skill29 starsChanged 22 days agoApache-2.0View on GitHub

Use this skill whenever the user is building or reviewing any web UI. Accessibility is a baseline requirement, not a niche concern. Covers WCAG 2.2 AA (including Focus Not Obscured, Target Size, Accessible Authentication), semantic HTML and native interactive elements (dialog, popover, details, invoker commands), ARIA patterns, keyboard navigation, focus management, color contrast, touch targets, forms, testing with axe / Lighthouse / screen readers, and legal context (ADA Title II and III, European Accessibility Act, EN 301 549). Trigger when generating any interactive component or page (forms, modals, menus, tooltips, tables, navigation, layouts), before any "launch" or "go live", during pre-launch checklists, when a user asks about accessibility overlays or compliance deadlines, and whenever producing new HTML/JSX markup, even if the user does not explicitly mention a11y or WCAG. Skip for backend-only changes, CLI tools, or non-UI code.

19 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use api-design and security-review.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • MicrosoftSkill

    api-design

    Guide for designing and documenting RESTful APIs. Use when asked to design an API, create endpoints, or document an API.

    Also in 3 projects that use this

  • SentrySkill

    security-review

    Finds exploitable application security vulnerabilities in code changes. Use for Warden security scans, appsec review, OWASP-style checks, authentication or authorization bugs, injection, XSS, SSRF, path traversal, secrets, unsafe crypto, webhook verification, open redirects, or sensitive data exposure.

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

4 rules. 0 are common, 4 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 13 edited versions we read keep these.

  • 4

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Default: worldwide - EU/UK requirements (EAA, PSBAR) will be flagged as applicable throughout this guide.

    line 19
  2. Distinctive:

    Default: company/marketing website Options: Company/marketing website | Online shop/e-commerce | Web app/SaaS | Media/video site | Document …

    line 23
  3. Distinctive:

    Default: yes - touch target sizing and pointer accessibility sections apply.

    line 27
  4. Distinctive:

    Default: WCAG 2.2 AA - current best-practice baseline.

    line 34

“Common” is measured: kept by at least 6 in 10 of the 13 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Web Accessibility Guide

Applies to: Any website or web app | Updated: October 2026

A practical reference for building accessible websites - covering WCAG 2.2 criteria, semantic HTML, ARIA, forms, touch, and testing.

Section 0: Before You Start

Answer these questions before generating accessibility code. Each answer changes which sections apply.

Q: Where are your users? Default: worldwide - EU/UK requirements (EAA, PSBAR) will be flagged as applicable throughout this guide. Options: US only | US state or local government | Europe/EU | UK | Worldwide

Q: What kind of product is this? Default: company/marketing website Options: Company/marketing website | Online shop/e-commerce | Web app/SaaS | Media/video site | Document tool

Q: Will people use this on mobile phones or tablets as well as desktop? Default: yes - touch target sizing and pointer accessibility sections apply.

Q: Are you building with a component library? Default: none Options: Radix UI | shadcn/ui | MUI | Chakra UI | Other | None - if a library is detected in package.json, note which accessibility features it handles natively so you don't duplicate them.

Q: Do you need to comply with a specific standard for legal or contract reasons? Default: WCAG 2.2 AA - current best-practice baseline. Options: WCAG 2.1 AA | WCAG 2.2 AA | Section 508 | EN 301 549 | Not sure

AI assistant: Use these answers to prioritize: apply EAA notes for EU products, ADA Title II notes for US state or local government (WCAG 2.1 AA is the legal floor; still build to 2.2 AA), and the touch target and pointer sections for mobile. If a known accessible component library is detected, note which patterns it handles so you don't duplicate effort.

Contents

This guide is split into reference files. Use the Section 0 answers to decide which apply, then read only those; skip the rest.

  • Legal & Compliance: The product serves EU users (European Accessibility Act, EN 301 549), US state or local government (ADA Title II), US businesses (ADA Title III), or US federal agencies (Section 508), or the user asks about legal deadlines or accessibility overlays.
  • WCAG Standards Overview: Choosing a conformance target (A, AA, AAA) or explaining why 2.2 AA is the default.
  • WCAG 2.2: What's New: Checking against criteria added in WCAG 2.2: focus not obscured, dragging, target size, accessible authentication, redundant entry, consistent help.
  • Semantic HTML: Generating any markup: page landmarks, choosing the right element, and native interactive elements (dialog, popover, details, invoker commands).
  • Keyboard Navigation: Building interactive components: skip links, focus order and tabindex, keyboard interactions for custom widgets.
  • ARIA: Native HTML is not enough and ARIA attributes or roles are needed (labels, descriptions, expanded, hidden, live regions).
  • Images & Media: Adding images, SVG, video, or audio: alt text, captions, transcripts.
  • Forms: Building forms: labels, autocomplete tokens, required fields, error messages, fieldsets, multi-step forms.
  • Touch & Pointer: The UI targets touch or mobile, or has tooltips and content shown on hover or focus.
  • Color & Contrast: Choosing colors, design tokens, or a theme: contrast ratios, semi-transparent text, brand colors, Tailwind slate reference.
  • Focus Management: Styling focus indicators, building dialogs and modals, or updating content dynamically.
  • Motion & Animation: Adding animations or transitions; respect prefers-reduced-motion.
  • Testing: Auditing a page: automated scans, keyboard-only, screen readers, zoom, text spacing, color and vision checks.
  • Anti-Patterns to Flag: Reviewing code or generating UI; patterns to call out actively.
  • Checklist by Product Type: Before launch, for a baseline checklist plus additions for e-commerce, web apps, media sites, and mobile.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free