Med fokus på Fokus Stilar

0
26

Inte alla använder en mus för att surfa på internet. Om du läser detta inlägg på en smartphone, det är uppenbart! Vad som också är värt att påpeka är att det finns andra former av input som människor använder för att få saker gjort. Med dessa former av input kommer behovet av att fokusera stilar.

Människor

Människor är komplicerade. Vi behöver inte nödvändigtvis utföra samma beteenden konsekvent, inte heller vi alltid fatta beslut som är vettiga, från en utomståendes perspektiv. Ibland kan vi även göra något bara för att… göra något. Vi blir lätt uttråkade: fiffla, peta, och prodding saker för att anpassa dem för att bättre passa våra behov, oberoende av deras ursprungliga avsikt.

Människor är dödliga. Vi kan bli sjuka och skadade. Ibland båda på en gång. Ibland är det för en liten stund, ibland är det permanent. Oavsett, det innebär att vi ibland är oförmögna att göra saker vi vill eller behöver göra på det sätt som vi är vana vid.

Bor också i världen. Ibland kan vi lägga till en miljö där externa faktorer samverkar för att hindra oss från att göra något sätt som vi är vana vid att göra det. Någonsin varit fast vid dina föräldrars hus under helgen och var tvungen att använda deras gamla-men-fortfarande-kan servas av stationär dator? Det är som att.

Ingång

Både musen och tryck på input ge en indikator för samverkan. För kontakt, är det uppenbart: Ditt finger fungerar som den bro som förbinder dig till den punkt på skärmen för den som vill aktivera. För möss, en markör fungerar som en proxy för ditt finger.

Men dessa är inte de enda former av indata som finns tillgängliga för oss. Tangentbord är allestädes närvarande och kan göra precis vad som helst en mus eller touch input kan åstadkomma, förutsatt att du vet alla de rätta tangenterna i rätt ordning. Ibland är det ännu enklare och snabbare än att använda en mus!

Tänk på senaste gången du använder Klipp ut, Kopiera, Klistra in och Spara funktionalitet. Kanske var det sista gången du arbetar på ett kalkylblad? Var du byta mellan mus och tangentbordet för att få saker gjorda på ett så effektivt sätt som möjligt? Du har förmodligen inte ge det beteendet en andra tanke, men det är ett bra exempel på att byta ingång på flugan för att bäst uppnå ett mål. Heck, kanske du till och med tog lite “me time” under denna otacksam uppgift att peta på Gilla-knappen på din smartphone.

Om du har problem med dina händer, andra alternativ finns tillgängliga: Stavar, stänger, växlar, sip och puff enheter, röstigenkänning och eye tracking-teknik kan alla skapa ingång i ett digitalt system. Dessa enheter kommer att identifiera ett innehåll och aktivera det. Detta liknar hur du kan slå på tab-tangenten på ett tangentbord och nästa cell i ett kalkylblad kommer att lyftas fram, vilket tyder på att den har flyttats till och är redo att redigeras.

I denna video, tv-redaktör och tillgänglighet konsult Christopher Hills demonstrerar funktionerna i Växla Kontroll, programvara som hjälper människor som drabbats av motorisk kontroll nedskrivningar använda hårdvara växlar för att driva sin it-utrustning.

Det är värt att påpeka att man kunde förlita sig på denna teknik en dag, även om det bara är för lite. Kanske du bröt båda armarna i en olycklig mountainbike olycka, och vill beställa lite självömkan avhämtning medan du återhämta sig. Kanske är du drivande och vill sms: a din familj på ett säkert sätt. Eller så kanske du bara bli gammal. Det är inte svårt att tänka på andra exempel, det är bara inte ett begrepp som människor gillar att bo på.

Om det är interaktivt, det behöver fokus stil

Vi kan inte alltid veta vem som besöker våra webbsidor och webbappar, varför de besöker, vad de ska göra när de kommer dit, vilka villkor som de upplever, vilka känslor de känner, eller vilken information som de kan använda. Analytics kan ge vissa insikter, men inte måla en fullständig bild. Det skulle vara dumt att ha svansen vifta på hunden och optimera hela upplevelsen baserat på denna ögonblicksbild av begränsad information.

