تشغيل أي مهارة في Manus بنقرة واحدة

a11y

النجوم٢٠

التفرعات٤

آخر تحديث١٠ يوليو ٢٠٢٦ في ٠٨:٢٨

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"

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

byerlikaya

byerlikaya/claude-starter-kit

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مصممو واجهات الويب والرقميةمهن الحاسوب والرياضيات·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.

المزيد من هذا المستودع

نفس المستودع

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.