"Fokusindikatoren er stygg, og den skal jeg fjerne. Nei, dette er ikke til diskusjon." Dette er noen linjer fra en samtale med en designer-utvikler for noen år tilbake. Temaet for samtalen var et nettsted de jobbet med.
Jeg prøvde å forklare problemet med ikke-eksisterende fokusstiler. Likevel insisterte de på at deres syn på skjønnhet var viktigere enn kundens rett til en fungerende nettside.
Og dette har ikke vært den eneste samtalen jeg har hatt rundt fokusstiler. Noen mennesker ønsker hardnakket å fjerne alle fokusstiler fordi de (som musebruker) ikke liker de fokusringene.
I dette blogginnlegget vil jeg fortelle hvorfor disse synlige fokusstilene er så viktige – og hvorfor du aldri bør angi outline -egenskap til 0 eller none for fokusstiler. Men la oss først snakke om selve eiendommen.
Hva er outline ?
outline er en CSS-egenskap, eller faktisk en CSS-stenografi-egenskap. Det betyr at du kan angi flere egenskaper med den. Disse egenskapene er outline-color , outline-style og outline-width. Du kan angi én, to eller tre attributter samtidig. Her er et eksempel:
.className {
outline: 2px solid red;
}
I dette eksemplet er omrisset satt til å være en hel rød linje, som er 2px bred.
I boksmodellen, outline er satt utenfor boksens kantlinje og legger ikke til elementets størrelse, noe som betyr at det ikke tar plass fra sideoppsettet.
Du kan endre utseendet til omrisset med ytterligere to egenskaper:outline-offset , som påvirker hvor langt fra grensen til et element omrisset er, og border-radius , som endrer radiusen til grensen. Det påvirker hele elementet, ikke bare omrisset.
Du kan lese mer om outline i MDN.
outline og Fokus
Standardstilene for fokusindikatorer er implementert med outline -eiendom. Hver nettleser har sine egne standardstiler for denne fokusindikatoren.
Disse standardstilene er definert med stilark for brukeragenter. Jens Oliver Meier har skrevet mer om dem, hvis du er interessert:"User Agent Style Sheets:Basics and Samples".
Her er eksempler på standard fokusindikatorer for Chrome, Firefox og Safari, som sett på Mac:
Chrome:
Firefox:
Safari:
Eksemplene er fra det finske kringkastingsselskapets (Yle) nettside. Jeg har deaktivert forfatterstilene med nettutviklerutvidelsen.
Som du kanskje legger merke til fra eksemplene, er disse stilene ikke synlige under de fleste forhold. Standard stiler for fokusindikator passerer WCAG-kriterier om synlig fokus. Likevel mener jeg tilgjengelighet ikke bare skal handle om å bestå suksesskriteriene. Det skal handle om inkludering, og dermed er det et must å skape mer synlige fokusstiler.
Hvorfor er synlige fokusstiler viktige?
Så hvorfor er det så viktig å ha synlige fokusstiler? Det er fordi ikke alle bruker mus. Mange mennesker foretrekker eller trenger å bruke verktøy som tastaturer, bytte enheter eller andre for å navigere på siden. Og når de gjør det, har de ikke musepekeren for å fortelle dem hvor de er på siden – de er avhengige av fokusstiler.
Så for å si det kort - å ikke ha synlige fokusstiler er som å bruke en nettside med en mus, men markøren er usynlig.
Men hva om jeg har bedre fokusstiler?
Konturen forsvinner helt når du angir outline til ingen eller 0. Nå kan du spørre:"Men hva om jeg har bedre fokusstiler? Hvorfor kan jeg ikke fjerne omrisset da?"
Problemet er at det fjerner omrisset fra alle steder – også fra for eksempel Windows High Contrast Mode (WHCM)-brukere. WHCM fungerer ved å fjerne bakgrunnsfarger og bilder og erstatte tekstfarge (og noen andre farger) med fargene til det valgte temaet. Det påvirker ting som box-shadow – Det er ikke synlig i det hele tatt. Og det betyr igjen at de fleste av de forbedrede fokusstilene ikke vises.
"Så jeg sitter fast med en synlig kontur, da?" Jeg har gode nyheter:Nei, det er du ikke! Du kan faktisk bruke transparent -søkeord som dette:
.some-element:focus {
outline: 1px solid transparent;
}
Det vil dukke opp i WHCM ettersom det tvinger fargene på eksisterende konturer og vil være gjennomsiktig i andre tilfeller. Og også, fordi omrisset ikke tar opp plass på boksene, vil det gjennomsiktige omrisset være usynlig i andre tilfeller.
Avslutning
Så, kjernen i dette blogginnlegget er:sett aldri outline -egenskap til 0 eller none for fokusstiler, bruk transparent -søkeord for fargen i disse tilfellene. Og hvis du gjør dette, husk å legge til (flere) synlige fokusstiler via den valgte alternative metoden.
Linker
- Les mer om
outlinei MDN - "User Agent Style Sheets:Grunnleggende og eksempler"