Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

a11y

Sterne20

Forks4

Aktualisiert10. Juli 2026 um 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

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

byerlikaya

byerlikaya/claude-starter-kit

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe·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.

Mehr aus diesem Repository

gleiches Repository

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

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)

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.