Gericht op Focus Stijlen

0
27

Niet iedereen maakt gebruik van een muis voor het surfen op het internet. Als je het lezen van deze post op een smartphone, dat is duidelijk! Wat ook de moeite waard erop te wijzen dat er andere vormen van input die mensen gebruiken om dingen gedaan te krijgen. Met deze vormen van input komt de behoefte aan focus stijlen.

Mensen

Mensen zijn ingewikkeld. We hoeven niet noodzakelijkerwijs hetzelfde gedrag consequent, noch hebben wij altijd beslissingen nemen die zin is het perspectief van een buitenstaander. Soms zijn we zelfs iets te doen gewoon… doe er iets aan. We vervelen eenvoudig: knutselen, porren, en aansporingen dingen om ze aan te passen om beter aan te sluiten bij onze behoeften, ongeacht hun oorspronkelijke bedoeling.

Mensen zijn sterfelijk. We kunnen ziek en gewond. Soms beide tegelijk. Soms is het voor een tijdje, soms permanent. Hoe dan ook, het betekent dat we soms niet in staat bent om dingen te doen die we willen of moeten doen op de manier waarop we gewend zijn.

Mensen wonen ook in de wereld. Soms hebben we in een omgeving waar externe factoren samenspannen om te voorkomen dat we iets aan het doen op de manier die we gewend zijn te doen. Ooit al vast bij je ouders’ huis tijdens de vakantie en moesten hun oude-nog-steeds-te onderhouden desktop computer? Het is net als dat.

Ingang

Zowel muis en invoer door aanraking zorgen voor een indicator voor interactie. Voor touch, het is duidelijk: Je vinger fungeert als brug verbindt je geest om het item op het scherm wil activeren. Voor muizen, een cursor fungeert als een proxy voor je vingers.

Echter, dit zijn niet de enige vormen van input voor ons beschikbaar. Toetsenborden zijn overal aanwezig en kan zo ongeveer alles doen wat een muis of touch-input kunt bereiken, mits je weet de juiste toetsen in te drukken in de juiste volgorde. Soms is het zelfs makkelijker en sneller dan met een muis!

Denk na over de laatste keer dat je met behulp van Knippen, Kopiëren, Plakken en Opslaan functionaliteit. Misschien was het de laatste keer dat je werkt aan een spreadsheet? Was u wisselen tussen muis en toetsenbord om dingen gedaan te krijgen zo efficiënt mogelijk? U heeft waarschijnlijk niet geven dat gedrag na te denken, maar het is een geweldig voorbeeld van de schakeleenheid op de vlieg het beste bereiken van een doel. Heck, misschien heb je nam zelfs een aantal “me time” tijdens deze ondankbare taak te porren de Like-knop op uw smartphone.

Als u problemen heeft met uw handen, andere opties zijn beschikbaar: Toverstokken, stokken, schakelaars, sip en bladerdeeg apparaten, spraakherkenning, en de eye tracking technologie kan zorgen voor input in een digitaal systeem. Deze apparaten zal het identificeren van een gebied inhoud en activeren . Dit is vergelijkbaar met hoe kan je de tab-toets op een toetsenbord en de volgende cel in een werkblad wordt gemarkeerd om aan te geven dat deze is verplaatst en is klaar om te worden bewerkt.

In deze video, video-editor en toegankelijkheid consultant Christopher Heuvels demonstreert de mogelijkheden van de Switch-Control, software die mensen helpt bij het ervaren van motor control bijzondere waardeverminderingen gebruik maken van de hardware-schakelaars voor de bediening van de computerapparatuur.

Het is de moeite waard erop te wijzen dat je zou kunnen een beroep op deze technologie op een dag, zelfs als het alleen een beetje. Misschien heb je brak beide armen in een ongelukkige mountainbiken ongeval, en je wilt bestellen zelfmedelijden takeout terwijl u op krachten te komen. Misschien bent u rijden en wilt u de tekst van uw familie veilig. Of misschien ben je gewoon te oud. Het is niet moeilijk om te denken van andere voorbeelden, het is gewoon niet een concept dat mensen graag willen wonen.

Als het interactieve, het moet een focus stijl

We kunnen niet altijd weten wie uw bezoek aan onze websites en apps, waarom ze bezoeken, wat ze gaan doen als ze er zijn, wat de voorwaarden die ze ervaren, welke emoties ze voelen, of welke input ze kan gebruiken. Analytics kan enig inzicht verschaffen, maar schildert niet een volledig beeld. Het zou dwaas zijn om de staart kwispelen van de hond en het optimaliseren van de gehele ervaring aan de hand van deze momentopname van beperkte informatie.

