Color, Hover y Espaciado

El color, los efectos hover y el espaciado tienen un impacto directo en la accesibilidad de cualquier interfaz.

Principios del Color

HTML — Estado sin depender solo del color 
<!-- ✗ Incorrecto: solo color rojo -->
<span style="color:red">Campo obligatorio</span>

<!-- ✓ Correcto: color + ícono + texto -->
<span class="error" role="alert">
  <span aria-hidden="true">⚠️</span>
  Error: el correo no tiene formato válido.
</span>
  • Evitar combinaciones para daltonismo: rojo-verde, azul-amarillo.
  • Usar Coblis o Color Oracle para simular daltonismo.
  • Consultar sección "Uso del Color Accesible" del Manual de Identidad Univalle.
  • Revisar Who Can Use para revisar contraste y deficiencias visuales

Cambios con Hover

Los cambios activados solo por hover son inaccesibles: no funcionan con teclado, lectores de pantalla ni táctil.

CSS — Hover permitido vs. prohibido 
/* ✓ Permitido — efectos visuales */
.card:hover {{
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}}

/* ✗ Prohibido — contenido crítico solo en hover */
.card:hover .info {{
  display: block;  /* Inaccesible */
}}

/* ✓ Alternativa correcta — por estado */
.card[aria-expanded="true"] .info {{
  display: block;
}}

Espaciado Accesible

  • Botones y enlaces: mínimo 44 × 44 px (AAA) o 24 × 24 px (AA)
  • Separación mínima entre clicables: 8 px
  • En móviles: 48 × 48 px recomendado
CSS — Botones accesibles 
.btn {{
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
  margin: 8px 4px;
}}
.button-group {{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}}