Proprietà Relazione

`aria-owns`

Dichiara una relazione genitore-figlio nell'albero di accessibilità quando la struttura del DOM non la esprime. Rende gli elementi referenziati figli di quello corrente ai fini dell'AT. È uno strumento avanzato — facile da usare in modo errato.

Quando usarlo

Solo quando il DOM non può collocare i figli dove l’albero di accessibilità ne ha bisogno. Il caso più comune è un listbox popup per un combobox: la lista si trova in fondo al <body> per ragioni di z-index, ma semanticamente appartiene al combobox. aria-owns sul combobox, che punta all’ID del listbox, indica all’AT di trattare il listbox come un figlio.

Se è possibile ristrutturare il DOM in modo che il figlio sia un discendente reale, è preferibile farlo. aria-owns è la via d’uscita di emergenza — funziona, ma bypassa ogni naturale verifica di coerenza tra markup e semantica.

Come funziona

Il valore è un elenco di ID di elementi separati da spazi. L’albero di accessibilità viene ricostruito in modo che ogni elemento referenziato appaia come figlio dell’elemento proprietario, nell’ordine indicato. Il genitore DOM originale perde quei figli nella vista dell’AT.

Regole per mantenere l’albero valido:

Ogni ID referenziato deve esistere ed essere univoco.
Un elemento può essere referenziato da aria-owns solo da un genitore alla volta. Referenziare lo stesso elemento da due posti produce un comportamento non definito.
Non si dichiari come figlio un antenato di se stessi. Ciò crea un ciclo nell’albero AT.
L’elemento deve essere ancora raggiungibile nel DOM — display: none è consentito, ma un elemento completamente staccato non lo è.

Errori comuni

Puntare a un ID che non esiste o che è stato rimosso nell’ultimo render.
Usare aria-owns quando il DOM potrebbe semplicemente annidare i figli correttamente. Aggiunge complessità senza alcun beneficio.
Due riferimenti aria-owns per lo stesso figlio da genitori diversi — l’AT ne sceglie uno arbitrariamente.
Dimenticare che l’ordine di focus non è correlato ad aria-owns. La tastiera continua a passare attraverso l’ordine visivo del DOM; l’albero AT influisce solo su come gli screen reader attraversano la gerarchia di accessibilità.
Ricorrere ad aria-owns per risolvere un problema di focus o di scroll-into-view. Non risolve né l’uno né l’altro.
Dichiarare come figlio una regione che contiene il proprio proprietario — crea un ciclo e rompe l’albero.

Esempio

<!-- Combobox il cui popup è portaled al body per ragioni di stacking context -->
<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>

<!-- Il listbox si trova in fondo al body, di proprietà semantica del 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>