Stats
Actions
Tags
From forge-skills
Use when building UI that ships to users, when reviewing for WCAG AA compliance, when adding keyboard navigation, when ensuring screen reader support, when auditing color contrast, or when preparing a UI surface for an EU or government customer.
How this skill is triggered — by the user, by Claude, or both
Slash command
/forge-skills:accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Establish WCAG AA as the baseline floor for every UI surface — *before* it ships. Output is `.forge/accessibility.md` — the semantic-HTML rules, the ARIA usage policy, keyboard navigation requirements, focus management rules, contrast policy, reduced-motion respect, and the screen-reader testing checklist. Pairs with `design-system` (which defines the visual tokens that meet contrast) and `inte...
Establish WCAG AA as the baseline floor for every UI surface — before it ships. Output is .forge/accessibility.md — the semantic-HTML rules, the ARIA usage policy, keyboard navigation requirements, focus management rules, contrast policy, reduced-motion respect, and the screen-reader testing checklist. Pairs with design-system (which defines the visual tokens that meet contrast) and interaction-patterns (which defines the keyboard and focus contract).
| Thought | Reality |
|---|---|
| "Accessibility is a nice-to-have" | It's a legal requirement in most markets (ADA in US, EAA in EU, AODA in Canada) and a usability requirement everywhere. |
| "We'll add it later" | Retrofitting a11y costs 10x building it in. Every component pattern picked without a11y becomes a refactor. |
| "Our users don't need it" | You don't know that — assistive tech use is often invisible. ~20% of users have a disability in some form. |
| "ARIA fixes everything" | ARIA overuse is worse than no ARIA. Native semantic HTML always beats <div role="button">. |
| "Just make the visible thing look right" | Screen readers see structure, not pixels. A visually-correct page can be unusable with VoiceOver. |
| "Color is enough to signal state" | Colorblind users can't see red-vs-green; every meaningful color needs a text or icon backup. |
<div onClick={...}> instead of <button> (not keyboard accessible by default)<button role="button"> is a smell)outline: none on a focusable element with no replacement focus-visible styleEsc<input> without a <label> (or aria-label for icon-only)prefers-reduced-motion<h1> followed by <h3> with no <h2>)alt (or alt="" for non-decorative images)In .forge/accessibility.md, declare the conformance target (AA at minimum for most products; AAA only where regulatory). Document which assistive technologies are tested against:
The rule: prefer native elements over ARIA every time.
| Use | Not |
|---|---|
<button> | <div role="button"> |
<a href> | <div onClick={navigate}> |
<input type="checkbox"> | <div role="checkbox"> |
<dialog> or <div role="dialog"> with focus trap and labelling | <div className="modal"> |
<nav>, <main>, <aside>, <header>, <footer> | <div> everywhere |
<ul>/<li> for lists | A pile of <div>s |
Run a structural audit: every interactive element is a native interactive element, or has a documented reason it isn't.
The rules for ARIA:
aria-label lies to screen readers.aria-live), to label icon-only buttons (aria-label), to associate hint text (aria-describedby), to wire combobox/listbox patterns that have no native equivalent.<button role="button"> is a smell.For every interactive element and every page:
Esc closes any modal, drawer, popover, command paletteEnter and Space both activate buttons; Enter activates linksCross-reference interaction-patterns for the canonical keyboard contract.
Audit every token pairing in design-system — every text/background combination meets AA. Document the contrast ratio next to each token.
prefers-reduced-motionprefers-reduced-motion: reduce is setFor every UI surface before it ships:
role="alert" or live region)aria-busy + aria-live="polite")alt (decorative = empty alt="").forge/accessibility.md written with the conformance target<div onClick> in the codebase (grep-verified)aria-label)outline: none without a focus-visible replacementprefers-reduced-motion is respected (verified in a test or storybook)npx claudepluginhub aneja5/forge-skills --plugin forge-skillsSearches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.