TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Ciertos roles ARIA avanzados requieren obligatoriamente un conjunto de atributos para funcionar. Si defines un elemento como role="slider", debes proveer aria-valuenow, aria-valuemin y aria-valuemax. Si omites uno, el componente queda inutilizado.
La interdependencia de los roles de rango
Cuando un lector de pantalla encuentra un control de rango (como un control de volumen o precio), necesita establecer un contexto matemático para anunciarle a la persona usuaria en qué parte de la escala se encuentra. Si faltan los límites mínimos o máximos (WCAG 4.1.2), la interacción se vuelve riesgosa e impredecible.
El patrón erróneo: Código Accesible Deficiente
El elemento declara su tipo (slider), pero carece del modelo de datos para operar.
<!-- MAL: Rol presente pero atributos matemáticos ausentes -->
<div role="slider" aria-label="Volumen" tabindex="0">
<div class="thumb" style="left: 50%;"></div>
</div>La Solución Accesible: Código Recomendado
Inyectar y mantener actualizados mediante Javascript todos los atributos obligatorios exigidos por la especificación de ese rol.
<!-- BIEN: Contrato ARIA completado exitosamente -->
<div role="slider"
aria-label="Volumen"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
tabindex="0">
<div class="thumb" style="left: 50%;"></div>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA activo, tabular hasta el componente ARIA personalizado. Verificar que el lector de pantalla anuncie correctamente el rol, nombre y estado actual. Si alguno de estos tres elementos falta o es incorrecto, la persona usuaria no podrá operar el componente de forma predecible.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 4.1.2.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas aria-* y *-name detectan violaciones del Criterio 4.1.2 (Nombre, Función, Valor). WAVE marca controles sin nombre accesible. Limitación: La sincronización de estados dinámicos (JS) no siempre es verificable de forma automatizada.