Het is ook belangrijk om te weten dat niet iedereen die assistentie-technologie gebruikt wil worden geïdentificeerd als een assistentie-technologie-gebruiker. Noch mogen ze worden gedwongen om dit bekend te maken. Power-users—mensen die leverage sneltoetsen, gespecialiseerde software en browser extensies kunnen worden weergegeven om te navigeren als een gebruiker van de assistentie-technologie, maar kan niet last krijgt van een handicap voorwaarden. Nogmaals, mensen zijn ingewikkeld!

Wat we wel kunnen doen is bij voorbaat een ervaring die werkt voor iedereen, ongeacht het vermogen, of de omstandigheid.

Identificeren en activeren
:focus

Met deze alternatieve vormen van invoer, hoe identificeren we ons iets te laten zien dat het kan worden geactiveerd? Gelukkig, CSS heeft dit probleem aangepakt hebben, gebruiken we de :focus en :actieve kiezers.

De grammatica is simpel. Overzicht van een link in het oranje wanneer een gebruiker zich richt op? Hier is hoe het te beschrijven:

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

Dit overzicht zal worden weergegeven wanneer iemand hiermee navigeert u naar de link, door op of te tikken, de tab-toets om het via invoer van het toetsenbord, of met de knop input te selecteren.

Een veel voorkomende misvatting is dat de focus stijl kunt alleen gebruik maken van het overzicht eigendom. Het is de moeite waard op te merken dat :focus is een keuze als een andere, wat betekent dat het accepteert de volledige waaier van CSS-eigenschappen. Ik speel graag met achtergrond kleur, onderstreping, en andere technieken die niet passen, de component van de huidige omvang, zodat het niet verschuiven pagina lay-out wanneer de keuzemogelijkheid is geactiveerd.

Zeg dan willen we verwijderen de link ‘ s onderstrepen wanneer geactiveerd om te communiceren met een verschuiving in staat. Vergeet niet: links gebruiken onderstreept!

a:active {
text-decoration: none;
}

Het is belangrijk ervoor te zorgen dat de wijzigingen van de status, uit te rusten op gericht om geactiveerd, zijn te onderscheiden. Dit betekent dat elke overgang moet uniek zijn in vergelijking met de component van de andere lidstaten, waardoor de gebruiker om te begrijpen dat er een wijziging is opgetreden.

Ook willen We ervoor zorgen dat deze wijzigingen van de status vertrouw niet op de kleur alleen al te best geschikt voor mensen die in kleur blindheid en/of gezichtsvermogen. Hier is hoe een kleur-alleen staat verandering zou kunnen kijken naar een persoon met Deuteranopie, algemeen bekend als Rood-Groen kleurenblindheid:

Ik heb met opzet verwijderd van de onderlijn en de browser van de inheemse scherpstelring van de link in de video beter te kunnen illustreren het probleem van vindbaarheid. Wanneer het proberen om het tabblad om de pagina om te bepalen wat het is interactief, het is niet direct duidelijk dat er een link aanwezig is. Als kleurenblindheid is ook een factor die de toestand veranderen wanneer zweefde niet duidelijk—dit is eens te meer duidelijk met de toevoeging van staar.

:focus-binnen

:focus-in—een focus-gerelateerde pseudo-class selector met een zeer Zen-klinkende naam—kan van toepassing styling naar een bovenliggend element wanneer één van de kinderen de focus krijgt. De focus gebeurtenis uit bellen totdat hij wordt geconfronteerd met een CSS-regel waarin het van toepassing zijn styling instructies.

Een algemeen geval voor deze kiezer zou toepassing van de styling van een gehele formulier als één van de input-elementen focus krijgt. In het voorbeeld hieronder, ik ben het opschalen van de grootte van het gehele formulier licht, tenzij de gebruiker heeft de wens geuit voor een beperkte animatie ervaring:

Zie de Pen :focus-in Demo door Eric Bailey (@ericwbailey) op CodePen.

De selector is nog relatief nieuw, dus ik weet zeker dat we meer slimme toepassingen naarmate de tijd vordert.

Politiek

Mensen hebben ook een mening hebben. Helaas, soms zijn deze adviezen niet op de hoogte zijn. Buiten de praktijk van de toegankelijkheid er is de heersende opvatting dat de focus stijlen zijn “lelijke” en vele ontwerpers en ontwikkelaars verwijderen omwille van de waargenomen esthetiek. Soms zijn ze niet eens van bewust dat ze het uitdragen van de mening van iemand anders—veel CSS reset onder een deken verwijdering van focus stijlen en worden opgenomen als een fundamenteel project afhankelijkheid met geen vragen gesteld.

