tablist

Milloin käyttää

role="tab"-elementtien rivin (tai sarakkeen) ympärille välilehtirajapinnassa. Tablist-elementillä TÄYTYY olla saavutettava nimi aria-label- tai aria-labelledby-attribuutin kautta — ilman sitä ruudunlukuohjelman käyttäjä kuulee “välilehtilista” eikä pysty erottamaan, mikä sivun tablist-elementeistä on kyseessä.

Pystysuuntaiset välilehtinauhat tarvitsevat aria-orientation="vertical"-attribuutin. Oletusarvo on vaakasuuntainen, joten attribuutti voidaan jättää pois vaakasuuntaisista välilehdistä.

Jos “välilehdet” ovat tosiasiassa navigointia muihin URL-osoitteisiin, käytä <nav>-elementtiä <a>-linkkeineen — URL-muutos napsautuksella ei vastaa tablist-semantiikkaa.

Näppäimistö- ja kohdistussopimus

APG:n välilehtikuvion mukaan:

• Tab siirtää kohdistuksen tablist-elementtiin ja valitulle välilehdelle; toinen Tab siirtää kohdistuksen ULOS (tyypillisesti aktiiviseen tabpanel-elementtiin).
• Vasen/Oikea-nuoli siirtää kohdistuksen välilehtien välillä (Ylös/Alas pystysuuntaisissa tablist-elementeissä). Kierto on valinnainen mutta tavanomainen.
• Home / End siirtää ensimmäiseen / viimeiseen välilehteen.
• Aktivointi: automaattisessa tilassa nuolinäppäimet sekä siirtävät kohdistuksen ETTÄ valitsevat. Manuaalisessa tilassa (suositeltava, kun aktivointi on raskas toiminto), Välilyönti tai Enter valitsee kohdistetun välilehden.

Tablist-elementti itse ei käsittele kohdistusta — kohdistus siirtyy välilehteen, ei tablist-säilöön.

Yleiset virheet

• Tablist ilman saavutettavaa nimeä. Useita tablist-elementtejä samalla sivulla ei voi erottaa toisistaan.
• Kaikilla välilehdillä tabindex="0". Kuvio on yhden pysähdyksen kuvio; vain valitulla välilehdellä on tabindex="0".
• Puuttuva aria-orientation="vertical"-attribuutti pystysuuntaisessa tablist-elementissä — ruudunlukuohjelma neuvoo käyttäjiä käyttämään Vasen/Oikea-nuolia, kun visuaalinen asettelu edellyttää Ylös/Alas-nuolia.
• role="tablist" ympäröi linkkejä (<a href="#section">) painikkeiden sijaan. Ankkuri vierittää sivua ja rikkoo takaisin-painikkeen.
• Tabpanel-elementti piilotettu sekä display: none -attribuutilla ETTÄ hidden-attribuutilla, kun yksi riittäisi.

Esimerkki

<div role="tablist" aria-label="Projektin osiot" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Yleiskatsaus</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Tiedostot</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Tiimi</button>
</div>