Fokus på Fokus Stiler

0
49

Ikke alle bruker en mus til å surfe på internett. Hvis du leser dette innlegget på en smarttelefon, dette er åpenbart! Det er også verdt å påpeke er at det er andre former for input som folk bruker for å få ting gjort. Med disse former for input kommer behovet for fokus stiler.

Folk

Folk er komplisert. Vi trenger ikke nødvendigvis å utføre de samme atferd konsekvent, og vi får ikke alltid gjøre vedtak som gir mening fra et utenforstående perspektiv. Noen ganger kan vi selv gjøre noe bare for å… gjøre noe. Vi lei enkelt: fiksing og triksing, poking, og oppfordring ting å tilpasse dem til bedre tilpasset våre behov, uavhengig av deres opprinnelige hensikt.

Folk er også dødelig. Vi kan bli syke og skadde. Noen ganger begge deler samtidig. Noen ganger er det for en liten stund, noen ganger er det permanent. Uansett, det betyr at vi noen ganger ikke klarer å gjøre ting vi ønsker eller trenger for å gjøre, på den måten vi er vant til.

Også personer som lever i verden. Noen ganger kan vi sette inn i et miljø der det er eksterne faktorer som konspirerer for å hindre oss fra å gjøre noe slik som vi er vant til å gjøre det. Noen gang vært fast på dine foreldres hus i løpet av ferien, og måtte bruke sine gamle-men-fortsatt-brukbar datamaskin? Det er sånn.

Inngang

Både musen og trykk på input gi en indikator for samhandling. For touch, det er åpenbare: fingeren Din fungerer som den broen som forbinder hjernen din til å elementet på skjermen, det ønsker å aktivere. For mus, en markør fungerer som en proxy for fingeren.

Imidlertid, disse er ikke de eneste former for input som er tilgjengelig for oss. Tastaturer er allestedsnærværende, og du kan gjøre omtrent alt en mus eller trykk på input kan oppnå, forutsatt at du vet alle de riktige knappene å trykke på i riktig rekkefølge. Noen ganger er det enda lettere og raskere enn å bruke en mus!

Tenk på siste gang du brukte Klipp ut, Kopiere, Lime inn og Lagre funksjonalitet. Kanskje det var siste gang du var å jobbe på et regneark? Var du bytte mellom mus og tastatur input for å få ting gjort så effektivt som mulig? Du har sannsynligvis ikke gi atferd, en tanke, men det er et flott eksempel for å bytte inngang på fly til beste oppnå et mål. Pokker, kanskje du selv tok noen “meg tid” i løpet av denne utakknemlig oppgave å trykke Liker-knappen på din smarttelefon.

Hvis du har problemer med å bruke hendene, andre alternativer er tilgjengelige: Tryllestaver, spaker, brytere, sip og puff enheter, talegjenkjenning, og eye-tracking-teknologi kan alle lage input i et digitalt system. Disse enhetene vil identifisere et innholdsområde og aktivere det. Dette ligner på hvordan du kan trykke tab-tasten på tastaturet og den neste cellen i et regneark vil bli markert, noe som indikerer at den har blitt flyttet til, og er klar til å bli redigert.

I denne videoen, videoredigering og tilgjengelighet konsulent Christopher Bakker demonstrerer mulighetene for Bytte Kontroll, programvare som hjelper mennesker som opplever motorisk kontroll nedskrivninger bruk veksler maskinvare for å drive databehandling enheter.

Det er verdt å peke på at du kan bli avhengig av denne teknologien en dag, selv om det er bare en liten bit. Kanskje du brakk begge armene i en uheldig terrengsykling ulykken, og vil for noen selvmedlidenhet takeaway, mens du samle krefter. Kanskje du er ute og kjører og vil teksten din familie trygt. Eller kanskje vil du bare bli gammel. Det er ikke vanskelig å tenke på andre eksempler, det er bare ikke et konsept folk liker å bo på.

Hvis det interaktive, det er behov for et fokus stil

Vi kan ikke alltid vite hvem som er på besøk våre nettsider og web-applikasjoner, hvorfor de er på besøk, hva de kommer til å gjøre når de får det, hvilke forhold de opplever, hva følelser de føler, eller hva innspill de kan bruke. Analytics kan gi litt innsikt, men ikke male et fullstendig bilde. Det ville være dumt å ha halen wag the dog og optimalisere hele opplevelsen basert på dette øyeblikksbildet av begrenset informasjon.