Det är också viktigt att veta att inte alla som använder hjälpmedel och ny teknik vill identifieras som ett hjälpmedel för användaren. Inte heller bör de vara tvungna att lämna ut detta. Avancerade användare—personer som hävstång kortkommandon, specialiserade program och webbläsare—kan verka för att navigera som en användare av hjälpmedel, men kan inte ha drabbats av någon åkomma villkor. Igen, människor är komplicerade!

Vad vi kan göra är att förebyggande syfte göra en upplevelse som fungerar för alla, oavsett förmåga eller omständighet.

Identifiera och aktivera
:fokus

Med dessa alternativa former av insatser, hur gör vi identifierar något för att visa att det kan vara aktiverad? Lyckligtvis, CSS har detta problem hanteras—vi använder :fokus och aktiva väljare.

Grammatiken är enkel. Vill beskriva en länk i orange när en användare fokuserar på det? Här är hur man ska beskriva det:

a:focus {
utkast: 3px solid orange;
}

Denna översikt visas när någon går till länken, bli det genom att klicka eller trycka på, tabb till den via tangentbordet eller med hjälp av switch input för att markera den.

En vanlig missuppfattning är att fokus stil kan bara använda beskriva egendom. Det är värt att notera att :fokus är en väljare som alla andra, vilket innebär att den accepterar den fullständiga sortiment av CSS-egenskaper. Jag gillar att spela med bakgrundsfärg, understrykning och andra tekniker som inte justera komponent nuvarande storlek, så att inte byta layout när väljaren är aktiverad.

Att sedan säga att vi vill ta bort länken understryka när den aktiveras för att kommunicera en förändring i tillståndet. Kom ihåg: länkar använd understryker!

a:active {
text-decoration: none;
}

Det är viktigt att se till att staten förändringar, från vila till fokus för att aktiveras, är tydlig. Detta innebär att varje övergång bör vara unik jämfört med komponentens andra stater, vilket tillåter användaren att förstå att en förändring har skett.

Vi vill också se till att dessa ändringar inte är beroende av färgen på egen hand, till bästa plats för människor som drabbats av färgblindhet och/eller nedsatt syn. Här är hur en färg-bara staten förändring kan se ut för en person med Deuteranopia, allmänt känd som Röd-Grön colorblindness:

Jag har medvetet tagit bort understrykning och webbläsarens native focus-ringen från länken i videon för att bättre illustrera frågan om möjligheten att upptäcka. När man försöker fliken runt på sidan för att avgöra vad som är interaktiv, det är inte omedelbart uppenbart att det är en länk närvarande. Om colorblindness är också en faktor, staten förändring när svävade inte vara uppenbart—det här är ännu tydligare med tillägg av grå starr.

:fokus-inom

:fokus-i—fokus-relaterade pseudo klass väljare med mycket Zen-klingande namn—kan tillämpa styling till ett överordnat element när ett av sina barn får fokus. Fokus händelse bubblor tills den stöter på en CSS-regel för att be den att använda sin styling instruktioner.

En gemensam använda fallet för väljare skulle vara att tillämpa styling till en hel form när en av dess ingående delar får fokus. I exemplet nedan, jag trappa upp storleken på hela formen något, om inte användaren har uttryckt en önskan om ett minskat animation erfarenhet:

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

Väljaren är fortfarande relativt ny, så jag är säker på att vi kommer att få fler smarta tillämpningar som tiden går.

Politik

Människor har också åsikter. Tyvärr, ibland är dessa åsikter som är okunniga. Utanför bruket av tillgänglighet det är den gängse uppfattningen att fokusera stilar är “fula” och många designers och utvecklare att ta bort dem för den skull uppfattas estetik. Ibland är de inte ens medvetna om att de är sprider någon annans yttrande—många CSS återställer inkluderar en filt borttagning av fokus stilar och ingår som en grundläggande projektet beroende med några frågor.

Detta beslut exkluderar människor. Webbplatser och appar som inte är kortklippta troféer att visas utan sammanhang på dribbble profil, inte heller är de statiska skärmdumpar på en fiffig företagens försäljning av däck. De finns att läsa och åtgärdas, och det finns regler som hjälper till att säkerställa att största möjliga mängd människor kan göra just det.

