Ha det Litt Moro Med Tilpasset Fokus Stiler

0
7

Hver front-end utvikler har fått eller vil håndtere dette scenariet: sjefen din, klient eller designer mener omrisset brukes av nettlesere på fokusert elementer som ikke samsvarer UI, og ber deg om å fjerne det. Eller du kan selv være ute etter å fjerne det selv.

Så du gjør litt research og finne ut at dette er sterkt nedprioritert, fordi fokus disposisjon er der for en grunn: den gir visuell tilbakemelding for tastaturet for å navigere (ved hjelp av Tab-tasten), la brukere som ikke kan bruke en mus eller har en synshemming vet hvor de er på skjermen.

Denne knappen viser at et fokus stat med Chrome som standard outline-stil.

Det betyr ikke at du sitter fast med denne disposisjon, skjønt. I stedet for å fjerne det, kan du bare erstatte det med noe annet. På den måten vil du holde grensesnitt som er tilgjengelig og få mer fleksibilitet på hvordan det ser ut, slik at du kan passe bedre til UI.

Du kan starte med å fjerne standard nettleser skissere ved å velge fokusert tilstand av elementet, og søker disposisjon: ingen. Deretter, du kan velge mellom ulike alternativer for videre å erstatte det:

Endre bakgrunnsfargen

Dette fungerer best for elementer som kan fylles, for eksempel knapper. Velg fokusert tilstand av elementet, gjelder en kontrast til bakgrunnsfargen til det. Jo høyere kontrast til det bedre fordi små endringer kan ikke være sterk nok visuelle signaler, spesielt i tilfeller der med farge blinde og svaksynte.

I eksempelet nedenfor, både bakgrunn og ramme farge du vil endre, og du kan velge enten eller begge deler.

Klikk eller fokus med Tab-tasten for å vise hvordan denne tilstanden ser ut.

Se Penn
Elementer skifte native skissere fokus med bakgrunnsfarge ved Lari (@larimaza)
på CodePen.

Endre tekstfarge

Hvis elementet har noen tekst, kan du velge fokusert tilstand og endre sin farge. Dette fungerer også for ikoner brukes med maske-bilde, kan du velge ikonet som en etterkommer av fokusert element og endre bakgrunnsfargen, som eksempel-knappen nedenfor.

Se Penn
Elementer skifte native skissere fokus med tekst og ikon farge ved Lari (@larimaza)
på CodePen.

Igjen, kontrast er nøkkelen. Du kan også vurdere å bruke en understreking av tekst linker, og gjør det til en del av endret tilstand fordi, som Web Content Accessibility Guidelines state:

Fargen er ikke brukt som den eneste visual middel til å formidle informasjon, noe som indikerer en handling, å be om et svar, eller å skille et visuelt element. (Nivå A)
Forstå Suksesskriteriene 1.4.1

Bruk en boks skygge

Box-shadow eiendom kan gjøre akkurat den samme jobben som omrisset, bortsett fra at det er mye mer kraftig, og du kan nå kontrollere sin farge, dekkevne, offset, blur radius og spre radius. Og hvis en border-radius er angitt, safe skygge følger de samme avrundede hjørner.

Se Penn
Elementer skifte native skissere fokus med boksen skyggen av Lari (@larimaza)
på CodePen.

Du kan få virkelig kreativ med denne teknikken (seriøst om, ikke kunne gjøre dette):

Se Penn
Elementer skifte native skissere fokus med sinnsyk boksen skyggen av Lari (@larimaza)
på CodePen.

Dette fungerer for nesten alle typer fokuserbart element, som veksler, avkrysningsbokser, radioknapper og lysbilder.

Se Penn
Veksle og radio-knappen for å bytte native skissere fokus med boksen skyggen av Lari (@larimaza)
på CodePen.

Øker elementets størrelse

Som et alternativ til å endre farge, du kan også ty til subtile størrelse endringer fokus tilbakemeldinger. I dette eksemplet bruker vi forvandle: skala.

Se Penn
Elementer skifte native skissere fokus med transform skala av Lari (@larimaza)
på CodePen.

Nøkkelen her er finesse. Ekstrem størrelse endringer kan føre til at innhold flyte, for ikke å nevne en dårlig opplevelse for de som foretrekker redusert bevegelse.

Kopiere eksisterende hold stiler

Hvis elementet har allerede en kontrasterende hold stil, kan du bare ta som stil og bruk den for fokusert tilstand som godt. Dette er en ganske elegant løsning, som du ikke trenger å legge til noen nye farger eller konturene til grensesnittet.

Her er et eksempel der både fokus og hold stater vedta en stor kontrast til bakgrunnen av et element er standard stil:

Se Penn
Elementer skifte native skissere fokus med hover stiler av Lari (@larimaza)
på CodePen.

Bonus: Tilpasse standard disposisjon

Alt vi har sett på så langt tar forutsetning av at vi ønsker å fjerne fokuset skissere helt. Vi trenger ikke å! Faktisk, det er en ramme som vi kan tilpasse.

knappen:fokus {
disposisjon: 3px stiplede orange;
}

Det er kort og kunne ha blitt skrevet på denne måten, hvis vi ønsker å finjustere stiler:

knappen:fokus {
outline-width: 3px;
outline-style: stiplede;
outline-color: orange;
}

En ekstra supermakt vi har, er omrisset-offset eiendom, som er atskilt fra skissere kort eiendom, men kan brukes sammen med det å endre plasseringen av fokus ringen:

knappen:fokus {
disposisjon: 3px stiplede orange;
outline-offset: 10px;
}

Konklusjon

Du kan mikse og matche alle disse alternativene for å få egendefinerte stiler som ser passende ut for hver komponent skriver i grensesnittet.

Og det er verdt å gjenta: ikke glem å bruke sterk farge, kontraster og andre visuelle indikatorer i tillegg til farge når vedta tilpasset fokus stater. Jada, vi ønsker alle en opplevelse som passer med våre design, men vi kan forholde seg til god tilgjengelighet praksis i prosessen. W3C anbefaler dette verktøyet til å teste kontrasten av farger verdier mot WCAG-retningslinjene.