10 — Accesibilidad — RELE
1. Objetivo
Orientar el vertical slice L2 a WCAG 2.2 AA en lo razonable para una app daily de portfolio: contraste, teclado, labels, estados no solo-color, y mensajes de error.
No se declara certificación formal AA. Esto es checklist de diseño e implementación.
2. Principios aplicados
| Principio | Aplicación en RELE |
|---|
| Perceptible | Contraste navy/fog; badges con texto; alt en hero |
| Operable | Targets ≥ 44px en CTAs; formularios nativos |
| Comprensible | Labels visibles; errores en texto; estados con nombre |
| Robusto | HTML semántico razonable; Angular standalone |
3. Contraste
| Par | Uso | Meta |
|---|
#0C2340 sobre #EEF1F4 | Texto body | ≥ 4.5:1 |
#FFFFFF sobre #2F8F8C | Botón sea | ≥ 4.5:1 |
#FFFFFF sobre #0C2340 | Botón ink / login panel | ≥ 4.5:1 |
#FFFFFF sobre #E07A5F | Botón coral | ≥ 4.5:1 |
#5A6B7D sobre fog | Muted | Verificar; subir a ink si falla |
Acción: si muted falla en labels pequeños, usar ink o subir peso.
4. Teclado y foco
| Control | Expectativa |
|---|
| Links nav | Tab order lógico logo → entrar → CTA |
| Login | email → password → submit |
| Lista | cada card es link; Tab entre items |
| Form nueva | campos en orden DOM → submit |
| Detalle ADVISOR | nota → REVIEWED → FLAGGED |
Mejora L2+: focus ring visible (focus-visible:ring-2 ring-sea) en todos los interactivos.
| Requisito | v1 |
|---|
| Label asociado | <label> con span + input (implícito wrapping) |
| required | atributos HTML en login |
| Errores | texto coral bajo el form |
| type email/password | sí |
| No placeholder-only | labels siempre visibles |
6. Color y estado
| Riesgo | Mitigación |
|---|
| Solo color para status | Badge incluye texto del enum |
| Coral = error y flag | Contexto de pantalla distinto + texto |
| Stats “abiertas” en coral | Label ABIERTAS presente |
| Elemento | a11y |
|---|
| Hero home | alt="Contador y entorno doméstico de energía" |
| Decorative | no hay iconos vacíos críticos |
8. Estructura semántica
| Pantalla | Estructura |
|---|
| Home | header + sections + headings jerárquicos |
| Login | headings h1/h2; form |
| Lista | header + main + h1 + lista ul/li |
| Detalle | main + h1 periodo |
9. Auth y timeouts
- No hay timeout de sesión UI en v1; JWT expira según config server.
- Logout explícito limpia storage.
- Mensajes de 401 en flujos protegidos: redirect login (soft).
10. Lectores de pantalla (notas)
| Área | Recomendación |
|---|
| Stats | Preferir texto “Total 5” legible; evitar solo dígitos sueltos sin label |
| Badges | El texto del status es suficiente |
| Botones estado | “Marcar REVIEWED” es verboso y correcto |
11. Mobile
| Requisito | v1 |
|---|
| Touch target | botones rounded-full con py suficiente |
| Zoom | no bloquear scale en viewport meta de forma hostil |
| Orientación | layout apilado ok |
12. Matriz de pruebas a11y (manual)
| # | Prueba | Criterio pass |
|---|
| A1 | Tab por home y login | Foco no se pierde |
| A2 | Login solo teclado | Submit OK |
| A3 | Zoom 200% lista | Sin solapamiento crítico |
| A4 | Contraste botones | Texto legible |
| A5 | Empty/error | Mensaje en texto, no solo color |
| A6 | Badge status | Nombre del estado anunciable |
13. Deuda a11y aceptada (no bloquea L2)
| Ítem | Prioridad |
|---|
| Focus rings sistemáticos | L2+ |
| Live regions al patch status | L2+ |
| Route guards + anuncios de página | L2+ |
| Auditoría axe automatizada en CI | L2+ |
| i18n de enums a español | L2+ |
14. Criterio de aceptación a11y v1
- No hay información crítica solo por color.
- Hero tiene alt descriptivo.
- Forms tienen labels visibles.
- Errores de login y lista son textuales.
- CTAs principales son alcanzables por teclado.
