Het hebben van een Beetje Plezier Met Aangepaste Focus Stijlen

0
10

Ieder front-end developer heeft behandeld, of zal het gaan met dit scenario: je baas, opdrachtgever of ontwerper denkt dat de omtrek toegepast door browsers op gericht de elementen komt niet overeen met de UI, en vraagt u om het te verwijderen. Of zou u zelfs op zoek te verwijderen het zelf.

Zodat je een beetje onderzoek doen en vaststellen dat dit wordt sterk afgeraden, omdat de focus outline is er voor een reden: het geeft visuele feedback voor het navigeren via het toetsenbord (met de Tab-toets), zodat gebruikers die niet kunnen gebruik maken van een muis of het hebben van een visuele beperking weten waar ze zijn op het scherm.

Deze knop toont een focus staat met Chrome standaard outline style.

Dat betekent niet dat je vastzit met dit boekje, dat wel. In plaats van te verwijderen, kunt u die eenvoudig te vervangen met iets anders. Op die manier houdt u uw interface toegankelijk en krijgen meer flexibiliteit op hoe het eruit ziet, dus je kunt beter overeenkomen met uw UI.

U kunt beginnen door het verwijderen van het standaard browser-contour door het selecteren van de scherp staat van het element en het toepassen van outline: none. Vervolgens kunt u kiezen uit elk van de opties vooruit te vervangen:

De achtergrondkleur wijzigen

Dit werkt het beste voor elementen die kunnen worden ingevuld, zoals knoppen. Selecteer de scherp staat van het element en breng een contrasterende achtergrond kleur aan. Hoe hoger het contrast, hoe beter, want subtiele veranderingen, niet sterk genoeg visuele signalen, met name in gevallen waarin met kleurenblindheid en low-vision.

In het voorbeeld hieronder, zowel de achtergrond en rand van kleur te veranderen; u kunt kiezen een van beide of in beide.

Klik of op de focus met de Tab-toets om te bekijken hoe deze toestand eruit ziet.

Zie de Pen
Elementen vervangen native overzicht focus met achtergrond kleur door Lari (@larimaza)
op CodePen.

Het veranderen van de tekstkleur

Als het element geen tekst selecteert, kunt u de scherp staat en het wijzigen van de kleur. Dit werkt ook voor pictogrammen aangebracht met masker-afbeelding, kunt u de icoon als een afstammeling van de gefocuste element en het wijzigen van de kleur van de achtergrond, zoals de voorbeeld-knop hieronder.

Zie de Pen
Elementen vervangen native overzicht focus met tekst en pictogram kleur door Lari (@larimaza)
op CodePen.

Weer, contrast is de sleutel. U kunt ook overwegen een onderstrepen van tekst-links en maakt het deel uit van de gewijzigde status, omdat, zoals de Web Content Accessibility Guidelines staat:

Kleur wordt niet gebruikt als het enige visuele middel van het overbrengen van informatie, wat wijst op een actie, vragen een antwoord, of een visueel element te onderscheiden. (Niveau A)
Begrijpen Succescriterium 1.4.1

Breng een vak schaduw

De box-shadow woning kan doen precies hetzelfde werk als de omtrek, behalve dat het veel krachtiger is — kunt u nu de controle van de kleur, transparantie, offset, blur radius en verspreid straal. En als een border-radius is opgegeven, wordt het selectievakje schaduw volgt dezelfde afgeronde hoeken.

Zie de Pen
Elementen vervangen native overzicht focus met doos schaduw door Lari (@larimaza)
op CodePen.

U kunt echt creatief met deze techniek (serieus, doe dit niet):

Zie de Pen
Elementen vervangen native overzicht focus met krankzinnig vak schaduw door Lari (@larimaza)
op CodePen.

Dit werkt voor vrijwel elk type focussen element, zoals pinnen, selectievakjes, keuzerondjes en dia ‘ s.

Zie de Pen
In-en uitschakelen en radio-knop vervangen native overzicht focus met doos schaduw door Lari (@larimaza)
op CodePen.

Verhoging van het element grootte

Als alternatief om de kleur te wijzigen, je kan ook gebruik maken van subtiele omvang wijziging als de focus van de feedback. In dit voorbeeld gebruiken we transformeren: schaal.

Zie de Pen
Elementen vervangen native overzicht van de focus aan te transformeren schaal door Lari (@larimaza)
op CodePen.

De sleutel hier is subtiliteit. Extreme grootte wijzigingen mogelijk dat de inhoud opnieuw wordt geplaatst, en niet te vergeten een slechte ervaring voor degenen die de voorkeur geven aan verminderde beweging.

Het repliceren van bestaande beweeg stijlen

Als het element al een contrasterende beweeg stijl, kunt u gewoon nemen een stijl en toe te passen voor het gericht staat. Dit is een vrij elegante oplossing, als je niet hoeft toe te voegen nieuwe kleuren of contouren voor de interface.

Hier is een voorbeeld waar zowel de focus en beweeg lidstaten die bepalingen aannemen van een hoog contrast op de achtergrond van een element is standaard stijl:

Zie de Pen
Elementen vervangen native overzicht focus met de muisaanwijzer stijlen door Lari (@larimaza)
op CodePen.

Bonus: het Aanpassen van de standaard overzicht

Alles wat we hebben gekeken naar tot nu toe duurt de veronderstelling dat willen we verwijderen de focus outline helemaal. We hoeven er niet! In feite, het is een grens die we kunnen aanpassen.

knop:focus {
overzicht: 3px gestippelde oranje;
}

Dat is steno en kon zijn geschreven op deze manier, als we willen om te fine-tunen van de stijlen:

knop:focus {
outline-width: 3px;
outline-style: dashed;
outline-color: orange;
}

Een extra supermacht die wij hebben is de outline-offset goederen, die gescheiden is van de omtrek steno-eigendom, maar kan worden gebruikt, naast het wijzigen van de positie van de focus-ring:

knop:focus {
overzicht: 3px gestippelde oranje;
overzicht-verschuiving: 10px;
}

Conclusie

U kunt mix en match al deze opties voor aangepaste stijlen die er geschikt voor elk type component binnen de interface.

En het is de moeite waard te herhalen: vergeet niet om gebruik stark kleur contrasten en andere visuele aanwijzingen in toevoeging aan kleur bij de vaststelling van aangepaste focus staten. Zeker, we willen allemaal een ervaring die overeenstemt met onze ontwerpen, maar wij kunnen hechten aan een goede toegankelijkheid praktijken in het proces. Het W3C raadt het gebruik van deze tool om te testen het contrast van de kleuren waarden tegen de WCAG-richtlijnen.

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