10 — Accesibilidad — VOLTA
1. Objetivo
Orientar la UI a WCAG 2.2 AA en lo razonable para un vertical slice L1.
No se afirma auditoría formal certificada; se listan requisitos y checks manuales.
2. Principios aplicados
| Principio | Aplicación VOLTA |
|---|
| Perceptible | Contraste ink/chalk; lime solo con texto ink o como acento |
| Operable | Targets ≥44px en CTAs y acciones de estado; teclado en forms |
| Comprensible | Labels ES; errores claros; estados con texto |
| Robusto | HTML semántico en templates Angular; focus visible |
3. Color y contraste
| Par | Uso | Nota |
|---|
Ink #0B0B0B sobre chalk #F7F7F2 | Body | Alto contraste |
| Ink sobre white | Cards | Alto contraste |
Lime #C6F23A + ink text | CTA lime | Preferir texto ink sobre lime |
| Lime text sobre ink bg | Nav CTA / dark band | Verificar en UI real |
Muted #5C5C58 sobre chalk | Secundario | Evitar muted sobre muted |
Prohibido: transmitir estado solo con color (badges llevan label).
4. Tipografía y legibilidad
| Regla | Spec |
|---|
| Body mínimo | 16px |
| Line-height body | ≥ 1.5 relajado |
| Display | Syne; no párrafos largos en display |
| Zoom | Layout usable al 200% (responsive) |
5. Teclado y foco
| Flujo | Requisito |
|---|
| Join form | Tab order lógico; submit con Enter |
| Login | Igual |
| Inbox cards | Click + teclado si son links/botones |
| Detail actions | Botones focusables, no solo divs |
| Focus ring | Visible (ring ink o lime) |
| Control | a11y |
|---|
| Labels | Visible, asociado al control |
| Required | Indicado en UI + validación |
| Errors | Mensaje textual bajo campo o form |
| Phone optional | Marcado “(opcional)” |
| Select ClassType | Opciones con labels legibles |
| Asset | Regla |
|---|
| hero.jpg | alt descriptivo no vacío |
| Decorative | alt vacío solo si puramente decorativo |
8. Auth y áreas coach
| Tema | Nota |
|---|
| Logout | Control con nombre accesible “Salir” |
| Errores 401 | Mensaje no solo cambio de color |
| Empty/error | Heading o texto de estado legible por SR |
9. Checklist de verificación manual (QA)
| # | Check | OK? |
|---|
| A1 | Contraste H1 y body en home | |
| A2 | CTA lime con texto legible | |
| A3 | Form join usable solo teclado | |
| A4 | Badges status con texto | |
| A5 | Alt hero presente | |
| A6 | Error login anunciable | |
| A7 | Targets touch ≥44px en móvil | |
| A8 | No hay texto en imagen como única info | |
10. Deuda a11y aceptada L1
| Ítem | Clasificación |
|---|
| Auditoría axe automatizada en CI | L1+ |
| Live regions formales ARIA en todos los async | L1+ |
| Skip link | Nice-to-have |
| i18n multi-idioma | Fuera |
11. Criterio de aceptación
La demo es usable con teclado en form y login; contraste principal cumple intención AA; estados no dependen solo del color.
