Ha Lite Kul Med Anpassad Inriktning Stilar

0
10

Varje front-end-utvecklare har tagit eller kommer att ta detta scenario: din chef, kund eller designer tycker att riktlinjerna tillämpas av webbläsare fokuserade på element som inte matchar UI, och ber dig att ta bort det. Eller du kanske funderar på att ta bort det själv.

Så du gör lite forskning och hitta ut att det är starkt, eftersom fokus disposition är det för en anledning: det ger visuell feedback för navigering med tangentbordet (med Tabb-tangenten), så att användare som inte kan använda en mus eller har en synnedsättning vet var de är på skärmen.

Denna knapp visar ett fokus stat med Chrome är standard disposition stil.

Det betyder inte att du är fast med det här häftet, dock. Istället för att ta bort det, kan du enkelt ersätta den med något annat. På det sättet, kommer du hålla dina gränssnitt tillgängligt och få mer flexibilitet på hur det ser ut, så att du kan bättre matcha ditt UI.

Du kan börja med att ta bort standard-webbläsare översikt genom att välja fokuserat tillstånd av element och tillämpa översikt: ingen. Så, du kan välja de alternativ framåt för att ersätta det:

Ändra bakgrundsfärg

Detta fungerar bäst för element som kan fyllas i, till exempel knappar. Välj fokuserat tillstånd av element och använda en kontrasterande färg på bakgrunden till det. Ju högre kontrast desto bättre eftersom subtila förändringar kan inte vara tillräckligt starka visuella referenser, särskilt i de fall där med färg blindhet och nedsatt syn.

I exemplet nedan, både bakgrund och gränsen färg ändras kan du välja antingen eller både och.

Klicka eller fokus med Tab-tangenten för att visa hur detta tillstånd ser ut.

Se Pennan
Element som ersätter native beskriva fokus med bakgrunden färg av Lari (@larimaza)
på CodePen.

Ändra text färg

Om elementet har någon text kan du välja fokuserat tillstånd och ändra dess färg. Detta fungerar även för ikoner tillämpas med mask-bilden, kan du välja den ikon som en ättling av den fokuserade element och ändra bakgrundsfärg, som i exemplet knappen nedan.

Se Pennan
Element som ersätter native beskriva fokus med text och ikon färg av Lari (@larimaza)
på CodePen.

Igen, däremot är nyckeln. Du kan också överväga att använda en understrykning på textlänkar och göra den till en del av den förändrade tillstånd eftersom, som Web Content Accessibility Guidelines status:

Färg används inte som enda visuella medel för att förmedla information, vilket tyder på en handling, vilket ledde till ett svar, eller att skilja ett visuellt element. (Nivå A)
Förståelse Framgång Kriterium 1.4.1

Applicera en box shadow

Box-shadow egendom kan göra exakt samma jobb som kontur, förutom att det är mycket mer kraftfull — du kan nu kontrollera dess färg, opacitet, offset, blur radie och sprida radie. Och om en border-radius anges, box shadow följer samma rundade hörn.

Se Pennan
Element som ersätter native beskriva fokus med box shadow av Lari (@larimaza)
på CodePen.

Du kan få riktigt kreativ med denna teknik (allvarligt men inte gör det):

Se Pennan
Element som ersätter native beskriva fokus med vansinniga box shadow av Lari (@larimaza)
på CodePen.

Detta fungerar för praktiskt taget alla typer av tabbindexvärden element, som växlar, kryssrutor, alternativknappar och bilder.

Se Pennan
Växla och radio-knappen för att byta native beskriva fokus med box shadow av Lari (@larimaza)
på CodePen.

Öka elementets storlek

Som ett alternativ till att ändra färg, du kan också ta till subtila storlek ändring som fokus feedback. I detta exempel, vi använder oss av transform: skala.

Se Pennan
Element som ersätter native översikt med fokus förändra omfattningen av Lari (@larimaza)
på CodePen.

Det viktigaste här är finessen. Extrema storlek förändringar som kan orsaka innehåll reflow, för att inte nämna en dålig upplevelse för dem som föredrar nedsatt rörelse.

Kopiera befintliga sväva stilar

Om del som redan har en kontrasterande hover stil, kan du ta helt enkelt att stil och tillämpa den för att den fokuserade staten. Detta är en ganska elegant lösning, så du behöver inte lägga till några nya färger eller anger att gränssnittet.

Här är ett exempel där både fokus och sväva stater att anta en hög kontrast mot bakgrunden av ett element är standard stil:

Se Pennan
Element som ersätter native beskriva fokus med hover stilar av Lari (@larimaza)
på CodePen.

Bonus: Anpassa standard översikt

Allt vi har tittat på hittills tar antagandet att vi vill ta bort fokus beskriva helt och hållet. Vi behöver inte! I själva verket, det är en gräns som vi kan anpassa.

knappen:focus {
utkast: 3px streckad orange;
}

Det är stenografi och kunde ha skrivits på detta sätt om vi vill för att finjustera stilar:

knappen:focus {
outline-width: 3px;
konturerad: streckad,
outline-color: orange;
}

Ytterligare en supermakt vi har är konturerna-offset egendom, som är separat från outline stenografi egendom, men kan användas tillsammans med den för att ändra position av focus-ringen:

knappen:focus {
utkast: 3px streckad orange;
outline-offset: 10px;
}

Slutsats

Du kan blanda och matcha alla dessa alternativ för att få anpassade stilar som ser lämpliga för varje komponenttyp i ditt gränssnitt.

Och det är värt att upprepa: glöm inte att använda skarpa färgkontraster och andra visuella ledtrådar förutom färg när det antar anpassade fokus staterna. Visst, vi alla vill ha en upplevelse som ligger i linje med vår design, men vi kan följa god tillgänglighet praxis i processen. W3C rekommenderar detta verktyg för att testa kontrast färger värden mot WCAG-riktlinjerna.

SHARE
Previous article“Headless Mode”
Next article“Huvudlösa Läge”