원클릭으로 Manus에서 모든 스킬 실행

a11y-audit

Use when auditing accessibility compliance of a feature or codebase. Covers WCAG 2.2 AA conformance, screen reader compatibility, keyboard navigation, focus management, color contrast, reduced motion, and ARIA usage. Do not use for general UX review (use journey-mapping) or component interaction specs (use interaction-design).

Manus에서 실행

개요

설치 명령

npx skills add https://github.com/dtsong/my-claude-setup --skill a11y-audit

이 명령을 Claude Code에 복사하여 붙여넣어 스킬을 설치하세요

출처

dtsong/my-claude-setup

스타5

포크0

업데이트2026년 3월 26일 08:42

SKILL.md

readonly

name	a11y-audit
department	advocate
description	Use when auditing accessibility compliance of a feature or codebase. Covers WCAG 2.2 AA conformance, screen reader compatibility, keyboard navigation, focus management, color contrast, reduced motion, and ARIA usage. Do not use for general UX review (use journey-mapping) or component interaction specs (use interaction-design).
version	1
triggers	["accessibility","a11y","WCAG","screen reader","ARIA","keyboard navigation","focus management","color contrast","reduced motion"]

A11y Audit

Purpose

Evaluate accessibility compliance against WCAG 2.2 AA criteria across perceivable, operable, understandable, and robust principles. Identify barriers for users of assistive technologies and provide actionable remediation steps.

Scope Constraints

Reads source code, templates, styles, and component markup for accessibility analysis. Does not modify files or execute code. Does not perform automated accessibility scans (recommend tooling where appropriate).

Inputs

Feature description or codebase path to audit
Target WCAG conformance level (default: AA)
Known assistive technologies in scope (screen readers, switch devices, etc.)
Any existing accessibility testing results or known issues

Input Sanitization

No user-provided values are used in commands or file paths. All inputs are treated as read-only analysis targets.

Procedure

Progress Checklist

Step 1: Audit keyboard navigation and focus management
Step 2: Evaluate screen reader compatibility
Step 3: Check color contrast and visual accessibility
Step 4: Review ARIA usage and semantic markup
Step 5: Assess motion and animation accessibility
Step 6: Verify form and error handling accessibility

Step 1: Audit Keyboard Navigation and Focus Management

Verify all interactive elements are reachable via Tab/Shift+Tab.
Check focus order matches visual reading order.
Confirm visible focus indicators on all interactive elements (:focus-visible).
Verify focus trapping in modals, dialogs, and drawers.
Check skip-link presence for bypassing repetitive navigation.
Confirm no keyboard traps (user can always Tab out of any component).

Step 2: Evaluate Screen Reader Compatibility

Verify heading hierarchy (h1-h6) is logical and unbroken.
Check all images have meaningful alt text or alt="" for decorative.
Confirm form inputs have associated <label> elements or aria-label.
Verify live regions (aria-live) for dynamic content updates.
Check landmark regions (<nav>, <main>, <aside>, <header>, <footer>).
Confirm status messages use role="status" or role="alert".

Step 3: Check Color Contrast and Visual Accessibility

Verify text contrast meets 4.5:1 for normal text, 3:1 for large text (WCAG 1.4.3).
Check non-text contrast for UI components and graphical objects at 3:1 (WCAG 1.4.11).
Confirm information is not conveyed by color alone.
Verify content remains readable at 200% zoom.
Check text spacing adjustment tolerance (WCAG 1.4.12).

Step 4: Review ARIA Usage and Semantic Markup

Verify ARIA roles match element behavior (no role="button" on non-interactive elements without keyboard handlers).
Check for redundant ARIA on native semantic elements.
Confirm aria-expanded, aria-selected, aria-checked states update correctly.
Verify custom widgets follow WAI-ARIA Authoring Practices patterns.
Check aria-describedby and aria-labelledby reference valid IDs.

Step 5: Assess Motion and Animation Accessibility

Check prefers-reduced-motion media query support.
Verify no content relies solely on animation to convey meaning.
Confirm auto-playing content can be paused, stopped, or hidden (WCAG 2.2.2).
Check parallax and scrolling effects respect reduced motion preference.

Step 6: Verify Form and Error Handling Accessibility

