القائمة
Principio 4 de WCAG - compatibilidad con tecnologías actuales y futuras. Use cuando implemente HTML, ARIA, o componentes custom para asegurar compatibilidad.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | wcag-robust |
| description | Principio 4 de WCAG - compatibilidad con tecnologías actuales y futuras. Use cuando implemente HTML, ARIA, o componentes custom para asegurar compatibilidad. |
| metadata | {"author":"ux-ui-skills","version":"1.0","category":"accessibility"} |
El cuarto principio de WCAG establece que el contenido debe ser lo suficientemente robusto para ser interpretado por una amplia variedad de user agents, incluyendo tecnologías asistivas.
<!-- Malo: ID duplicado -->
<div id="menu">...</div>
<div id="menu">...</div>
<!-- Bueno: IDs únicos -->
<div id="main-menu">...</div>
<div id="footer-menu">...</div>
Todo componente de UI debe tener:
<!-- Nativo: automáticamente accesible -->
<button>Guardar</button>
<input type="checkbox" checked />
<!-- Custom: necesita ARIA -->
<div role="button" aria-label="Guardar" tabindex="0">💾</div>
<div role="checkbox" aria-checked="true" tabindex="0">✓</div>
Los mensajes que informan al usuario deben ser anunciados por screen readers sin recibir focus.
<!-- Live region para mensajes -->
<div role="status" aria-live="polite">Guardado exitosamente</div>
<div role="alert" aria-live="assertive">Error: No se pudo guardar</div>
Si puedes usar un elemento HTML nativo con la semántica requerida, úsalo.
<!-- Landmarks -->
<nav role="navigation">
<!-- o simplemente <nav> -->
<main role="main">
<!-- o simplemente <main> -->
<aside role="complementary">
<!-- o simplemente <aside> -->
<!-- Widgets -->
<div role="button">
<!-- mejor usar <button> -->
<div role="tablist">
<div role="dialog">
<div role="alert"></div>
</div>
</div>
</div>
</aside>
</main>
</nav>
<!-- Estados -->
aria-expanded="true|false" aria-selected="true|false" aria-hidden="true|false"
aria-disabled="true|false"
<!-- Propiedades -->
aria-label="Descripción" aria-labelledby="id-del-label"
aria-describedby="id-de-descripcion" aria-controls="id-del-elemento-controlado"
<!-- Tabs accesibles -->
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
Tab 1
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
Tab 2
</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Contenido Tab 1</div>
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">Confirmar acción</h2>
<p>¿Estás seguro?</p>
<button>Confirmar</button>
<button>Cancelar</button>
</div>
<!-- Contador de items -->
<div aria-live="polite" aria-atomic="true">3 items en el carrito</div>
<!-- Notificaciones -->
<div role="status">Mensaje enviado</div>
Biblioteca de componentes y patrones UI mobile-first para PWAs iOS/Android. Cubre navegación, gestos, componentes, cámara, safe areas, y patterns de Tailwind + shadcn/ui optimizados para móvil. Cumple iOS HIG y Material Design 3.
Workflow completo de desarrollo Design-First: exploración → clarificación → planificación → implementación autónoma (Ralph Loop). Incluye creación de issues GitHub de alta calidad estilo PRD.
Mantiene consistencia visual en apps iOS/PWA. Define paleta de colores, tipografía, espaciado, y componentes siguiendo un Design Token System. Evita inconsistencias de colores, fuentes y estilos. Usar cuando se detecten problemas de consistencia visual o al iniciar un nuevo proyecto.
Orquesta el flujo completo de MVP automatizado: SPEC → Historias → Tareas → Skills. Genera skills especializadas para cada tarea para que los agentes paralelos tengan conocimiento contextual específico.
Realiza entrevistas de feedback post-MVP para identificar bugs, mejoras UX, problemas de performance, seguridad y features faltantes
Principio 2 de WCAG - interfaces operables por todos. Use cuando diseñe navegación, interacciones, o cualquier componente que requiera input del usuario.