Standardit · ARIA

Rooli Asiakirjarakenne

tabpanel

Merkitsee välilehteen paritetun sisältöpaneelin. Jokainen tabpanel on nimetty välilehdellään aria-labelledby-attribuutin kautta; välilehti viittaa paneeliin aria-controls-attribuutilla. Näytä yksi paneeli kerralla; piilota muut hidden-attribuutilla.

Milloin käyttää

Säilölle, joka pitää välilehden sisällön. Paritetaan jokainen tabpanel sen välilehteen aria-labelledby-attribuutilla (osoittaa välilehden id:hen). Välilehti puolestaan osoittaa paneeliin aria-controls-attribuutilla. Piilota passiiviset paneelit hidden-attribuutilla — ei pelkällä display: none CSS:ssä — jotta saavutettavuuspuu vastaa visuaalista tilaa.

Jos paneeli sisältää interaktiivista sisältöä (lomake, linkkiluettelo), paneeli voidaan tehdä kohdistettavaksi tabindex="0"-attribuutilla. Tällöin välilehden aktivoinnin jälkeen seuraava Tab-näppäinpainallus laskeutuu paneeliin.

Jos paneeli sisältää yhden kohdistettavan alueen — esimerkiksi yhden suuren otsikon ja sen jälkeen sisältöä — tabindex="0" paneelissa riittää. Jos paneeli on täynnä kohdistettavia kontrolleja, käyttäjä siirtyy niihin suoraan Tabilla ja tabindex on valinnainen.

Yleiset virheet

  • Tabpanel piilotettu CSS:llä muttei hidden-attribuutilla. Ruudunlukuohjelmat saattavat silti paljastaa sen sisällön.
  • Tabpanelilla puuttuu aria-labelledby — ilmoitetaan vain “välilehtipaneeli” ilman nimeä.
  • Välilehti osoittaa tabpanel-elementtiin id:n kautta aria-controls-attribuutilla, mutta paneeli ei osoita takaisin aria-labelledby-attribuutilla. Parin täytyy olla vastavuoroinen.
  • Kaikki tabpanellit ovat DOM:ssa display: none vaihdettuna dynaamisesti, mutta ei hidden-attribuuttia. Auditoijat merkitsevät epäjohdonmukaisuuden.
  • role="tabpanel" paneelissa, jota EI ole paritettu role="tab"-elementtiin — orpo tabpanel.

Esimerkki

<div role="tablist" aria-label="Asetukset">
  <button role="tab" id="t-account" aria-selected="true"  aria-controls="p-account" tabindex="0">Tili</button>
  <button role="tab" id="t-billing" aria-selected="false" aria-controls="p-billing" tabindex="-1">Laskutus</button>
</div>

<section role="tabpanel" id="p-account" aria-labelledby="t-account" tabindex="0">
  <h2>Tili</h2>
  <p>…</p>
</section>
<section role="tabpanel" id="p-billing" aria-labelledby="t-billing" tabindex="0" hidden>
  <h2>Laskutus</h2>
  <p>…</p>
</section>