tab

Milloin käyttää

Yhdelle välilehdelle vaaka- tai pystysuunnassa järjestetyssä välilehtinauhassa. Välilehden TÄYTYY olla role="tablist"-elementin suora lapsi (tai omistettu aria-owns-attribuutin kautta). Jokaisen välilehden TÄYTYY osoittaa liittyvään paneeliin aria-controls="<tabpanel-id>"-attribuutilla. Vastavuoroinen aria-labelledby sijaitsee paneelissa osoittaen takaisin välilehteen.

Välilehdet ovat sovelluskuvio. Jos “välilehdet” ovat tosiasiassa navigointia erillisten sivujen välillä, käytä <nav>-elementtiä <a>-linkkeineen — URL-muutos tekee välilehtikuviosta väärän.

Välilehti itsessään on yleensä <button>. Painikesemantiikat yhdistyvät siististi role="tab"-rooliin, ja kohdistuksen sekä aktivoinnin käsittely tulee ilmaiseksi.

Näppäimistö- ja kohdistussopimus

APG:n välilehtikuvion mukaan:

• Tab siirtää kohdistuksen tablist-elementtiin, aktiiviseen välilehteen. Tab siirtää kohdistuksen ULOS seuraavaan kohdistettavaan elementtiin (tyypillisesti tabpanel-elementtiin, jos sillä on tabindex="0").
• Vasen/Oikea-nuoli (tai Ylös/Alas pystysuuntaisissa tablist-elementeissä) siirtää kohdistuksen välilehtien välillä.
• Home / End siirtää ensimmäiseen / viimeiseen välilehteen.
• Aktivointi voi olla automaattista (kohdistus = valinta) tai manuaalista (Välilyönti/Enter valitsee). Valitse manuaalinen, kun välilehden aktivointi käynnistää raskaan toiminnon.

Käytä liikkuvaa tabindex-attribuuttia: vain valitulla välilehdellä on tabindex="0".

Yleiset virheet

• Kaikilla välilehdillä tabindex="0" — Tab kiertää jokaisen välilehden eikä siirry paneeliin.
• Puuttuva aria-controls-attribuutti, joka yhdistää välilehden tabpanel-elementtiin.
• aria-selected="true" useammalla kuin yhdellä välilehdellä.
• Välilehdet toteutettu <a href="#section">-linkeillä — URL-fragmentti muuttuu, takaisin-painike navigoi välilehtien välillä ja kuvio hajoaa.
• Kohdistuksen hallinta puuttuu aktivoinnin yhteydessä: välilehden napsauttaminen päivittää paneelin, mutta seuraava Tab-näppäinpainallus palaa sivun ylätunnisteeseen eikä siirry paneeliin.

Esimerkki

<div role="tablist" aria-label="Tiliasetukset">
  <button role="tab" id="t-profile"  aria-selected="true"  aria-controls="p-profile"  tabindex="0">Profiili</button>
  <button role="tab" id="t-billing"  aria-selected="false" aria-controls="p-billing"  tabindex="-1">Laskutus</button>
  <button role="tab" id="t-security" aria-selected="false" aria-controls="p-security" tabindex="-1">Tietoturva</button>
</div>
<section role="tabpanel" id="p-profile"  aria-labelledby="t-profile"  tabindex="0">…</section>
<section role="tabpanel" id="p-billing"  aria-labelledby="t-billing"  hidden>…</section>
<section role="tabpanel" id="p-security" aria-labelledby="t-security" hidden>…</section>