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.

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.

2.3 KiB Raw Blame History