Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From nuxt-modern-dev
Audit web pages and apps for WCAG 2.1 AA accessibility compliance. Use when fixing lighthouse issues, contrast ratios, ARIA labels, or keyboard navigation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/nuxt-modern-dev:accessibility-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Comprehensive WCAG 2.1 AA compliance checklist for web applications.
Comprehensive WCAG 2.1 AA compliance checklist for web applications.
Minimum ratios:
Contrast-safe Tailwind pairs:
| Background | Text | Ratio |
|---|---|---|
| white | gray-700+ | 4.5:1+ |
| gray-100 | gray-800+ | 4.5:1+ |
| blue-600 | white | 4.5:1+ |
| red-700 | white | 4.5:1+ |
<html lang="en">
<label for="email">Email address</label>
<input id="email" type="email" aria-describedby="email-hint">
<span id="email-hint" class="text-sm text-gray-600">We'll never share your email</span>
<!-- Skip link -->
<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:bg-white focus:p-4">
Skip to main content
</a>
<!-- Focus styles (Tailwind) -->
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Click me
</button>
<!-- Decorative -->
<img src="decoration.svg" alt="" role="presentation">
<!-- Informative -->
<img src="chart.png" alt="Sales increased 25% in Q4 2025">
<html lang="..."> present<script setup lang="ts">
// Auto-announce route changes
const route = useRoute()
const announcer = ref('')
watch(() => route.path, () => {
announcer.value = `Navigated to ${route.meta.title || route.path}`
})
</script>
<template>
<div role="status" aria-live="polite" class="sr-only">
{{ announcer }}
</div>
</template>
# Lighthouse CLI
npx lighthouse URL --only-categories=accessibility --output=json
# axe-core in tests
import axe from 'axe-core'
axe.run().then(results => console.log(results.violations))
npx claudepluginhub pstuart/pstuart --plugin nuxt-modern-devAudits web accessibility for WCAG compliance, checks screen reader support, and fixes issues like alt text, color contrast, ARIA labels, keyboard navigation, and semantic HTML.
Fast, high-signal accessibility triage for pages, components, or PRs targeting WCAG 2.2 AA compliance. Provides a checklist and structured output format.