Kohdistus näkyvissä

Mitä vaaditaan

Aina kun jokin interaktiivinen elementti saa näppäimistön kohdistuksen, selaimen — tai sivun CSS:n — on esitettävä näkyvä ilmaisin, joka osoittaa, mikä elementti on kohdistettuna. Onnistumiskriteeri ei määrää, miltä ilmaisimen on näytettävä; se on 2.4.13:n tehtävä AAA-tasolla. Se edellyttää vain, että jokin on näkyvissä. Klassinen epäonnistuminen on *:focus { outline: none; } ilman korvaavaa tyyliä.

Tämä onnistumiskriteeri koskee kaikkia kohdistettavissa olevia elementtejä: linkkejä, painikkeita, lomakekenttiä, räätälöityjä widgettejä, iframe-kehyksiä ja kaikkea, jolla on tabindex. Se koskee riippumatta siitä, saapuiko käyttäjä sinne Tab-, Shift+Tab- tai ohjelmallisella kohdistuskutsulla.

Kuinka vaatimukset täytetään

• Älä koskaan kirjoita outline: none (tai outline: 0) ilman välitöntä korvausta. Käytä :focus-visible-pseudoluokkaa rajoittaaksesi räätälöidyn kehyksen vain näppäimistökäyttäjille, jos haluat estää sen näyttämisen hiirennapsautuksen yhteydessä.
• Tarjoa kohdistustyyli, jolla on riittävä kontrasti ja paksuus, jotta se on ilmeinen: 2 pikselin kiinteä kehys, jonka kontrasti on 3:1 suhteessa viereiseen taustaan, on konservatiivinen perusraja.
• Vaaleissa elementeissä vaalealla taustalla käytä tummaa kehystä (tai päinvastoin). Harmaa kehys harmaalla hover-tilalla on klassinen näkymättömyyden ansa.
• Räätälöityjen widgettien (yhdistelmäruutu, listbox, valikko) on siirrettävä kohdistus aktiiviseen vaihtoehtoon ja esitettävä siinä näkyvä ilmaisin.
• Testaa tabsaamalla koko sivun läpi URL-osoiteriviltä. Jokaisen pysähdyksen on oltava ilmeinen ilman silmien siristämistä.

Yleisiä virheitä

• Yleinen nollaus: *:focus { outline: none; } perus-CSS:ssä, ei koskaan lisätty takaisin.
• Komponenttikirjastot, jotka toimitetaan 1 pikselin heikkokontrastisella kehyksellä, joka vastaa brändiväriä sankariliukuväriä vasten — käytännössä näkymätön.
• Kohdistusilmaisin piilossa tahmean otsikon takana vieritettäessä (katso 2.4.11 — sama perussyy, eri onnistumiskriteeri).
• Painikkeet, jotka muuttavat taustaväriä :hover-tilassa mutta eivät :focus-tilassa, joten näppäimistökäyttäjät eivät saa mitään signaalia.
• Räätälöidyt pudotusvalikot, joissa kohdistus siirtyy piilossa olevaan näytön ulkopuoliseen <li>-elementtiin eikä mikään muutu visuaalisesti.
• Suunnittelijat korvaavat kehyksen pienellä varjolla, joka on näkymätön vilkkailla taustoilla.

Kuinka :focus-visible sopii tähän

Selaimet tarjoavat :focus-visible-pseudoluokan erottamaan näppäimistökohdistuksen hiirikohdistuksesta. Kaava:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Tämä pitää hiiren napsautukset siisteinä ja antaa näppäimistökäyttäjille ilmaisimen. Turvallinen käyttää kaikissa nykyaikaisissa selaimissa vuodesta 2026 lähtien.

Miksi tällä on merkitystä

Kohdistus näkyvissä on yksittäinen useimmin mainittu onnistumiskriteeri näppäimistön saavutettavuuden auditoinneissa — ja väitetysti suurimman vaikutuksen omaava. Sivusto, joka epäonnistuu 2.4.7:ssä, on käyttökelvoton näppäimistöllä, vaikka kaikki muut onnistumiskriteerit läpäistyisivät. Motorisista vammoista kärsivät käyttäjät, näkövammaiset suurennuslasia käyttävät käyttäjät ja käsivammoista kärsivät käyttäjät menettävät kaikki pääsyn. Mobiilinäppäimistöjen käyttäjät (ulkoiset Bluetooth-näppäimistöt tableteissa) kohtaavat saman seinän. Korjaaminen on yleensä yksittäinen CSS-sääntö, mikä tekee virheen pysyvyydestä verkossa sitäkin merkillisempää.