10 — Accesibilidad — SURCO
1. Objetivo
Cumplir un nivel WCAG 2.2 AA razonable en el vertical slice web, priorizando:
- Contraste de texto y CTAs
- Navegación por teclado
- Nombres accesibles en controles
- Estados no solo por color
- Formularios con errores comprensibles
Contexto de uso: móvil en exterior (técnico) y desktop (planificación). El brillo solar y guantes no se resuelven del todo en web, pero se mitigan con targets grandes y contraste alto leaf/bone.
2. Alcance
| En alcance v1 | Fuera / parcial |
|---|
| Home, login, lista, detalle, new | Lector de pantalla exhaustivo QA formal |
| Contraste tokens marca | Modo alto contraste OS dedicado |
| Focus visible navegador | Skip links multi-landmark complejos |
| Labels de form | i18n multi-idioma |
3. Contraste
| Par | Intención |
|---|
Leaf #3D5C3A sobre blanco | CTAs y badges — verificar ≥4.5:1 en texto small |
| Ink sobre bone | Body text |
| Straw sobre bone | Solo eyebrows/meta; si falla, oscurecer straw o usar leaf |
| White sobre primary | Texto de botón |
| red-700 sobre bone | Errores |
Regla: si un acento straw no alcanza contraste en body, no usarlo para texto < 18px esencial.
4. Teclado y foco
| Control | Comportamiento esperado |
|---|
| Enlaces nav | Tab order lógico header → main |
| Botones | Activables con Enter/Espacio |
| Forms | Tab entre campos; submit con Enter |
| Cards tarea | Son <a> — focuseables |
| Salir | button focuseable |
Focus visible: outline del navegador o ring Tailwind; no outline: none global.
5. Semántica y estructura
| Pantalla | Landmarks |
|---|
| Home | header, secciones, footer |
| App | header + main |
| Títulos | Un H1 por vista; H2 en cards de lista OK |
Imágenes:
- Hero:
alt="Parcelas agrícolas al atardecer"
- Decorativas: vacías solo si no aportan (evitar en v1)
| Requisito | Aplicación |
|---|
| Labels visibles | Cada input con label o aria-label |
| Errores en texto | No solo borde rojo |
| Password | type password; no autocomplete off injustificado |
| Fecha | input date/datetime usable con teclado |
7. Color y estado
| Status | Texto obligatorio | Color de apoyo |
|---|
| Pendiente / Activa / Hecha / Cancelada | Sí (label) | Badge soft |
| Error red | Mensaje textual | color danger |
| Rol | Badge FARMER/TECHNICIAN | soft primary |
8. Touch y móvil de campo
| Spec | Valor |
|---|
| Target mínimo CTA | 44×44 px |
| Espacio entre acciones | ≥8 px |
| Lista | Toda la card clicable (área amplia) |
| Zoom | No bloquear pinch-zoom (user-scalable no desactivado) |
- Sin autoplay de vídeo.
- Sin animaciones esenciales para entender estado.
- Respeto futuro a
prefers-reduced-motion si se añaden transitions largas.
10. Pruebas recomendadas
| Prueba | Herramienta | Criterio pass |
|---|
| Contraste | DevTools / axe | 0 críticos en home+login+form |
| Teclado | Manual | Completar login y crear tarea sin ratón |
| SR spot-check | VoiceOver | Labels de form anunciados |
| Zoom 200% | Browser | Sin solapamientos graves |
11. Criterios de aceptación
- Login completible solo con teclado.
- Mensajes de error legibles y en español.
- Estados de tarea con texto, no solo color.
- Hero con alt no vacío.
- No hay
outline: none sin reemplazo de foco.
