Accessibility validator

Skill smicolon/ai-kit/packs/nuxtjs/skills/accessibility-validator

Convention packs for any AI coding tool - agents, skills, commands, and rules for 15 tools including Claude Code, Cursor, Windsurf, and Copilot

Install

npx -y skills add smicolon/ai-kit --skill accessibility-validator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Automatically validate Vue 3/Nuxt.js components meet WCAG 2.1 AA standards. Use when creating components, forms, buttons, modals, navigation, or any interactive UI elements.

SKILL.md

4.0 KB, as published. Nobody here has run it

Vue Accessibility Validator

Activation Triggers

This skill activates when:

Creating Vue components
Writing template sections
Adding interactive elements
Mentioning "component", "form", "button"

Checks

Check 1: Semantic HTML

<!-- WRONG -->
<div @click="handleAction">Click me</div>

<!-- CORRECT -->
<button type="button" @click="handleAction">
  Click me
</button>

Rule: Interactive elements must use semantic HTML (<button>, <a>, <input>) not generic <div> or <span>.

Check 2: Form Labels

<!-- WRONG -->
<input v-model="email" placeholder="Email" />

<!-- CORRECT -->
<label for="email">Email</label>
<input id="email" v-model="email" aria-describedby="email-hint" />
<span id="email-hint">Your work email address</span>

Rule: All form inputs must have associated labels or aria-label.

Check 3: Keyboard Navigation

<!-- WRONG - Only mouse -->
<div @click="toggle" class="dropdown">

<!-- CORRECT - Keyboard accessible -->
<button
  type="button"
  @click="toggle"
  @keydown.enter="toggle"
  @keydown.space.prevent="toggle"
  :aria-expanded="isOpen"
  aria-haspopup="listbox"
>

Rule: All interactive elements must be keyboard accessible.

Check 4: Focus Management

<!-- Modal with focus trap -->
<template>
  <div
    v-if="isOpen"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    @keydown.escape="close"
  >
    <h2 id="modal-title">Modal Title</h2>
    <!-- Focus trapped inside -->
    <button ref="closeButton" @click="close">Close</button>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue'

const closeButton = ref<HTMLButtonElement>()

watch(isOpen, async (open) => {
  if (open) {
    await nextTick()
    closeButton.value?.focus()
  }
})
</script>

Check 5: Image Alt Text

<!-- WRONG -->
<img :src="product.image" />

<!-- CORRECT - Informative image -->
<img :src="product.image" :alt="product.name" />

<!-- CORRECT - Decorative image -->
<img :src="decorativePattern" alt="" role="presentation" />

Check 6: Color Contrast

Ensure 4.5:1 ratio for normal text, 3:1 for large text.

<!-- Use Tailwind classes that meet contrast -->
<p class="text-gray-700 bg-white">Readable text</p>

<!-- WRONG - Low contrast -->
<p class="text-gray-400 bg-white">Hard to read</p>

Check 7: ARIA Attributes

<!-- Loading state -->
<button :aria-busy="isLoading" :disabled="isLoading">
  <span v-if="isLoading" aria-live="polite">Loading...</span>
  <span v-else>Submit</span>
</button>

<!-- Expandable section -->
<button
  :aria-expanded="isExpanded"
  :aria-controls="panelId"
  @click="toggle"
>
  Show Details
</button>
<div :id="panelId" v-show="isExpanded">
  Details content
</div>

Auto-Fix Actions

When issues detected:

div with @click -> Convert to <button type="button">
Missing label -> Add <label> or aria-label
Missing keyboard handler -> Add @keydown handlers
Missing ARIA -> Add appropriate ARIA attributes
Missing alt -> Prompt for alt text

Validation Report

ACCESSIBILITY VALIDATION

File: components/ProductCard.vue

 Semantic HTML: Using button elements
 Form labels: All inputs labeled
 Keyboard nav: Tab order correct
 Focus management: Modal traps focus
 Image alt text: All images have alt

Issues:
 Line 45: <div @click> should be <button>
 Line 72: Input missing aria-describedby for error

Summary: 2 issues to fix

WCAG 2.1 AA Checklist

1.1.1 Non-text Content: Alt text for images
1.3.1 Info and Relationships: Semantic markup
1.4.3 Contrast: 4.5:1 minimum
2.1.1 Keyboard: All functionality accessible
2.4.3 Focus Order: Logical tab sequence
2.4.7 Focus Visible: Focus indicators
3.3.2 Labels: Form inputs labeled
4.1.2 Name, Role, Value: ARIA correct