一键在 Manus 中运行任何 Skill

accessibility-audit

星标0

分支0

更新时间2026年6月23日 09:30

Run accessibility audits and fix WCAG 2.2 AA violations. Use when asked about accessibility, a11y, WCAG, or axe-core issues.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

jmrplens

jmrplens/jmrp.io

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Accessibility Audit Skill

Audit and fix accessibility issues in jmrp.io for WCAG 2.2 AA compliance.

Running Accessibility Tests

Full Accessibility Suite

pkill -f "astro dev" 2>/dev/null
pnpm test:e2e --project=accessibility

Specific Suites

# axe-core automated checks (light + dark themes)
pnpm test:e2e tests/accessibility.spec.ts

# Semantic landmarks, heading order, copy buttons
pnpm test:e2e tests/deep.accessibility.spec.ts

# Keyboard navigation (menu, skip link, mobile menu)
pnpm test:e2e tests/keyboard.accessibility.spec.ts

# Tab component keyboard nav, FileContent focus
pnpm test:e2e tests/tabs.accessibility.spec.ts

ARIA Label Audit (on built HTML)

node scripts/audit-aria-labels.mjs

WCAG Requirements

Color Contrast

Text: ≥4.5:1 ratio (AA), target ≥7:1 (AAA)
Large text (≥18px bold or ≥24px): ≥3:1 ratio
Use the Color Contrast Checker tool at /tools/color-contrast-checker/
Use CSS custom properties — they're pre-verified for contrast

Heading Hierarchy

h1 is auto-generated from page title
Use h2 → h3, never skip levels (h2 → h4 is invalid)
Each section should have exactly one heading level

Interactive Elements

All interactive elements must be keyboard accessible
Visible focus indicators required (:focus-visible)
prefers-reduced-motion support for animations
Tab order must be logical (avoid tabindex > 0)

Images & Media

All <img> require descriptive alt text
Decorative images: alt="" + aria-hidden="true"
<Mermaid> requires ariaLabel prop

Component-Specific

Component	Requirement
`Mermaid`	`ariaLabel` required
`Table`	Semantic `<thead>`, `<th scope>`
`TerminalCommand`	`aria-label` for copy button
`Collapsible`	`aria-expanded` state
`Tabs`	ARIA tabs pattern (radio group)
`Callout`	`role="note"` already included

ARIA Patterns

aria-labelledby for sections with visible headings
aria-label when no visible heading exists
aria-expanded for toggleable elements
aria-current="page" for active navigation items
role="note" for informational asides

Accessibility Reports

Reports are saved to accessibility-report/ after running tests. Check:

accessibility-summary-dark.json / accessibility-summary-light.json
Individual page reports (HTML format)

同仓库更多 Skills

同仓库

astro-build

jmrplens/jmrp.io

Build, preview, and verify the jmrp.io Astro 7 project. Use when asked to build, deploy, or run the QA pipeline.

2026-06-230

csp-debug

jmrplens/jmrp.io

Debug Content Security Policy (CSP) and Subresource Integrity (SRI) issues in the jmrp.io project

2026-06-230

new-blog-post

jmrplens/jmrp.io

Scaffold and write a new MDX blog post. Use when asked to create a blog post, write an article, or add content to the posts collection.

2026-06-230

new-component

jmrplens/jmrp.io

Create a new reusable Astro UI component in src/components/ui/. Use when asked to add a component, build a UI element, or extend the component library.

2026-06-230

i18n

jmrplens/jmrp.io

Add or update translations for the EN/ES bilingual system. Use when asked about translations, missing keys, locale routing, hardcoded strings, or adding a new language.

2026-04-050

name	accessibility-audit
description	Run accessibility audits and fix WCAG 2.2 AA violations. Use when asked about accessibility, a11y, WCAG, or axe-core issues.
argument-hint	[suite: all\|axe\|deep\|keyboard\|tabs]

Accessibility Audit Skill

Audit and fix accessibility issues in jmrp.io for WCAG 2.2 AA compliance.

Running Accessibility Tests

Full Accessibility Suite

pkill -f "astro dev" 2>/dev/null
pnpm test:e2e --project=accessibility

Specific Suites

# axe-core automated checks (light + dark themes)
pnpm test:e2e tests/accessibility.spec.ts

# Semantic landmarks, heading order, copy buttons
pnpm test:e2e tests/deep.accessibility.spec.ts

# Keyboard navigation (menu, skip link, mobile menu)
pnpm test:e2e tests/keyboard.accessibility.spec.ts

# Tab component keyboard nav, FileContent focus
pnpm test:e2e tests/tabs.accessibility.spec.ts

ARIA Label Audit (on built HTML)

node scripts/audit-aria-labels.mjs

WCAG Requirements

Color Contrast

Text: ≥4.5:1 ratio (AA), target ≥7:1 (AAA)
Large text (≥18px bold or ≥24px): ≥3:1 ratio
Use the Color Contrast Checker tool at /tools/color-contrast-checker/
Use CSS custom properties — they're pre-verified for contrast

Heading Hierarchy

h1 is auto-generated from page title
Use h2 → h3, never skip levels (h2 → h4 is invalid)
Each section should have exactly one heading level

Interactive Elements

All interactive elements must be keyboard accessible
Visible focus indicators required (:focus-visible)
prefers-reduced-motion support for animations
Tab order must be logical (avoid tabindex > 0)

Images & Media

All <img> require descriptive alt text
Decorative images: alt="" + aria-hidden="true"
<Mermaid> requires ariaLabel prop

Component-Specific

Component	Requirement
`Mermaid`	`ariaLabel` required
`Table`	Semantic `<thead>`, `<th scope>`
`TerminalCommand`	`aria-label` for copy button
`Collapsible`	`aria-expanded` state
`Tabs`	ARIA tabs pattern (radio group)
`Callout`	`role="note"` already included

ARIA Patterns

aria-labelledby for sections with visible headings
aria-label when no visible heading exists
aria-expanded for toggleable elements
aria-current="page" for active navigation items
role="note" for informational asides

Accessibility Reports

Reports are saved to accessibility-report/ after running tests. Check:

accessibility-summary-dark.json / accessibility-summary-light.json
Individual page reports (HTML format)