aria-controls

Milloin käyttää

Ohjauselementissä, jonka aktivointi muuttaa toista elementtiä sivulla — kanoniset esimerkit ovat välilehti → välilehtipaneeli -suhde ja paljastuspainike → paljastettu paneeli. Se kertoo avustavalle teknologialle, että “tämän widgetin käyttö vaikuttaa tuohon siellä”, antaen edistyneille käyttäjille tavan hypätä ohjauselementistä hallittuun elementtiin.

Älä käytä sitä jokaisen vuorovaikutuksen yhteydessä. Useimmat klikkauskäsittelijät eivät tarvitse aria-controls-attribuuttia; varaa se tapauksille, joissa hallittu elementti on aidosti erillinen DOM:ssa ja käyttäjä hyötyy yhteyden tietämisestä.

Miten se toimii

Arvo on välilyönnillä erotettu lista elementtien ID-tunnuksista hallituille elementeille. Hallitun elementin täytyy olla DOM:ssa suhteen kyselyn hetkellä — jos välilehtipaneeli liitetään vasta, kun välilehti aktivoidaan, viittaus roikkuu AT-käyttäjille, kunnes paneeli ilmestyy.

Tuki on heikko kohta. JAWS paljastaa “siirry hallittuun elementtiin” -pikakuvakkeen, mutta VoiceOver ja NVDA suurelta osin jättävät attribuutin huomiotta erityiskuvioiden ulkopuolella (välilehdet, comboboxit). Tämä tarkoittaa, että aria-controls on harvoin se tekijä, joka tekee ominaisuudesta saavutettavan — se on parannus oikeiden roolien, kohdistuksen hallinnan ja aria-expanded:n päälle. Rakenna kuvio ensin oikein; lisää aria-controls viimeiseksi.

Yleisiä virheitä

• aria-controls:n pitäminen korvikkeena kohdistuksen siirtämiselle. “Hyppää tuloksiin” -painikkeen täytyy siirtää kohdistusta aktivoituessaan; aria-controls:n lisääminen ei tee sitä.
• Viittaaminen elementtiin, joka ei ole vielä DOM:ssa. Viittaus ei ratkea mihinkään ennen kuin paneeli renderöityy.
• aria-expanded-attribuutin unohtaminen paljastuspainikkeessa. aria-controls sanoo “vaikutan tuohon asiaan”; aria-expanded sanoo “ja se on tällä hetkellä auki / suljettu”.
• aria-controls:n käyttäminen mukautetussa valinnassa osoittamaan vaihtoehtolistaan — oikea kuvio siellä on role="combobox" yhdistettynä aria-controls-attribuuttiin syötteessä ja aria-activedescendant-attribuuttiin korostetun vaihtoehdon kohdalla.
• aria-controls:n ripottelu jokaiseen painikkeeseen “täydellisyyden vuoksi”. Hälyä; mikään ei nojaa siihen.

Esimerkki

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  Mikä on palautuskäytäntönne?
</button>
<div id="faq-1-answer" hidden>
  Palautukset käsitellään 14 päivän kuluessa …
</div>