Kohdistuksen ulkoasu

Mitä vaaditaan

2.4.7 (Kohdistus näkyvissä) sanoo, että indikaattorin on oltava olemassa. 2.4.13 (Kohdistuksen ulkoasu) sanoo tarkalleen, miltä sen on näytettävä. Läpäistäkseen, kohdistusindikaattorin on:

1. Oltava alueeltaan vähintään yhtä suuri kuin 2 CSS-pikselin kiinteä ympärysmitta kohdistetun ohjain ympärillä, tai 1 pikseliä paksu viiva, jolla on sama kokonaisala.
2. Saavutettava 3:1 kontrasti samojen pikselien kohdistetun ja kohdistamattoman tilan välillä.
3. Ei peity muun sisällön taakse (jota koskevat myös 2.4.11 ja 2.4.12).

Tämä on ensimmäinen kerta, kun WCAG on asettanut numerot kohdistustyylinnölle, ja se on muokannut tapaa, jolla suunnittelujärjestelmät käsittelevät näppäimistötyylejä. Odota jokaisen vuoden 2026 saavutettavuusauditoinnin mainitsevat tämän nimeltä.

Kuinka vaatimus täytetään

• Käytä vähintään 2 pikselin paksua kiinteää ääriviivaa. Yleinen malli: outline: 2px solid currentColor; outline-offset: 2px;.
• Valitse kohdistusväri, joka saavuttaa 3:1 viereisenä olevaa väriä vastaan — ei pelkästään sivun taustaa — painikkeet sijaitsevat hover-tilojen, liukuvärien ja kuvien päällä.
• Tummalle ja vaalealle teemalle toimita kaksi kohdistusväriä ja vaihda ne prefers-color-scheme-mediakyselyllä tai arkkitehtuuria.
• Vältä pelkästään hehku- tai box-shadow-kehykseen tukeutumista, jolla on alhainen kontrasti; jos käytät box-shadow-ominaisuutta, anna sille kova reuna ja riittävä paksuus.
• Suosi :focus-visible-valitsinta, jotta hiirikäyttäjät eivät näe kehystä, mutta varmista, että se aktivoituu jokaisen näppäimistökohdistuksen yhteydessä, mukaan lukien ohjelmallinen kohdistus.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 valkoista ja harmaan hover-tilaa vastaan */
  outline-offset: 2px;
  border-radius: inherit;
}

Yleisiä virheitä

• 1 pikselin kohdistuskehykset (useimmat selainten oletukset ennen vuotta 2023 komponenttikirjastoissa).
• Brändisininen kohdistuskehys brändisinisessä painikkeen hover-tilassa — väri identtinen, kontrasti 1:1.
• Kohdistus, joka on tyylitelty pelkästään pehmeällä box-shadow-efektillä, jolla ei ole määriteltyä reunaa ja joka häviää kuvioituja taustoja vasten.
• Mukautetut syöttöelementit, joissa kohdistustila muuttaa vain reunuksen väriä eikä paksuutta tai kontrastia — liian hienovarainen laskettavaksi.
• „Sisäänpäin“ sijoitetut kohdistuskehykset pienissä kuvakelinkeinpainikkeissa, jotka maalataan 16×16-osumaalueen sisälle ja päätyvät näkymättömiin kuvakkeen taakse.
• Komponentit, jotka läpäisevät valkoisilla taustoilla mutta epäonnistuvat tummassa teemavaihtoehdossa, jota kukaan ei testannut.

Käytännön kontrastointitarkistuslista

Listaa jokaisen interaktiivisen komponentin osalta kaikki pintatilanteen tilat, joissa se voi sijaita (oletus, hover, painettu, poistettu käytöstä, kortissa, modaalissa, sankarikuvan päällä), ja varmista, että kohdistuskehys saavuttaa 3:1 jokaista vastaan. Tämä on työlästä; komponenttikirjastot, jotka eivät tee tätä, toimittavat piilotettuja virheitä. Storybook yhdistettynä pa11y- tai axe-playwright-automaatioon kannattaa tässä.

Miksi tämä on tärkeää

2.4.13 sulkee 2.4.7:n yleisimmän porsaanreiän: kohdistuskehyksen, joka teknisesti on olemassa, mutta on liian ohut, liian vähäkontrastinen tai sijainnillisesti liian leikattu ollakseen hyödyllinen. Heikkonäköiset käyttäjät, jotka ovat riippuvaisia kehyksestä kohdistuksen seuraamiseen, saavat mitattavan, testattavan takuun. Suunnittelijat saavat selkeän säännön, jota voidaan validoida ennen toimitusta eikä neuvotella jälkeenpäin.

Jopa tiimit, jotka sitoutuvat muodollisesti vain AA-tasoon, omaksuvat laajalti 2.4.13:n tavoitteekseen, koska virhetilanteet ovat helposti havaittavissa auditoinneissa ja helppoja käyttää oikeudenkäyntien perusteluina. Jos voit omaksua vain yhden AAA-tason onnistumiskriteerissä WCAG 2.2:sta, tämä se on.