link

Milloin käyttää

Lähes koskaan — käytä <a href="...">. Natiivi ankkurielementti antaa kohdistuksen, näppäimistöaktivointia Enter-näppäimellä, vieraillun tilan, hiiren kakkospainikkeen “avaa uudessa välilehdessä” -toiminnon, raahaa kirjanmerkkeihin -toiminnon ja oikean URL-osoitteen, jonka käyttäjä voi jakaa. role="link" <div>-elementissä heittää kaiken tämän pois.

Ainoat oikeutetut tapaukset:

• Kolmannen osapuolen suunnittelujärjestelmä toimittaa ei-ankkuripohjaisen “linkki”-komponentin, jota et voi korvata.
• Korjaat saavutettamatonta <div onclick>-elementtiä refaktoroinnin edetessä.

Jos käytät role="link"-attribuuttia, sinun on myös:

• Tehtävä elementti kohdistettavaksi tabindex="0":lla.
• Kytkettävä keydown-tapahtuma Enter-näppäimelle (linkit EIVÄT aktivoidu välilyönnistä — se on painikkeen toiminta).
• Tarjottava käyttäjälle oikea tapa nähdä kohde-URL:n osoitteessa hover/focus-tilassa, koska href-attribuuttia ei ole.

Yleisiä virheitä

• <a> ilman href-attribuuttia. Ilman href-attribuuttia elementti ei ole tab-järjestyksessä, eivätkä ruudunlukuohjelmat ilmoita sitä linkkinä.
• <a href="#" onclick="..."> painikkeena. Käytä <button>-elementtiä — linkit navigoivat, painikkeet toimivat.
• role="link" aktivoituu välilyönnistä. Välilyönti vierittää sivua; linkit aktivoituvat vain Enter-näppäimestä.
• Linkkiteksti on “click here” tai “read more”. Ruudunlukuohjelmien käyttäjät, jotka selaavat linkkilistausta, näkevät vain linkkitekstin — tee siitä kuvaava.
• Puuttuva aria-current="page" navigaation nykyistä sivua edustavassa linkissä.

Esimerkki

<!-- Preferred -->
<a href="/toolkit/standards/wcag/">WCAG 2.2 reference</a>

<!-- Only when <a href> is impossible -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>