44 lines
2.5 KiB
Markdown
44 lines
2.5 KiB
Markdown
# Accesibilidad
|
|
|
|
Objetivo: WCAG 2.2 nivel AA para los contratos entregados.
|
|
|
|
## Formularios
|
|
|
|
- Labels vinculados con `for`/`id` generado o explícito.
|
|
- Descripciones y errores unidos mediante `aria-describedby`.
|
|
- Los errores establecen `aria-invalid`; la aplicación decide cuándo anunciarlos dinámicamente.
|
|
- Checkbox, radio y select conservan semántica HTML nativa.
|
|
- `required` y `disabled` se transmiten al control real.
|
|
- El switch expone `role="switch"` y `aria-checked` porque representa encendido/apagado, no selección de formulario genérica.
|
|
|
|
## Teclado y foco
|
|
|
|
- El foco usa un contorno de 2 px con separación de 2 px.
|
|
- Tabs: Tab entra en el tab activo; flechas cambian a la pestaña anterior/siguiente; Home y End van a extremos; tabs deshabilitadas se omiten.
|
|
- Dialog: `showModal()` proporciona top layer, fondo inerte, contención y Escape nativos. Al cerrar se intenta restaurar el foco previo.
|
|
- Todos los botones tienen una altura mínima razonable; `DsIconButton` exige un `label` accesible.
|
|
- La lista ordenable ofrece botones subir/bajar y anuncia la nueva posición; arrastrar nunca es la única forma de completar la operación.
|
|
- El árbol lógico usa controles nativos con nombres accesibles y conserva una jerarquía de listas y grupos comprensible sin presentación visual.
|
|
|
|
## Estados
|
|
|
|
- Loading en botones conserva el texto, usa `aria-busy` y deshabilita interacciones duplicadas.
|
|
- `DsProgressBar` publica valor, mínimo y máximo.
|
|
- Alertas estáticas no usan live regions por defecto para evitar anuncios al cargar una página. `live` debe activarse solo cuando el mensaje aparece como resultado de una acción.
|
|
- Los iconos decorativos se ocultan con `aria-hidden`.
|
|
- Skeleton es decorativo; el contenedor que lo usa debe proporcionar el estado textual cuando sea necesario.
|
|
|
|
## Movimiento y contraste
|
|
|
|
`prefers-reduced-motion: reduce` reduce animaciones y transiciones. La paleta usa texto slate oscuro sobre fondos claros, blanco sobre acciones sky oscuras y variantes de estado con texto oscuro. Los indicadores de foco no dependen de cambios de color internos.
|
|
|
|
## Pruebas incluidas
|
|
|
|
- Asociación label/control, descripción, error y `v-model`.
|
|
- Disabled y loading.
|
|
- Navegación de Tabs con teclado.
|
|
- Apertura, nombre y cancelación de Dialog.
|
|
- Presencia de exportaciones públicas.
|
|
|
|
Limitación: jsdom permite verificar contratos DOM, pero no sustituye pruebas manuales con lector de pantalla, zoom al 200 %, alto contraste ni navegación real en Safari/iOS. Estas comprobaciones forman parte de la revisión previa a una publicación estable.
|