Egenskap Relation

`aria-owns`

Deklarerar en förälder-barn-relation i tillgänglighetsträdet när DOM-strukturen inte uttrycker den. Omföräldar de refererade elementen som barn till detta element för hjälpmedelsteknikens räkning. Ett kraftfullt verktyg — lätt att missbruka.

När ska det användas

Enbart när DOM:en inte kan placera barnen där tillgänglighetsträdet behöver dem. Det vanligaste fallet är en popup-listbox för en combobox: listan bor i slutet av <body> av z-index-skäl, men semantiskt tillhör den comboboxen. aria-owns på comboboxen, som pekar på listboxens ID, talar om för hjälpmedel att behandla listboxen som ett barn.

Om du kan strukturera om DOM:en så att barnet är en verklig ättling, gör det först. aria-owns är flyktvägen — det fungerar, men det kringgår varje authors naturliga kontroll av att markeringen matchar semantiken.

Hur det fungerar

Värdet är en mellanslags-separerad lista med element-ID:n. Tillgänglighetsträdet byggs om så att varje refererat element visas som ett barn till det ägande elementet, i angiven ordning. Den ursprungliga DOM-föräldern förlorar dessa barn i AT-vyn.

Regler för att hålla trädet giltigt:

Varje refererat ID måste finnas och vara unikt.
Ett element kan bara ägas av en förälder åt gången via aria-owns. Att äga samma element från två ställen ger odefinierat beteende.
Äg inte en förfader till dig själv. Det skapar en cirkel i AT-trädet.
Elementet måste fortfarande vara nåbart i DOM — display: none är tillåtet, men ett helt fristående element är det inte.

Vanliga fel

Att peka på ett ID som inte finns eller har tagits bort i den senaste renderingen.
Att använda aria-owns när DOM:en helt enkelt kan kapsla barnen korrekt. Tillför komplexitet utan nytta.
Två aria-owns-referenser till samma barn från olika föräldrar — AT väljer en godtyckligt.
Att glömma att fokusordningen är orelaterad till aria-owns. Tangentbordet tabbar fortfarande igenom den visuella DOM-ordningen; AT-trädet påverkar bara hur skärmläsare korsar tillgänglighetshierarkin.
Att använda aria-owns för att lösa ett fokus- eller scroll-till-vy-problem. Det gör varken det ena eller det andra.
Att äga en region som innehåller sin egen ägare — skapar en cirkel som förstör trädet.

Exempel

<!-- Combobox vars popup är portad till body för 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>

<!-- Listbox bor i slutet av body, ägs semantiskt av comboboxen -->
<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>