Propiedad Relación

`aria-controls`

Identifica el elemento o elementos cuya presencia o contenido gobierna este control. Pares habituales: una pestaña controla su tabpanel, un botón de revelación controla una región desplegada. La compatibilidad con las tecnologías de apoyo es irregular — se recomienda usarlo con moderación.

Cuándo utilizarlo

En un control cuya activación modifica un elemento distinto en la página — los ejemplos canónicos son la relación pestaña → tabpanel y un botón de revelación → panel desplegado. Indica a las tecnologías de apoyo que «operar este widget afectará a aquel otro», ofreciendo a los usuarios avanzados una forma de saltar del control al elemento controlado.

No debe usarse de forma indiscriminada en cada interacción. La mayoría de los manejadores de clic no necesitan aria-controls; se reserva para los casos en que el elemento controlado está genuinamente separado en el DOM y el usuario se beneficia de conocer la conexión.

Cómo se comporta

El valor es una lista de identificadores de elementos separados por espacios para el elemento o elementos controlados. El elemento controlado debe existir en el DOM en el momento en que se consulta la relación — si el tabpanel solo se monta cuando se activa la pestaña, la referencia queda sin resolver para los usuarios de tecnologías de apoyo hasta que el panel aparece.

La compatibilidad es el punto débil. JAWS expone un atajo para «ir al elemento controlado», pero VoiceOver y NVDA ignoran en gran medida el atributo fuera de patrones específicos (pestañas, comboboxes). Esto significa que aria-controls rara vez es lo que hace accesible una funcionalidad — es una mejora sobre roles correctos, gestión de foco y aria-expanded. Primero se construye el patrón correctamente; aria-controls se añade al final.

Errores frecuentes

Tratar aria-controls como sustituto del desplazamiento del foco. Un botón «Ir a resultados» debe mover el foco al activarse; añadir aria-controls no realiza esa acción.
Apuntar a un elemento que todavía no está en el DOM. La referencia no se resuelve hasta que el panel se renderiza.
Olvidar establecer también aria-expanded en un botón de revelación. aria-controls dice «influyo en ese elemento»; aria-expanded dice «y actualmente está abierto / cerrado».
Usar aria-controls en un selector personalizado para apuntar a una lista de opciones — el patrón correcto es role="combobox" más aria-controls en el campo de entrada, con aria-activedescendant para la opción resaltada.
Añadir aria-controls en todos los botones «por completitud». Solo genera ruido; nada depende de él.

Ejemplo

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  ¿Cuál es su política de devoluciones?
</button>
<div id="faq-1-answer" hidden>
  Las devoluciones se procesan en un plazo de 14 días …
</div>