wcag-perceivable

vjrivmon's avatarfrom vjrivmon

Principio 1 de WCAG - contenido perceptible por todos los usuarios. Use cuando diseñe contenido multimedia, imágenes, o cualquier información visual o auditiva.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 7, 2026
[Creative Quality Checks]

When & Why to Use This Skill

This Claude skill provides comprehensive guidance and actionable checklists for implementing WCAG Principle 1: Perceivable. It empowers designers and developers to ensure that digital content—including images, multimedia, and user interface components—is presented in a way that all users, including those with visual or auditory impairments, can perceive it through various senses. By following these standards, teams can improve web accessibility, enhance user experience, and meet international compliance requirements.

Use Cases

  • Generating descriptive and concise alt text for complex data visualizations, informative images, and decorative elements.
  • Auditing UI designs for color contrast compliance (AA and AAA levels) to ensure text readability for users with low vision.
  • Structuring HTML semantically with correct headings and lists to ensure content is adaptable and navigable by screen readers.
  • Planning accessibility requirements for time-based media, such as synchronized captions for video and transcripts for audio content.
  • Reviewing form designs to ensure labels are correctly associated and error messages are distinguishable by more than just color.
namewcag-perceivable
authorux-ui-skills
version"1.0"
categoryaccessibility

WCAG: Perceptible

Resumen

El primer principio de WCAG establece que la información y los componentes de la interfaz deben ser presentados de manera que los usuarios puedan percibirlos. No puede ser invisible a todos sus sentidos.

Origen

  • Organización: W3C (World Wide Web Consortium)
  • Documento: Web Content Accessibility Guidelines
  • Versión actual: WCAG 2.1 / 2.2
  • Niveles: A (mínimo), AA (recomendado), AAA (óptimo)

Directrices

1.1 Alternativas de Texto

  • Todas las imágenes deben tener alt text
  • Imágenes decorativas: alt=""
  • Imágenes informativas: descripción del contenido
  • Imágenes complejas: descripción extendida
<!-- Informativa -->
<img src="chart.png" alt="Ventas Q1 2024: $1.2M, +15% vs Q1 2023" />

<!-- Decorativa -->
<img src="divider.png" alt="" role="presentation" />

<!-- Compleja -->
<img src="diagram.png" alt="Diagrama de flujo" aria-describedby="desc" />
<div id="desc">Descripción completa del diagrama...</div>

1.2 Medios Basados en Tiempo

  • Video: captions y transcripciones
  • Audio: transcripciones
  • Video en vivo: captions en tiempo real
  • Audio descripción para ciegos

1.3 Adaptable

  • Contenido debe poder presentarse de diferentes formas
  • Estructura semántica correcta (headings, lists, tables)
  • Secuencia de lectura significativa
  • No depender solo de características sensoriales
<!-- Malo -->
<div class="big-text">Título</div>

<!-- Bueno -->
<h1>Título</h1>

1.4 Distinguible

  • Contraste de color suficiente
  • No usar solo color para transmitir información
  • Audio controlable por el usuario
  • Texto redimensionable
  • Texto como texto, no imágenes

Criterios de Éxito Clave

Contraste de Color

  • AA: 4.5:1 para texto normal, 3:1 para texto grande
  • AAA: 7:1 para texto normal, 4.5:1 para texto grande
  • Texto grande: ≥18pt o ≥14pt bold

Herramientas de Verificación

  • WebAIM Contrast Checker
  • axe DevTools
  • WAVE
  • Lighthouse

Aplicación Práctica

Imágenes

  • Alt text descriptivo y conciso
  • Describir función, no apariencia
  • "Botón de búsqueda" no "Lupa azul"
  • Evitar "imagen de..."

Video

  • Captions sincronizados
  • Transcripción completa
  • Audio descripción cuando necesario
  • Controles accesibles

Formularios

  • Labels asociados a inputs
  • Errores no solo por color
  • Instrucciones claras
  • Mensajes de error descriptivos

Color

  • Indicadores adicionales (iconos, texto)
  • Patrones además de colores en gráficos
  • No "haga click en el botón rojo"

Ejemplos

  • YouTube: Captions automáticos y manuales
  • GitHub: Alt text requerido en issues
  • Stripe Docs: Excelente contraste y estructura
  • Gov.uk: Modelo de accesibilidad

Anti-patterns

  • ❌ Imágenes de texto
  • ❌ Videos sin captions
  • ❌ Solo color para indicar estado
  • ❌ Contraste insuficiente
  • ❌ Alt text genérico ("imagen" o vacío incorrecto)

Métricas

  • Automated Audit Score: Lighthouse, axe
  • Manual Review: Checklist WCAG
  • Contrast Ratio: Todas las combinaciones de color
  • Screen Reader Testing: Navegación con NVDA/VoiceOver

Principios Relacionados

  • [[wcag-operable]] - Siguiente principio WCAG
  • [[universal-design]] - Diseño para todos
  • [[inclusive-design]] - Considerar diversidad

Referencias