Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

a11y

Étoiles20

Forks4

Mis à jour10 juillet 2026 à 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"

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

byerlikaya

byerlikaya/claude-starter-kit

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques·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.

Plus depuis ce dépôt

même dépôt

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.