Det er også viktig å vite at ikke alle som bruker for hjelpeteknologi ønsker å bli identifisert som en hjelpemidler teknologi brukeren. Heller ikke skulle de bli tvunget til å utlevere dette. Superbrukere—folk som utnytter hurtigtaster, spesialisert programvare, og leserutvidelser—kan synes å navigere seg som en bruker av hjelpemidler teknologi, men kanskje ikke opplever noen funksjonshemming forhold. Igjen, folk er komplisert!

Det vi kan gjøre er å preemptively gi en opplevelse som fungerer for alle, uavhengig av evne eller omstendighet.

Identifisere og aktivere
:fokus

Med disse alternative former for input, hvordan kan vi identifisere noe for å vise at det kan være aktivert? Heldigvis, CSS har dette problemet behandlet—vi bruker :fokus og :aktive velgere.

Grammatikken er grei. Ønsker å skissere en link i oransje når en bruker fokuserer på det? Her er hvordan du beskriver det:

a:fokus {
disposisjon: 3px solid orange;
}

Dette utkastet vil vises når noen går til link, bli det ved å klikke eller trykke, tabbe å det via tastatur input, eller bruker bryteren-inngang for å utheve det.

En vanlig misforståelse er at fokus stil kan bare bruke omrisset eiendom. Det er verdt å merke seg at :fokus er en velger som alle andre, som betyr at du aksepterer det fulle spekter av CSS-egenskaper. Jeg liker å spille med bakgrunnsfargen, understreking, og andre teknikker som ikke justere komponent nåværende størrelse, slik som å ikke skift-side oppsett når velgeren er aktivert.

Deretter si at vi ønsker å fjerne koblingen er understreket, når det er aktivert for å kommunisere et skifte i staten. Husk: bruk koblingene understreker!

a:active {
text-decoration: none;
}

Det er viktig å sørge for at staten endres, fra å hvile fokusert for å aktiveres, er tydelige. Dette betyr at hver overgangen bør være unik i forhold til komponenten andre stater, som tillater brukeren å forstå at en endring har skjedd.

Vi ønsker også å sørge for disse state endringer ikke stole på farge alene, for å best imøtekomme mennesker opplever fargeblindhet og/eller svaksynte. Her er hvordan en farge som bare staten kan endre utseende til en person med Deuteranopia, vanligvis kjent som Rød-Grønne colorblindness:

Jeg har med vilje fjernet understreking og nettleserens innfødt fokus ringen fra linken i videoen for å bedre illustrere spørsmålet om oversiktlighet. Når du prøver å fanen rundt på siden for å finne ut hva som er interaktive, det er ikke umiddelbart klart at det er en link til stede. Hvis colorblindness er også en faktor, staten endres når svevde vil ikke bli synlig—dette er enda tydeligere med tillegg av grå stær.

:fokus-i

:fokus-i—fokus-relaterte pseudo klasse selector med en veldig Zen-klingende navn—kan anvende styling til et overordnet element når en av sine barn får i fokus. Fokus event bobler ut til den støter på en CSS-regel å spørre om det å bruke sin styling instruksjoner.

Et vanlig bruksområde for denne dialogen vil være å bruke styling til en hel form når en av dens inngang elementer som får fokus. I eksempelet nedenfor, er jeg skalering opp på størrelse med hele formen litt, med mindre brukeren har uttrykt et ønske om en redusert animasjon erfaring:

Se Penn :fokus-i Demo av Eric Bailey (@ericwbailey) på CodePen.

Velgeren er fortsatt relativt nytt, så jeg er sikker på at vi vil få flere smarte programmer som tiden går.

Politikk

Folk har også meninger. Dessverre, noen ganger er disse meninger er uinformert. Utenfor praksis for tilgjengelighet det er den rådende oppfatningen at fokus stiler er “stygge”, og mange designere og utviklere fjerne dem på grunn av det de oppfatter som estetikk. Noen ganger de er ikke engang klar over at de er å spre andres mening—mange CSS tilbakestiller inkluderer et teppe fjerning av fokus stiler og er innarbeidet som en grunnleggende prosjektet avhengighet uten spørsmål.