Confirm error messages are programmatically associated with inputs (aria-describedby).
Verify inline validation announces errors to screen readers.
Check required fields are indicated both visually and programmatically (aria-required).
Confirm form submission errors provide clear recovery instructions.
Verify autocomplete attributes on identity/payment fields (WCAG 1.3.5).

Compaction resilience: If context was lost, re-read the Inputs section to identify the audit target, check the Progress Checklist for completed steps, then resume from the earliest incomplete step.

Output Format

Category	WCAG Criterion	Finding	Severity	Recommendation
Keyboard	2.1.1 Keyboard	...	Critical/High/Med/Low	...
Screen reader	1.3.1 Info and Relationships	...	...	...
Color contrast	1.4.3 Contrast (Minimum)	...	...	...
ARIA	4.1.2 Name, Role, Value	...	...	...
Motion	2.3.1 Three Flashes	...	...	...
Forms	3.3.1 Error Identification	...	...	...

Handoff

Hand off to interaction-design if component-level state changes are needed for accessibility remediation.
Hand off to artisan/visual-audit if contrast or visual design changes require design system updates.

Quality Checks

All interactive elements verified for keyboard accessibility
Focus management audited for modals, dialogs, and dynamic content
Screen reader heading hierarchy and landmark structure validated
Color contrast ratios verified against WCAG 2.2 AA thresholds
ARIA usage follows WAI-ARIA Authoring Practices
Reduced motion preferences checked
Form error handling is accessible
Each finding references a specific WCAG success criterion

Evolution Notes

이 저장소의 다른 Skills

같은 저장소

docx-to-pdf

dtsong/my-claude-setup

Use to convert a Word .docx file to PDF and/or verify its page count. Triggers on: converting docx to pdf, rendering a document, checking how many pages a docx produces, or asserting a page-count constraint (e.g. a resume must stay 2 pages). Wraps LibreOffice headless conversion.

2026-05-265

resume-tailor

dtsong/my-claude-setup

Use whenever Alan Yu is applying to a specific job and needs his resume or cover letter tailored to that opportunity. Triggers on: pasting a job description, asking 'how should I tailor this for [role]', requesting a cover letter for a specific company, asking for fit analysis between Alan's background and a posted role, or producing a .docx resume targeted at a specific employer. Do NOT use for unrelated resume work or for other people's resumes.

2026-05-265

evaluate-diagram

dtsong/my-claude-setup

Use this skill when scoring or comparing a generated diagram against a human reference. Triggers on "score this diagram", "evaluate my diagram", "compare to reference", or "how accurate is this". Applies when both a generated diagram and a reference image exist and quality assessment is needed. Do NOT use for creating new diagrams (use generate-diagram) or plotting data (use generate-plot).

2026-04-065

generate-diagram

dtsong/my-claude-setup

Use this skill when creating a methodology diagram from research text. Triggers on "make a diagram", "visualize this methodology", "diagram this process", or "generate a figure from this paper". Applies to methodology descriptions, process flows, and research paper sections. Do NOT use for scoring existing diagrams (use evaluate-diagram) or plotting data from CSV/JSON (use generate-plot).

2026-04-065

generate-plot

dtsong/my-claude-setup

Use this skill when creating a statistical plot or chart from a data file. Triggers on "plot this data", "make a chart", "graph this CSV", or "visualize these results". Applies to CSV, JSON, or tabular data needing bar charts, scatter plots, line graphs, or similar visualizations. Do NOT use for methodology diagrams from text (use generate-diagram) or diagram scoring (use evaluate-diagram).

2026-04-065

verilator-simulation

dtsong/my-claude-setup

Use when planning or reviewing Verilator-based simulation workflows for SystemVerilog designs. Covers lint analysis, simulation setup, trace/waveform debugging, coverage-driven verification, and C++ co-simulation. Do not use for commercial EDA tools (use verification-methodology) or RTL design flow (use chip-design-flow).

2026-03-305

출처

dtsong

dtsong/my-claude-setup

GitHub 저장소 열기 Creator 저장소 보기

설치 명령

다운로드

Manus에서 실행

유용한 대상SOC

소프트웨어 품질 보증 분석가·테스터컴퓨터 및 수학직15-1253L4