Ominaisuus Suhde

`aria-owns`

Ilmaisee vanhempi-lapsi-suhteen saavutettavuuspuussa, kun DOM-rakenne ei sitä ilmaise. Uudelleensijoittaa viitatut elementit tämän elementin lapsiksi avustavaa teknologiaa varten. Tehokas työkalu — helppo väärinkäyttää.

Milloin käyttää

Vain silloin, kun DOM ei voi sijoittaa lapsia sinne, minne saavutettavuuspuu niitä tarvitsee. Yleisin tapaus on comboboxin ponnahduslistbox: luettelo sijaitsee <body>-elementin lopussa z-index-syistä, mutta semanttisesti se kuuluu comboboxiin. aria-owns comboboxissa, osoittaen listboxin ID:hen, kertoo avustavalle teknologialle käsitellä listboxia sen lapsena.

Jos DOM voidaan rakentaa niin, että lapsi on todellinen jälkeläinen, tee se ensin. aria-owns on poistumistie — se toimii, mutta ohittaa jokaisen kehittäjän luonnollisen tarkistuksen, että merkintä vastaa semantiikkaa.

Toimintatapa

Arvo on välilyönnillä eroteltu lista elementtien ID:istä. Saavutettavuuspuu rakentuu uudelleen siten, että jokainen viitattu elementti näkyy omistavan elementin lapsena, luetellussa järjestyksessä. Alkuperäinen DOM-ylätaso menettää nämä lapset saavutettavuuspuunäkymässä.

Säännöt puun pitämiseksi kelvollisena:

Jokaisen viitatun ID:n täytyy olla olemassa ja yksilöllinen.
Elementtiin voi viitata aria-owns-attribuutilla vain yksi ylätaso kerrallaan. Saman elementin omistaminen kahdesta paikasta tuottaa määrittelemätöntä toimintaa.
Älä omista itsesi esi-isää. Se luo syklin saavutettavuuspuussa.
Elementin täytyy olla edelleen tavoitettavissa DOM:ssa — display: none on sallittu, mutta täysin irrotettu elementti ei ole.

Yleiset virheet

Osoittaminen ID:hen, joka ei ole olemassa tai on poistettu viimeisimmässä renderöinnissä.
aria-owns-käyttö silloin, kun DOM voisi yksinkertaisesti sisältää lapset oikein. Lisää monimutkaisuutta ilman hyötyä.
Kaksi aria-owns-viittausta samaan lapseen eri ylätasoista — avustava teknologia valitsee yhden mielivaltaisesti.
Unohtaminen, että kohdistusjärjestys ei liity aria-owns-attribuuttiin. Näppäimistö siirtyy edelleen visuaalisen DOM-järjestyksen mukaan; saavutettavuuspuu vaikuttaa vain siihen, miten ruudunlukuohjelmat kulkevat saavutettavuushierarkiassa.
aria-owns-käyttö kohdistus- tai vieritysnäkymäongelmien ratkaisemiseen. Se ei tee kumpaakaan.
Alueeseen kuuluvan omistajan omistaminen — luo syklin, rikkoo puun.

Esimerkki

<!-- Combobox jonka ponnahdusikkuna on siirretty bodyyn pinontakontekstin vuoksi -->
<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 sijaitsee bodyssa, omistettu semanttisesti comboboxin kautta -->
<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>