:fokus-synligt

Faktum är att ibland människor kommer att insistera på att ta bort fokus stilar, och har tillräckligt med inflytande för att tvinga sina anhängare att genomföra sin vision. Detta går stick i stäv med regler som föreskriver att fokusera mekanismer måste vara synlig för webbplatser att bli verkligt tillgänglig. För att komma runt detta har vi :fokus är synligt pseudo-väljare.

fokus är synligt pseudo-väljare styling sparkar på när webbläsaren fastställer att ett fokus händelsen inträffade, och User Agent heuristik underrätta det om att icke-pointer input används. Det är ett finare sätt att säga det visar fokus styling när den aktiveras via ingång via andra än muspekaren eller peka finger.

Videon i detta CodePen visar hur olika styling tillämpas baserat på typ av ingång länken får. När en länk är svävade och klickat på via mus input, dess understryka tas bort och flyttar ner något. När flikar att via tangentbordet, med fokus synligt gäller en skarp färg för bakgrunden till länken istället.

Krom har nyligen meddelat sin avsikt att genomföra :fokus är synligt. Även om webbläsaren stöder för närvarande är mycket begränsad, en polyfill är tillgängliga. Både den och :fokus-i i Selectors Nivå 4 Redaktör: s Förslag, och därför sannolikt har inbyggt stöd i större webbläsare förr än senare.

Du får veta fokus är synligt av sina andra namn :-moz-focusring. Den här säljaren föregås pseudo-väljaren är Mozillas genomförandet av idén, som föregick :fokus synligt på förslag av sju år. Till skillnad från en annan leverantör föregås CSS, vi ska inte oroa dig för autoprefixing stöd! Firefox hedrar :fokus-synlig förklaring liksom :-moz-focusring, se till att det kommer att vara paritet för våra väljare namn mellan två webbläsare.

Ett steg framåt, ett steg tillbaka

Webbläsare-stöd är en bit av en rub—webben är mer än bara Chrome och Firefox. Medan polyfill kan ge stöd när det är inget naturligt, det är extra data att ladda ner, extra komplexitet för att upprätthålla, och extra bräcklighet lagts till i din nyttolast.

Det är också det faktum att enheterna är långt mindre binära om deras input-typer än de brukade vara. Ytan, Microsofts flaggskepp dator, erbjuder tangentbord, styrplatta, penna, kamera -, röst-och touch kapacitet ur lådan. WebAIM är 2017 skärmläsare Undersökning visar att mobila enheter kan kompletteras med tangentbordet mer än du kanske tror. Heuristik är fina, men gillar analytics, kan inte måla en fullständig bild.

En annan sak att tänka på är att fokusera stilar kan vara önskvärt för musen användare. Deras närvaro är en klar och entydig indikation på interaktivitet, vilket är en stor affordance för personer med nedsatt syn villkor, kognitiva problem, och människor som är mindre tekniskt skickliga. Utomordentligt tekniskt skickliga människor, de som grok som skärmläsare och kortkommandon finns i huvudsak Vim för ett GUI, kommer att ha fokus tillstånd att vara uppenbar, eftersom de använder tangentbordet för att dansa över skärmen.

En del av att bygga en robust, flexibel webben handlar om att bygga upp en stark kärna erfarenhet som fungerar i alla webbläsare. Vanilj :fokus väljare har både bred och djup stöd till den grad att det är en säker satsning att även exotiska webbläsare kommer att hedra det.

Världen är full av saker som vissa människor kan se så ful, medan andra anser dem vara vacker. Personligen kan jag inte se att fokusera stilar som en skamfläck. Som designer, jag tror att det är en grundläggande del i att skapa en gammal design. Som utvecklare, som beskriver tillståndet är bara business as usual. Som en person, jag tycker om att hjälpa till att hålla nätet öppet och tillgängligt, så som det var avsett att vara.

Om du skulle vilja lära dig mer om ämnet, UX-Designer Caitlin Geier har en stor writeup fokus indikatorer.