aria-activedescendant

Käyttötilanteet

Komposiittisäätimessä, jossa halutaan yksi tabbipysähdys mutta käyttäjän täytyy silti voida siirtää korostus monien kohteiden välillä — kombobox-syöte listbox-ponnahduksen kanssa, yhden tabbipysähdyksen listbox, treegrid, datagrid. DOM-kohdistus pysyy säiliöelementillä (syötteessä, listboxissa tai gridissä). Kun käyttäjä painaa nuolinäppäimiä, aria-activedescendant päivitetään uuden korostetun lapsen ID:ksi, ja avustava teknologia ilmoittaa sen kuin kohdistus olisi siirtynyt sinne.

Vaihtoehtoinen malli on kiertävä tabindex: DOM-kohdistus siirretään aidosti ja tabindex-arvoja säädetään. Valitse aria-activedescendant, kun säiliöllä pysyvä selainkohdistus yksinkertaistaa koodia — tyypillisesti silloin, kun säiliö on myös se, johon käyttäjä kirjoittaa tai johon näppäinoikotiet kiinnitetään.

Toimintaperiaate

Arvo on yksi elementin ID — ei lista. Viitatun elementin täytyy olla aria-activedescendant-attribuutin sisältävän säiliön jälkeläinen (tai omistettu aria-owns-attribuutilla). Arvon muuttuessa virtuaalisen kohdistuksen paikka saavutettavuuspuussa siirtyy kyseiselle elementille, ja avustava teknologia ilmoittaa sen nimen, roolin ja tilan.

Kaksi asiaa jäävät kehittäjän vastuulle:

• Visuaalinen tyyli. Avustava teknologia tietää virtuaalisen kohdistuksen sijainnin, mutta selain ei piirrä kohdistusrengasta jälkeläiselle. Lisää oma korostustyyli — usein CSS-luokka, jota vaihdetaan synkronisesti.
• Vieritys. Jos aktiivinen jälkeläinen on näkymän ulkopuolella, se täytyy vierittää näkyviin; selain ei tee tätä automaattisesti.

Kun ponnahdus sulkeutuu tai säätimeltä poistetaan kohdistus, tyhjennä aria-activedescendant tyhjäksi merkkijonoksi tai poista attribuutti.

Yleiset virheet

• Osoitetaan ID:hen, joka ei ole jälkeläinen (eikä omistettu aria-owns-attribuutilla). Avustava teknologia jättää viittauksen huomiotta.
• Mallien sekoittaminen: sovelletaan sekä tabindex="0" jälkeläiselle että asetetaan aria-activedescendant säiliölle. Valitse yksi kohdistusstrategia; molempien käyttö aiheuttaa ristiriidan.
• Visuaalisen korostuksen päivittämättä jättäminen attribuutin muuttuessa — näkevät käyttäjät eivät havaitse liikettä, vaikka avustavaa teknologiaa käyttävät kuulevat sen.
• Vanhentuneen ID:n jättäminen, kun vaihtoehto poistetaan listalta (esim. suodatetun komboboxin tulokset).
• aria-activedescendant-päivitys hiiren hover-tapahtumalla. Attribuutin tulisi seurata vain näppäimistöohjattua aktiivista kohdetta.
• Asettaminen elementille, joka ei sisällä jälkeläistä saavutettavuuspuussa (unohdettu aria-owns portaalinetulle listalle).

Esimerkki

<label for="fruit">Fruit</label>
<input
  id="fruit"
  role="combobox"
  type="text"
  aria-controls="fruit-listbox"
  aria-expanded="true"
  aria-activedescendant="fruit-2"
  autocomplete="off"
>
<ul id="fruit-listbox" role="listbox">
  <li id="fruit-1" role="option">Apple</li>
  <li id="fruit-2" role="option" class="is-active">Banana</li>
  <li id="fruit-3" role="option">Cherry</li>
</ul>