Kohdistus

Kohdistus on tila, jossa elementti on aktiivinen näppäimistön syötteen vastaanottaja. Vain yksi elementti sivulla voi pitää kohdistusta millä tahansa hetkellä, ja tuon tilan visuaalinen indikaattori — kohdistusrengas — on tärkein kohta näppäimistöllä, kytkimillä ja ruudunlukuohjelmilla navigoiville käyttäjille.

Miksi kohdistus on tärkeä

Merkittävä osa käyttäjistä navigoi verkkoa ilman hiirtä:

• Vain näppäimistöä käyttävät motorisesti vammaiset henkilöt, joille osoittaminen on vaikeaa tai mahdotonta.
• Kytkinsyöttöä käyttävät, jotka skannaavat käyttöliittymää yksipainikkeisilla tai imupuhalluslaitteilla.
• Ruudunlukuohjelmien käyttäjät, jotka kulkevat näppäimistöliittymän kautta myös kosketusnäytöillä.
• Ääniohjauskäyttäjät (“Napsauta Lähetä-painiketta”), joiden työkalut ratkaisevat komennot kohdistettavia elementtejä vertaamalla.

Kaikille heille kohdistus on kursori. Missä kohdistus on, minne se on menossa ja miltä se näyttää — nämä määrittävät, onko sivu käytettävissä lainkaan.

WCAG:n kohdistussäännöt

WCAG 2.x ja 2.2 sisältävät useita kohdistukseen liittyviä kriteereitä:

• 2.1.1 Näppäimistö (A) — kaiken toiminnallisuuden on oltava käytettävissä näppäimistöltä.
• 2.1.2 Ei näppäimistöloukkua (A) — näppäimistökäyttäjien on pystyttävä siirtämään kohdistus pois mistä tahansa kohdistettavasta elementistä pelkällä näppäimistöllä.
• 2.4.3 Kohdistusjärjestys (A) — kohdistusjärjestyksen on oltava looginen ja merkityksellinen.
• 2.4.7 Kohdistus näkyvissä (AA) — kohdistetulla elementillä on oltava näkyvä indikaattori.
• 2.4.11 Kohdistus ei peitty (AA, uusi WCAG 2.2:ssa) — kiinteät otsikot, evästebannit ja kelluvat chat-widgetit eivät saa peittää kohdistettua elementtiä kokonaan.
• 2.4.13 Kohdistuksen ulkoasu (AAA, uusi 2.2:ssa) — kohdistusindikaattorin on täytettävä tietyt pinta-ala- ja kontrastikynnysmääräykset.

Yleisiä virhetapauksia

• outline: none ilman korvaavaa. Suunnittelijat poistavat oletusrenkaan, koska se ei vastaa visuaalista kieltä, ja unohtavat korvata sen tyylitellyllä vastaavalla. Tämä on AA-tason epäonnistuminen ja yleisimmin toistuva.
• Kohdistus vain :focus-visible-tilassa, ei :focus-tilassa. Moderni paras käytäntö on :focus-visible, jotta rengas näkyy vain näppäimistönavigoinnissa, ei hiirenklikkauksissa. Hyvä — mutta indikaattorin :focus-visible-tilassa on silti täytettävä AA-kontrastitaso.
• Kohdistuksen katoaminen dynaamisten toimintojen jälkeen. Modaalin sulkemisen jälkeen kohdistuksen on palattava käynnistävälle elementille. Rivin poistamisen jälkeen kohdistuksen on siirryttävä loogiseen naapuriin. Muuten käyttäjä päätyy jonnekin satunnaiseen paikkaan (usein dokumentin body) ja joutuu aloittamaan tabuloinnin alusta.
• Piilotettu kohdistus kiinteän sisällön alla. Kohdistettu linkki 50 pikseliä sivun yläosasta piiloutuu kiinteän otsikon taakse, joka on myös 50 pikseliä korkea. Käyttäjä tabuloi näennäiseen tyhjyyteen. Aseta scroll-padding-top otsikon korkeuden mukaiseksi tai tunnista päällekkäisyys ja vieritä kohdistettu elementti näkyviin.

Nopein manuaalinen auditointi

Tabuloi jokainen sivu osoiteriviltä alatunnisteeseen. Jos missään kohdassa et näe, missä kohdistus on, et pääse interaktiiviseen ohjaimeen tai jäät jumiin kohdistusloukkuun, sivu epäonnistuu 2.4.7:ssä tai 2.1.2:ssa.