Sýnilegur fókus

Silktide prófar hvort stýringar á síðunni þinni – tenglar, hnappar og innsláttarreitir – breyti sýnilega útliti sínu þegar þær eru valdar með lyklaborðinu. Án sýnilegrar breytingar geta lyklaborðsnotendur ekki séð hvar þeir eru á síðunni.

Þú getur prófað þetta sjálf/ur: hlaðið síðu og ýtið endurtekið á Tab-lykilinn. Hver stýring sem þú lendir á ætti að breyta útliti sínu, til dæmis með því að fá útlínur eða annan bakgrunnslit.

Allar staðlaðar stýringar vafra sýna fókus sjálfgefið, þannig að villa hér þýðir næstum alltaf að stílblað hafi slökkt á sjálfgefna vísinum eða að sérsniðin stýring hafi verið byggð án hans.

Af hverju þetta skiptir máli

Fólk sem getur ekki notað mús vafrar með Tab-lyklinum og fókusvísirinn er eina leið þess til að vita á hvaða stýringu það er. Þegar hönnuður fjarlægir hann – oft vegna þess að sjálfgefna útlínan var talin ljót – sitja lyklaborðsnotendur eftir og ýta á lykla í blindni, án þess að vita hvað Enter-lykillinn muni virkja.

Hvernig á að laga þetta

Finndu hvar slekkur á fókus, yfirleitt regla eins og outline: none eða outline: 0, og fjarlægðu hana.
Ef þú skiptir út sjálfgefnu útlínunni skaltu setja skýran valkost í :focus-ástandinu:


\/* Endurheimtir sýnilegan vísi fyrir reiti í fókus *\/
input:focus {
  outline: 2px solid #396196;
}

Gefðu sérsniðnum stýringum, svo sem eigin fellivalmyndum eða sleðum, skýran fókusstíl – þær hafa engan sjálfgefinn fókusstíl.

Upplýsingar um hversu áberandi vísirinn ætti að vera er að finna í Clear focus, strangari fylgiprófun þessarar prófunar.

Hvernig Silktide prófar þetta

Líktu eftir lyklaborðsnotanda sem fer með Tab-lyklinum í gegnum alla fókusvæna þætti á síðunni og slepptu þáttum sem þú hefur útilokað frá prófun, þáttum sem eru faldir fyrir sjáandi notendum og þáttum með tabindex gildið -1.
Berðu saman stíla hvers þáttar í fókusástandi og án fókus.
Merktu þætti þar sem útlitið breytist ekki á neinn hátt sem sjáandi notandi gæti greint þegar þeir fá .

Úrræðaleit

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

Fókusstílar ættu að vera skilgreindir eingöngu í CSS. 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 virkar ef til vill ekki fyrir hjálpartækni án líkamlegs lyklaborðs. Prófaðu að slökkva á JavaScript og fara með Tab-lyklinum í gegnum síðuna til að staðfesta þetta.

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

Sumar leiðir til að útfæra fókus finnast ekki 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 finnast, en ekki öll afbrigði.

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

Óvæntir þættir eru fókusvænir

Merki eins og <div> eða <span> verða fókusvæn þegar þeim er gefið tabindex gildið 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 hann í raun aðgengilegur með lyklaborði og þarf fókusstíl. Sjá tabindex á MDN.