aria-current

Milloin käyttää

Sen yhden kohteen kohdalla, joka edustaa “missä olet” toisiinsa liittyvien kohteiden joukossa. Klassinen tapaus on aktiivinen linkki ensisijaisessa navigaatiossa: ruudunlukuohjelma ilmoittaa “Hinnoittelu, nykyinen sivu, linkki” ja näkevät käyttäjät näkevät korostetun kohteen, joka vastaa sitä.

Muita yleisiä tapauksia:

• Nykyinen vaihe monivaiheisessa lomakkeessa tai ohjatoiminnossa (aria-current="step").
• Tämän päivän päiväys kalenteriruudukossa (aria-current="date").
• Aktiivinen murupolun elementti (aria-current="page").
• Tällä hetkellä toistuva kohde mediasoi-ttolistassa (aria-current="true").

Ero lähitiloihin:

• aria-current — “olet tässä” navigaatiossa tai kohteiden joukossa. Käytetään linkeissä ja vastaavissa widgeteissä, jotka eivät perustu valintaan.
• aria-selected — valinta valintakontainerissa (tablist, listbox, tree, grid). Valinta on jotain, mitä käyttäjä muuttaa.
• aria-pressed — vaihtopainike. Painike itsessään on päällä tai pois.
• aria-checked — valintaruutu tai radiopainike. Itsenäinen valinta.

Synkronoinnin ylläpito

Hyväksyttävät arvot: "page", "step", "location", "date", "time", "true", "false". Valitse tarkin tunnus — "page" navigointilinkeille, "step" ohjatoiminnoille, "date" kalentereille. "true" on yleinen varavalinta, kun mikään muu ei sovi. "false" (oletus) tarkoittaa “ei nykyinen”; yleensä vain jätetään attribuutti pois ei-nykyisistä kohteista.

Navigointivalikossa täsmälleen yhden linkin pitäisi kantaa aria-current-attribuuttia milloin tahansa. Päivitä se asiakkaan puolella reitin vaihtuessa; palvelimella renderöidyt sivut voivat renderöidä sen suoraan HTML:ään.

Tyylitä nykyinen kohde visuaalisesti, jotta näkevät käyttäjät näkevät saman merkin. Yleinen kuvio on [aria-current="page"] { font-weight: 600; }.

Yleisiä virheitä

• aria-current="true":n käyttäminen jokaisessa navigointilinkissä tai ei yhdessäkään.
• aria-selected:n käyttäminen navigointilinkissä — väärä semantiikka; linkki ei ole valittava vaihtoehto.
• aria-current:n päivittämättä jättäminen asiakkaan puolen reittimääritysten vaihtuessa yhden sivun sovelluksessa.
• Aktiivitilan tyylittely CSS:llä mutta aria-current:n asettamatta jättäminen. Ruudunlukuohjelmat eivät ilmoita mitään erottavaa.
• aria-current="page":n käyttäminen painikkeessa, joka ei ole navigointilinkki.
• aria-current:n asettaminen <nav>-kontaineriin yksittäisen linkin sijaan.

Esimerkki

<nav aria-label="Ensisijainen">
  <ul>
    <li><a href="/">Etusivu</a></li>
    <li><a href="/pricing" aria-current="page">Hinnoittelu</a></li>
    <li><a href="/docs">Dokumentaatio</a></li>
  </ul>
</nav>