Dit besluit sluit mensen. Websites en web apps zijn niet close-bijgesneden trofeeën worden weergegeven zonder context op een dribbble profiel, noch zijn zij statische screenshots op een gladde corporate sales dek. Ze bestaan om te worden gelezen en opgevolgd, en zijn er regels die ervoor zorgen dat de grootst mogelijke hoeveelheid mensen kan exact dat te doen.

:focus-zichtbaar

Het feit van de zaak is dat mensen soms zal aandringen op het verwijderen focus stijlen, en hebben genoeg slagkracht te dwingen hun cohorten voor het uitvoeren van hun visie. Dit druist in tegen de regels die bepalen dat de focus mechanismen moet zichtbaar zijn voor websites echt bereikbaar. Om dit te omzeilen, we hebben de :focus-zichtbaar pseudo-selector.

:focus-zichtbaar pseudo-selector styling begint wanneer de browser bepaalt dat een focus gebeurtenis heeft plaatsgevonden, en de User-Agent heuristiek te informeren dat de niet-pointer input wordt gebruikt. Dat is een mooie manier van zeggen: het geeft focus styling wanneer geactiveerd via ingang via andere dan de muis cursor of een tik van de vinger.

De video van deze CodePen laat zien hoe verschillende styling wordt toegepast op basis van de aard van de input de link ontvangt. Wanneer u op een link zweefde en klikte op via de muis, de onderstreping is verwijderd en de verschuivingen iets omlaag. Wanneer tabbladen om via het toetsenbord input :focus-zichtbaar geldt een grimmige achtergrond kleur op de link in de plaats.

Chroom heeft onlangs aangekondigd haar intentie om te implementeren :focus-zichtbaar. Hoewel steun van de browser is momenteel zeer beperkt, een polyfill is beschikbaar. En :focus-in, zijn in de Selectors Level 4 Editor ‘ s Ontwerp, en dus waarschijnlijk ondersteuning in de belangrijkste browsers eerder vroeger dan later.

U mag weten :focus-zichtbaar door haar andere naam :-moz-focusring. Deze leverancier voorafgegaan pseudo-selector is Mozilla ‘ s de uitvoering van het idee, van vóór de :focus-zichtbaar voorstel van zeven jaar. In tegenstelling tot andere leverancier voorafgegaan CSS, we gaan geen zorgen hoeft te maken over autoprefixing steun! Firefox eert een :focus-zichtbare verklaring alsmede :-moz-focusring, zorgen er pariteit voor onze selector namen tussen de twee browsers.

Een stap voorwaarts, één stap terug

Browser support is een beetje een rub—het web is meer dan alleen in Chrome en Firefox. Terwijl de polyfill kan bieden ondersteuning waar er is geen native, het is extra gegevens te downloaden, extra complexiteit te behouden, en de extra kwetsbaarheid toegevoegd aan uw lading.

Er is ook het feit dat apparaten veel minder binaire over hun input types dan ze gebruikt worden. De Surface, Microsoft ‘ s vlaggenschip, de computer, biedt toetsenbord, trackpad, pen, camera, stem, en de touch-mogelijkheden van het vak. WebAIM is 2017 Scherm Enquête bleek dat mobiele apparaten kan worden uitgebreid met een toetsenbord meer dan u misschien denkt. Heuristieken zijn leuk, maar zoals analytics, kan niet een compleet beeld.

Een ander punt om te overwegen is dat de focus stijlen kan het wenselijk zijn om voor muisgebruikers. Hun aanwezigheid is een duidelijke en ondubbelzinnige vermelding van interactiviteit, dat is een goede affordance voor mensen met een beperkt gezichtsvermogen voorwaarden, cognitieve problemen en mensen die minder technologisch bedreven. Buitengewoon technologisch vaardige mensen, degenen die grok dat scherm lezers en de sneltoetsen zijn in wezen Vim voor een GUI, wil de focus staat te worden duidelijk als ze gebruik maken van het toetsenbord om te dansen over het scherm.

Een deel van het gebouw een robuust, veerkrachtig web gaat om het bouwen van een sterke core ervaring dat werkt in elke browser. De vanille :focus selector heeft zowel brede en diepe ondersteunen in de mate dat het is een veilige gok dat zelfs exotische browsers zal nakomen.

De wereld is vol van dingen die sommige mensen kan zien als lelijk, terwijl anderen vinden ze mooi. Persoonlijk zie ik niet in focus stijlen als een doorn in het oog. Als ontwerper, ik denk dat het een fundamenteel onderdeel van het creëren van een volwassen design systeem. Als een ontwikkelaar, waarin staat is gewoon business as usual. Als een persoon, ik geniet helpen om het web open en toegankelijk zijn, zoals het bedoeld was te zijn.

Als u meer wilt weten over het onderwerp, UX Designer Caitlin Geier heeft een grote writeup op focus-indicatoren.