Proprietà Relazione

`aria-controls`

Indica l'elemento o gli elementi la cui presenza o contenuto è governato da questo controllo. Abbinamenti comuni: un tab controlla il proprio tabpanel, un pulsante di disclosure controlla una region rivelata. Il supporto tra le tecnologie assistive è disomogeneo — si utilizzi con parsimonia.

Quando utilizzarlo

Su un controllo la cui attivazione modifica un elemento diverso nella pagina — gli esempi canonici sono la relazione tab → tabpanel e un pulsante di disclosure → pannello rivelato. Indica alla tecnologia assistiva che «operare su questo widget influenzerà quell’altro elemento lì», offrendo agli utenti avanzati un modo per passare dal controllo all’elemento controllato.

Non lo si utilizzi per ogni interazione. La maggior parte dei gestori di clic non ha bisogno di aria-controls; lo si riservi ai casi in cui l’elemento controllato è genuinamente separato nel DOM e l’utente trae vantaggio dal conoscere la connessione.

Come si comporta

Il valore è un elenco di ID di elementi separati da spazio per l’elemento o gli elementi controllati. L’elemento controllato deve esistere nel DOM nel momento in cui la relazione viene interrogata — se si monta il tabpanel solo quando il tab viene attivato, il riferimento rimane sospeso per gli utenti di tecnologia assistiva visiva fino a quando il pannello non appare.

Il supporto è il punto debole. JAWS espone una scorciatoia «vai all’elemento controllato», ma VoiceOver e NVDA ignorano in gran parte l’attributo al di fuori di pattern specifici (tab, combobox). Ciò significa che aria-controls è raramente l’elemento che rende accessibile una funzionalità — è un miglioramento sopra ruoli corretti, gestione del focus e aria-expanded. Si costruisca il pattern correttamente prima; si aggiunga aria-controls per ultimo.

Errori comuni

Trattare aria-controls come sostituto dello spostamento del focus. Un pulsante «Vai ai risultati» deve spostare il focus all’attivazione; aggiungere aria-controls non produce questo effetto.
Puntare a un elemento che non è ancora nel DOM. Il riferimento non si risolve in nulla finché il pannello non viene renderizzato.
Dimenticare di impostare anche aria-expanded su un pulsante di disclosure. aria-controls dice «influenzo quell’elemento»; aria-expanded dice «e attualmente è aperto / chiuso».
Utilizzare aria-controls su un select personalizzato per puntare a una lista di opzioni — il pattern corretto lì è role="combobox" più aria-controls sull’input, con aria-activedescendant per l’opzione evidenziata.
Aggiungere aria-controls su ogni pulsante «per completezza». È rumore; niente dipende da esso.

Esempio

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  Qual è la vostra politica di rimborso?
</button>
<div id="faq-1-answer" hidden>
  I rimborsi vengono elaborati entro 14 giorni …
</div>