Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

a11y

Estrellas20

Forks4

Actualizado10 de julio de 2026 a las 08:28

Frontend accessibility audit (WCAG): semantic HTML, keyboard access, focus management, contrast, ARIA, screen readers. Trigger phrases: "a11y", "accessibility", "WCAG", "screen reader", "keyboard navigation", "contrast", "ARIA"

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

byerlikaya

byerlikaya/claude-starter-kit

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·SOC 15-1255

SKILL.md

readonly

name	a11y
description	Frontend accessibility audit (WCAG): semantic HTML, keyboard access, focus management, contrast, ARIA, screen readers. Trigger phrases: "a11y", "accessibility", "WCAG", "screen reader", "keyboard navigation", "contrast", "ARIA"

Accessibility (a11y)

Goal: make the interface usable by everyone, including keyboard, screen reader, and low vision. Baseline target: WCAG 2.1 AA. Stack-agnostic (web/React/RN); do a web search when needed for framework-specific APIs.

Checklist

Semantic HTML: button/a/nav/main/h1..h6 correct; no div-buttons
Keyboard: every interaction reachable via Tab, sensible order, visible focus ring
Focus management: focus moves on modal/route change, focus trap correct
Contrast: text ≥ 4.5:1, large text ≥ 3:1
Alt text: alt on meaningful images; alt="" on decorative images
Forms: every input has a label; error message programmatically linked (aria-describedby)
ARIA: only when needed; wrong ARIA is worse than no ARIA; role/name/state correct
Motion/animation: respect prefers-reduced-motion
Language: <html lang> correct (coordinate with i18n)

How

Start with semantics — the right element solves 80%. Use button instead of role="button"+div.
Navigate with the keyboard — drop the mouse, run the whole flow with Tab/Shift-Tab/Enter/Escape; is focus visible and its order sensible.
Naming — does every interactive element have an accessible name (aria-label on visual-only icon buttons).
Contrast — check color pairs against the ratio; don't convey meaning by color alone (add an icon/text).
Dynamic content — notify the screen reader via a live region (aria-live); manage modal focus.
Automated + manual — tools like linters/axe are the baseline; but manual keyboard+reader testing is essential (tools don't catch 100%).

React / RN note

Web React: semantic element in JSX + htmlFor/aria-*; use button instead of a clickable div.
React Native: accessible, accessibilityLabel, accessibilityRole, accessibilityState (coordinate with frontend-rn-expo).

Invariant rules

Semantics first, ARIA second — wrong ARIA does harm.
Must be fully usable by keyboard — without a mouse.
Color cannot be the sole carrier of meaning.
Automated tools are not enough — manual keyboard+reader testing.
Follow the existing design system — if there is a component library, keep its accessible pattern.

Más de este repositorio

mismo repositorio

eval-grader

byerlikaya/claude-starter-kit

Measure output quality, don't vibe it: score a generative task with a two-layer grader — deterministic code metrics + per-dimension LLM-as-judge — over a fixed task set, as signed deltas vs a pinned baseline. Grades cost alongside correctness (pass-slow). Trigger phrases: "eval", "grader", "measure output quality", "LLM-as-judge", "score the output"

2026-07-1920

frontend

byerlikaya/claude-starter-kit

Stack-agnostic frontend discipline (web · mobile · desktop): component structure, state, data fetching, loading/empty/error states, i18n, accessibility, performance. frontend-expert-csk applies it on every stack. Trigger phrases: "frontend", "screen", "component", "page", "UI", "state management", "interface"

2026-07-1920

iterate

byerlikaya/claude-starter-kit

Refine-to-Done loop: repeat until tests green + review clean + nothing deferred; bounded. Not the harness /loop. Trigger phrases: "iterate", "loop until done", "keep going until"

2026-07-1920

security-scan

byerlikaya/claude-starter-kit

Stack-agnostic security audit: map the attack surface, trace untrusted input to dangerous calls, surface dependency and configuration flaws. Severity-ranked report with fixes. Trigger phrases: "security scan", "run a security scan", "OWASP check", "scan for vulnerabilities", "find security vulnerabilities", "security audit"

2026-07-1920

threat-model

byerlikaya/claude-starter-kit

Scope a security audit BEFORE scanning, to cut false positives: map assets, entry points, trust boundaries and 5-8 domain-specific attack classes into a parseable THREAT_MODEL.md. A threat survives a patch; a vulnerability is only evidence for one. Feeds security-scan. Trigger phrases: "threat model", "attack surface", "scope the audit", "trust boundary"

2026-07-1920

sonarqube-check

byerlikaya/claude-starter-kit

SonarQube quality gate (language-agnostic, local-first): 0 Bugs/Vulns/Hotspots/Code Smells, 0 build warnings. If no analyzer exists, install the language's local server-less Sonar analyzer and run it — never a remote server. Trigger phrases: "sonarqube", "quality gate", "code smell", "sonar scan"

2026-07-1620

Accessibility (a11y)

Checklist

Semantic HTML: button/a/nav/main/h1..h6 correct; no div-buttons

Keyboard: every interaction reachable via Tab, sensible order, visible focus ring

Focus management: focus moves on modal/route change, focus trap correct

Contrast: text ≥ 4.5:1, large text ≥ 3:1

Alt text: alt on meaningful images; alt="" on decorative images

Forms: every input has a label; error message programmatically linked (aria-describedby)

ARIA: only when needed; wrong ARIA is worse than no ARIA; role/name/state correct

Motion/animation: respect prefers-reduced-motion

Language: <html lang> correct (coordinate with i18n)

How

Start with semantics — the right element solves 80%. Use button instead of role="button"+div.

Navigate with the keyboard — drop the mouse, run the whole flow with Tab/Shift-Tab/Enter/Escape; is focus visible and its order sensible.

Naming — does every interactive element have an accessible name (aria-label on visual-only icon buttons).

Contrast — check color pairs against the ratio; don't convey meaning by color alone (add an icon/text).

Dynamic content — notify the screen reader via a live region (aria-live); manage modal focus.

Automated + manual — tools like linters/axe are the baseline; but manual keyboard+reader testing is essential (tools don't catch 100%).

React / RN note

Web React: semantic element in JSX + htmlFor/aria-*; use button instead of a clickable div.

React Native: accessible, accessibilityLabel, accessibilityRole, accessibilityState (coordinate with frontend-rn-expo).

Invariant rules

Semantics first, ARIA second — wrong ARIA does harm.

Must be fully usable by keyboard — without a mouse.

Color cannot be the sole carrier of meaning.

Automated tools are not enough — manual keyboard+reader testing.

Follow the existing design system — if there is a component library, keep its accessible pattern.