Skýr fókus

Silktide prófar hvort stýringar á síðunni þinni — tenglar, hnappar og reitir í eyðublöðum — breyti útliti sínu nægilega greinilega þegar þær eru valdar með lyklaborðinu. Það er ekki nóg að breytingin sé einfaldlega til staðar; hún þarf að vera nægilega stór og með nægilega miklum birtuskilum til að hún sjáist í raun.

Þetta er strangari útgáfa af Sýnilegum fókus: þar er prófað hvort einhver fókusvísir sé til staðar, en hér er mælt hvort vísirinn sé nægilega áberandi.

Þú getur prófað þetta sjálf/ur: opnaðu síðu og ýttu endurtekið á Tab-lykilinn. Hver stýring sem þú lendir á ætti að breyta greinilega um útlit, til dæmis með því að fá sérstaka útlínur eða bakgrunn með nægilegum birtuskilum.

Hvers vegna þetta skiptir máli

Fólk sem vafrar um með lyklaborði — þar á meðal margir með hreyfihömlun og notendur rofatækja — reiðir sig á að sjá hvar er. Fókusvísir sem er tæknilega til staðar en þó daufur, þunnur eða með lítil birtuskil er jafn gagnslaus og enginn vísir: notandinn missir staðsetningu sína á síðunni og getur ekki séð hvaða stýring verður virkjuð þegar ýtt er á Enter.

Hvernig á að laga þetta

Einfaldasta áreiðanlega lagfæringin er heildstæð útlína utan um stýringuna sem hefur fókus, að minnsta kosti 2 pixlar að þykkt, í lit sem hefur birtuskil bæði við stýringuna og umhverfi hennar.

Tvílita vísir tryggir sýnileika óháð bakgrunninum:

/* Gegnsæ útlína heldur vísinum í forced-colors-ham */
:focus {
  outline: 2px solid transparent;
  /* Ljós geislabaugur + dökkur hringur: annað þeirra hefur alltaf birtuskil */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Þessi aðferð kemur frá WCAG-tækni C40.

Forðastu vís en eftir aðeins einum kanti, svo sem neðri ramma: það hvort hann sé nægilega stór fer eftir lengd þess kants, sem er mismunandi fyrir textatengla.

Hvernig Silktide framkvæmir prófunina

Líkt er eftir notanda sem notar Tab-lykilinn til að fara í gegnum hvern fókusanlegan þátt á síðunni. Þættir sem þú hefur útilokað frá prófun, þættir sem eru faldir sjónrænum notendum og þættir með tabindex upp á -1 eru sleppt.
Stílar hvers þáttar eru bornir saman í fókusuðu og ófókusuðu ástandi.
Þættir standast prófunina ef þeir halda sjálfgefnu fókusútlínu vafrans eða ef bakgrunnslitur þeirra breytist með að minnsta kosti 3:1 birtuskilum milli ástandanna tveggja.
Að öðrum kosti eru útlínur, rammar og skuggar beggja ástanda mæld og talið hversu stórt svæði breytist með nægilegum birtuskilum. Til að standast þarf það svæði að vera að minnsta kosti jafn stórt og 2 pixla þykkur jaðar umhverfis þáttinn, samkvæmt kröfu 2.4.13.

Úrræðaleit

Fókusstíllinn þarf JavaScript til að birtast

Fókusstílar ættu eingöngu að vera skilgreindir í . Ef fókus er virkjaður með — til dæmis með skriftu sem bætir við flokki — gæti Silktide ekki greint hann og hann gæti ekki virkað fyrir hjálpartækni án líkamlegs lyklaborðs. Prófaðu að slökkva á JavaScript og fara í gegnum síðuna með Tab-lyklinum til að staðfesta þetta.

Fókusstílar sem við getum ekki mælt

Sumar leiðir til að útfæra fókus er ekki hægt að greina eða mæla sjálfvirkt:

Fókus sem er teiknaður með gerviþáttum á borð við ::before eða ::after.
Fókus sem er virkjaður með :focus-within á umlykjandi þætti.
Fókusstílar sem erfast til undirþátta, svo sem <span> innan tengils. Sum þessara tilvika greinast, en ekki öll afbrigði.

Þáttum sem nota þessar aðferðir er sleppt í stað þess að þeir séu merktir.

Þættir yfir myndum eða með ófyrirsjáanlegum bakgrunnum

Birtuskil eru reiknuð út frá þekktum bakgrunnslit. Þegar þáttur er yfir mynd eða staðsettur utan við foreldri sitt þannig að ekki er hægt að ákvarða bakgrunn hans, sleppir Silktide honum í stað þess að giska.

Óvæntir þættir eru fókusanlegir

Merki á borð við <div> eða <span> verða fókusanleg þegar þeim er gefið tabindex sem er 0 eða hærra, en þannig styðja sérsniðnar stýringar lyklaborðsnotkun. Ef slíkur þáttur birtist í niðurstöðunum þínum er í raun hægt að ná til hans með lyklaborði og hann þarf fókusstíl. Sjá tabindex á MDN.