Requisitos
| Área | Regla |
|---|---|
| Contraste | Todo texto legible cumple WCAG AA como mínimo (4.5:1 para cuerpo, 3:1 para grandes). |
| Navegación por teclado | Todo elemento interactivo es alcanzable con Tab y activable con Enter/Espacio. |
| Orden de lectura | El DOM coincide con el orden visual de arriba hacia abajo y de izquierda a derecha. |
| Textos alternativos | Las imágenes informativas llevan alt; las decorativas usan alt vacío. |
| Estados de foco | El anillo de foco es visible y usa --color-ring. No se oculta. |
| Mensajes de error | Los formularios indican claramente qué campo falló y cómo corregirlo. |
Contraste de color
| Muestra | Combinación | Contraste | Resultado |
|---|---|---|---|
| Texto principal #1D1E20 sobre blanco | 16,68:1 | AA y AAA | |
| Texto secundario #5D6065 sobre blanco | 6,31:1 | AA | |
| Texto secundario de tarjeta (--muted-foreground, #5D6065) sobre blanco | 6,31:1 | AA | |
| Blanco sobre #385F82 (botón primario, hover de fila, chip activo, badge en curso) | 6,71:1 | AA | |
| Enlace #385F82 sobre blanco | 6,71:1 | AA | |
| Blanco sobre #1D1E20 (tarjetas institucionales) | 16,68:1 | AA y AAA | |
| Blanco sobre #3A3B3D (final del degradado institucional) | 11,21:1 | AA y AAA | |
| #1D1E20 sobre #E4ECF3 (fila seleccionada) | 13,97:1 | AA y AAA | |
| #1D1E20 sobre #FCEAEC (urgencias) | 14,39:1 | AA y AAA | |
| Celeste #6493B5 sobre blanco (íconos, foco) | 3,29:1 | Solo elementos gráficos (mínimo 3:1) | |
| Blanco sobre celeste #6493B5 | 3,29:1 | No usar para textoNo cumple para texto |
Por eso el texto blanco nunca va sobre #6493B5: se usa --color-accent-strong (#385F82). El celeste queda para íconos, bordes de foco y elementos gráficos.
Teclado y lectores de pantalla
| Componente | Qué está resuelto |
|---|---|
| Botón de acción | <button> o <a> nativos; disabled nativo o aria-disabled. |
| Elemento de lista | Fila clicable con role="button", Tab, Enter y Espacio; foco con anillo interior. |
| Pestañas | tablist/tab, aria-selected, flechas, Inicio y Fin; tabindex móvil. |
| Tabla | Roles table/row/columnheader/cell; filas clicables con aria-expanded o aria-selected. |
| Tarjeta | Con onClick: role="button", tabIndex 0, Enter y Espacio. |
| Buscador | aria-label en el campo; Enter busca; botón solo ícono con etiqueta. |
| Aviso de sistema | role="status" y aria-live="polite". |
| Flecha de carrusel | ariaLabel obligatorio. |
Pendientes para TI
Botón de tarjeta — aviso externo
«Saldrás de la Intranet» va solo en el atributo title: no aparece con teclado ni lo anuncian todos los lectores.
Corrección sugerida: Agregar el texto como contenido visible u oculto accesible (sr-only) dentro del botón.
Acordeón — relación encabezado/panel
Los encabezados tienen aria-expanded, pero no aria-controls ni región asociada.
Corrección sugerida: Dar id al panel, aria-controls en el botón y role="region" con aria-labelledby.
Buscador — borde del campo
El borde del campo (#C7C2BA sobre blanco) tiene 1,77:1; para identificar un control se pide 3:1.
Corrección sugerida: Oscurecer el borde del campo (por ejemplo, a un gris con 3:1 o más) o reforzarlo con fondo.