Propiedad Relación

`aria-owns`

Declara una relación padre-hijo en el árbol de accesibilidad cuando la estructura del DOM no la expresa. Reasigna los elementos referenciados como hijos de este elemento para la tecnología de apoyo. Es una herramienta potente — fácil de usar incorrectamente.

Cuándo utilizarlo

Solo cuando el DOM no puede ubicar los elementos hijos donde el árbol de accesibilidad los necesita. El caso más frecuente es un listbox emergente para un combobox: el listbox se ubica al final de <body> por razones de z-index, pero semánticamente pertenece al combobox. Al usar aria-owns en el combobox apuntando al id del listbox, se indica a la tecnología de apoyo que lo trate como un elemento hijo.

Si es posible reestructurar el DOM de modo que el hijo sea un descendiente real, esa es la opción recomendada. aria-owns es la vía de escape — funciona, pero elude la comprobación intuitiva de que el marcado coincide con la semántica.

Comportamiento

El valor es una lista de IDs de elementos separados por espacios. El árbol de accesibilidad se reconstruye de modo que cada elemento referenciado aparezca como hijo del elemento propietario, en el orden indicado. El elemento padre original en el DOM pierde esos hijos en la vista del árbol de accesibilidad.

Reglas para mantener el árbol válido:

Cada ID referenciado debe existir y ser único.
Un elemento solo puede ser referenciado por aria-owns desde un único padre a la vez. Hacer que dos elementos se apropien del mismo elemento produce un comportamiento indefinido.
No se debe apuntar a un ancestro del propio elemento, ya que eso crea un ciclo en el árbol de accesibilidad.
El elemento debe ser accesible en el DOM — se permite display: none, pero un elemento completamente desvinculado no es válido.

Errores frecuentes

Apuntar a un ID que no existe o que ha sido eliminado en el último renderizado.
Usar aria-owns cuando el DOM podría simplemente anidar los hijos correctamente. Añade complejidad sin beneficio.
Dos referencias aria-owns al mismo hijo desde diferentes padres — la tecnología de apoyo escoge uno de forma arbitraria.
Olvidar que el orden de foco no está relacionado con aria-owns. El teclado sigue avanzando según el orden visual del DOM; el árbol de accesibilidad solo afecta al modo en que los lectores de pantalla recorren la jerarquía de accesibilidad.
Recurrir a aria-owns para resolver un problema de foco o de desplazamiento a la vista. No sirve para ninguno de los dos.
Referenciar una región que contiene a su propio propietario — crea un ciclo y rompe el árbol.

Ejemplo

<!-- Combobox cuyo menú emergente se ha trasladado a body por razones de contexto de apilamiento -->
<div
  role="combobox"
  id="city-cb"
  aria-haspopup="listbox"
  aria-expanded="true"
  aria-owns="city-listbox"
>
  <input type="text" aria-controls="city-listbox" aria-activedescendant="city-opt-2">
</div>

<!-- El listbox se encuentra al final del body, pero semánticamente pertenece al combobox -->
<ul role="listbox" id="city-listbox">
  <li role="option" id="city-opt-1">London</li>
  <li role="option" id="city-opt-2" aria-selected="true">Paris</li>
</ul>