| name | accessibility |
| description | WCAG 2.2 AA compliance for SAAC applications |
| license | MIT |
| compatibility | opencode |
| metadata | {"type":"frontend-ux","standard":"wcag-2.2-aa"} |
SKILL: Accessibility (WCAG 2.2 AA)
CRITICAL for HablaIA
Este proyecto es para usuarios con diversidad funcional. Accesibilidad NO es opcional.
✅ Checklist Obligatorio
Navegación por Teclado
Screen Readers
Contraste de Color
Tamaño de Click Targets
Testing
npm run lighthouse -- --only-categories=accessibility
npm run test:a11y
🔧 Snippets
Pictograma Accesible
<template>
<button
type="button"
:aria-label="pictogram.alt"
@click="handleClick"
class="w-24 h-24 focus:outline focus:outline-3 focus:outline-blue-500"
>
<img
:src="pictogram.url"
:alt="pictogram.alt"
role="img"
/>
<span class="sr-only">{{ pictogram.text }}</span>
</button>
</template>
Live Region para Feedback
<div
role="status"
aria-live="polite"
aria-atomic="true"
class="sr-only"
>
{{ statusMessage }}
</div>