Denne beslutningen ekskluderer folk. Nettsteder og web-applikasjoner er ikke i nærheten-beskåret trofeer skal vises uten kontekst på dribbble profil, eller er de statiske skjermbilder på en glatt salg dekk. De finnes, for å bli lest og reagert på, og det er regler som bidrar til å sikre at størst mulig antall mennesker kan gjøre akkurat det.

:fokus-synlig

Faktum i saken er at noen ganger vil folk insisterer på å fjerne fokus stiler, og har nok innflytelse til å tvinge sine medsammensvorne til å gjennomføre sin visjon. Dette er stikk i ansiktet med regler som innebærer at fokus mekanismer må være synlig for nettsteder å være virkelig tilgjengelig. For å komme rundt dette, har vi :fokus-synlig pseudo-velgeren.

:fokus-synlig pseudo-velgeren styling spark i når leseren bestemmer at et fokus hendelsen skjedde, og Bruker Agent heuristikk informere det at ikke-pekeren innspill blir brukt. Det er en fancy måte å si det viser fokusere styling, når det er aktivert via inngang via andre enn musepekeren eller finger tar du hurtig på.

Video av denne CodePen viser hvordan ulike styling er brukt er basert på den type innspill lenken mottar. Når koblingen er overhengende og klikket på via mus, sin understreking er fjernet og skifter litt ned. Når fanebasert til via tastatur input, er :fokus-synlig gjelder en sterk bakgrunnsfargen til kobling i stedet.

Krom har nylig annonsert sin hensikt å implementere :fokus er synlig. Selv om leseren støtte er foreløpig svært begrenset, en polyfill er tilgjengelig. Både det og :fokus-i i-Velgere Nivå 4 Editor ‘ s Utkast, og derfor trolig ha innebygd støtte i de store nettleserne tidligere enn senere.

Du kan vite :fokus-synlig ved sitt andre navn :-moz-focusring. Dette leverandør prefiks pseudo-selector er mozillas implementering av ideen, predating :fokus-synlig forslag fra syv år. I motsetning til andre leverandører prefiks CSS, vi er ikke nødt til å bekymre deg for autoprefixing støtte! Firefox utmerkelser :fokus-synlig erklæring samt :-moz-focusring, som sikrer at det vil være paritet for våre selector navn mellom de to nettleserne.

Ett skritt fram, ett skritt tilbake

Nettleserstøtte er litt av en gni—på nettet er mer enn bare Chrome og Firefox. Mens polyfill kan gi støtte der det ikke er noe opprinnelig, er det ekstra data du laster ned, ekstra kompleksitet for å opprettholde, og ekstra skjørhet lagt til din nyttelast.

Det er også det faktum at enhetene er langt mindre binære om deres input-typer enn de pleide å være. Overflaten, Microsofts flaggskip datamaskinen, og tilbyr tastatur, styreflaten, stylus -, kamera -, tale -, og trykk evne ut av boksen. WebAIM er 2017 Skjermleser Undersøkelse avdekket at mobile enheter kan bli utvidet med tastatur input mer enn du kanskje tror. Heuristikk er fin, men som analytics, kan ikke male et fullstendig bilde.

Et annet punkt å vurdere er at fokus stiler kan være ønskelig for mus brukere. Deres tilstedeværelse er en klar og entydig indikasjon på interaktivitet, som er en stor affordance for personer med nedsatt syn betingelser, kognitive problemer, og folk som er mindre teknologisk adept. Usedvanlig teknologisk flinke folk, de som grok at skjermlesere og hurtigtaster er i hovedsak Vim for en GUI, vil fokus staten å være tydelig som de bruker tastaturet til å danse over skjermen.

En del av å bygge en robust, motstandsdyktig web innebærer å bygge en sterk kjerne erfaring som fungerer i alle nettlesere. Vanilje :fokus velgeren har både bred og dyp støtte til den grad at det er et trygt bet at selv eksotiske nettlesere vil hedre det.

Verden er full av ting som noen mennesker kan se så stygg, mens andre kan finne dem for å være vakker. Personlig kan jeg ikke se fokusere stiler som en skamplett. Som designer, jeg tror at det er en grunnleggende del av det å skape en moden design system. Som en utvikler, som beskriver tilstanden er bare business as usual. Som en person, jeg liker å hjelpe til med å holde web-åpen og tilgjengelig, så det var ment å være.

Hvis du ønsker å lære mer om emnet, UX-Designer Caitlin Geier har en stor writeup på fokus indikatorer.