Core v1 · Accessibility
La accesibilidad forma parte del contrato.
Foco, teclado, estructura, estados y objetivos táctiles no son una capa posterior ni una preferencia de producto.
Invariantes
Cinco condiciones que ningún adaptador puede perder.
- Estructura y nombreLandmarks, orden de headings, controles nativos y nombres accesibles describen propósito antes que apariencia.
- Teclado y focoTodo control alcanzable conserva orden lógico, foco visible y retorno de foco cuando una capa temporal se cierra.
- Estado comprensibleError, aviso, éxito, selección y disabled se explican con texto, icono o estructura además del color.
- Tamaño y reflowLos objetivos táctiles relevantes alcanzan 44 px; contenido y controles colapsan antes de producir scroll horizontal accidental.
- Movimiento opcional
prefers-reduced-motionentrega el estado final completo sin depender de transición, autoplay ni scroll suave.
Cobertura contractual
Reglas comprobables, no una declaración genérica.
El contrato contiene 103 requisitos únicos de componentes y 34 requisitos únicos de patrones. El auditor exige al menos una regla accesible en cada entrada.
Foco
--ds-focus-width y --ds-focus-offset definen 3 px visibles en ambos modos.Touch target
--ds-control-touch-target fija 44 px como mínimo compartido.Validación finalRequiere preview real con teclado, Light/Dark, móvil, reduced motion y consola limpia.
Referencia de teclado
Interacciones mínimas por familia.
| Familia | Teclas | Resultado |
|---|---|---|
| Button | Enter o Space | Activa una acción; disabled no recibe interacción. |
| Link | Enter | Navega y conserva propósito y estado actual. |
| Tabs | Flechas, Home, End | Roving focus y asociación con el panel. |
| Menu | Flechas, Escape | Recorre opciones, cierra y devuelve el foco. |
| Dialog / Sheet | Tab, Shift+Tab, Escape | Foco inicial, contenido contenido y retorno al disparador. |
| Disclosure | Enter o Space | Expande o contrae y anuncia el estado. |
Definition of Done
Un componente no se verifica solo con contraste.
- 01
Semántica
Elemento o rol apropiado, nombre, descripción y relaciones programáticas.
- 02
Teclado
Orden, teclas esperadas, foco visible y sin trampas involuntarias.
- 03
Estados
Hover, pressed, focus, disabled, invalid, loading y selección según el contrato.
- 04
Contexto
Light/Dark, escritorio/móvil, zoom, reflow y reduced motion.
- 05
Evidencia
Demo pública, nodo Figma exacto, checks locales y resultado de QA registrados.