Håndtering af brugerfokus med :focus-visible

Dette bliver det 2. indlæg i en lille serie, vi laver om formulartilgængelighed. Hvis du gik glip af det første indlæg, så tjek ud Tilgængelige formularer med pseudoklasser. I dette indlæg skal vi se på :focus-visible og hvordan du bruger det på dine websteder!

Fokus berøringspunkt

Inden vi går videre med :focus-visible, lad os se hvordan :focus virker i din CSS. Fokus er den visuelle indikator for, at et element bliver interageret med via tastatur, mus, pegefelt eller hjælpeteknologi. Visse elementer er naturligt interaktive, såsom links, knapper og formularelementer. Vi vil sikre os, at vores brugere ved, hvor de er, og de interaktioner, de foretager.

Husk, at du ikke gør dette i din CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Når du fjerner fokus, fjerner du det for ALLE SAMMEN! Vi vil sikre os, at vi bevarer fokus.

Hvis du af en eller anden grund har brug for at fjerne fokus, skal du sørge for, at der også er tilbagefald :focus stilarter til dine brugere. Denne reserve kan matche dine brandingfarver, men sørg for, at disse farver også er tilgængelige. Hvis markedsføring, design eller branding ikke kan lide standard fokusringstile, så er det tid til at begynde at føre samtaler og samarbejde med dem om den bedste måde at tilføje det igen.

Hvad er focus-visible?

Pseudoklassen, :focus-visible, er ligesom vores standard :focus pseudo klasse. Det giver brugeren en indikator på, at der er noget, der fokuseres på siden. Måden du skriver på :focus-visible er skåret og tørret:

:focus-visible {
  /* ... */
}

Når du bruger :focus-visible med et specifikt element ser syntaksen sådan ud:

.your-element:focus-visible {
  /*...*/
}

Det fantastiske ved at bruge :focus-visible er du kan få dit element til at skille sig ud, lyst og modigt! Ingen grund til at bekymre dig om, at det viser, om elementet er klikket/tappet. Hvis du vælger ikke at implementere klassen, vil standarden være brugeragentens fokusring, hvilket for nogle er uønsket.

Baghistorie af focus-visible

Før vi havde :focus-visible, ville brugeragentens styling gælde :focus til de fleste elementer på siden; knapper, links osv. Det ville anvende en kontur eller "fokusring" til det fokuserbare element. Dette blev anset for at være grimt, de fleste kunne ikke lide standardfokusringen, som browseren leverede. Som et resultat af, at fokusringen var ugunstig at se på, fjernede de fleste forfattere den ... uden en tilbagegang. Husk, når du fjerner :focus, mindsker det brugervenligheden og gør oplevelsen utilgængelig for tastaturbrugere.

I den aktuelle tilstand på nettet angiver browseren ikke længere synligt fokus omkring forskellige elementer, når de har fokus. Browseren bruger i stedet varierende heuristik til at afgøre, hvornår det vil hjælpe brugeren, og giver en fokusring til gengæld. Ifølge Khan Academy, en heuristik er, "en teknik, der guider en algoritme til at finde gode valg."

Det betyder, at browseren kan registrere, om brugeren interagerer med oplevelsen fra et tastatur, mus eller pegefelt, og baseret på den inputtype tilføjer eller fjerner den fokusringen. Eksemplet i dette indlæg fremhæver input-interaktionen.

I de tidlige dage af :focus-visible vi brugte en polyfyld for at håndtere fokusringen skabt af Alice Boxhall og Brian Kardell, kom Mozilla også ud med deres egen pseudo-klasse, :moz-focusring, før den officielle specifikation. Hvis du vil lære mere om fokusringens tidlige dage, så tjek ud A11y Afstøbninger med Rob Dodson.

Fokus vigtighed

Der er mange grunde til, at fokus er vigtigt i din ansøgning. For det første, som jeg sagde ovenfor, skal vi som ambassadører for nettet sørge for, at vi leverer den bedste, tilgængelige oplevelse, vi kan. Vi ønsker ikke, at nogen af ​​vores brugere gætter, hvor de er, mens de navigerer gennem oplevelsen.

Et eksempel, der altid kommer til at tænke på, er Two Blind Brothers hjemmeside. Går du ind på hjemmesiden og klikker/trykker (dette virker på mobil), det lukkede øje i nederste venstre hjørne, vil du se øjet åbne og en simulering begynder. Begge brødre, Bradford og Bryan Manning, blev diagnosticeret i en ung alder med Stargardts sygdom. Stargardts sygdom er en form for makuladegeneration af øjet. Med tiden vil begge brødre være fuldstændig blinde. Besøg webstedet og klik på øjet for at se, hvordan de ser.

Hvis du var i deres sko, og du skulle navigere gennem en side, ville du gerne sikre dig, at du vidste præcis, hvor du var under hele oplevelsen. En fokusring giver dig den kraft.

Demo

Demoen nedenfor viser hvordan :focus-visible virker, når den føjes til din CSS. Den første del af videoen viser oplevelsen, når du navigerer igennem med en mus, den anden viser, hvordan du navigerer igennem med kun mit tastatur. Jeg optog også mig selv for at vise, at jeg skiftede fra at bruge min mus til mit tastatur.

Browseren forudsiger, hvad den skal gøre med fokusringen baseret på mit input (tastatur/mus), og tilføjer derefter en fokusring til disse elementer. I dette tilfælde, når jeg navigerer gennem dette eksempel med tastaturet, får alt fokus. Når du bruger musen, er det kun input, der får fokus, og det gør knapperne ikke. Hvis du fjerner :focus-visible, vil browseren anvende standardfokusringen.

Koden nedenfor er gældende :focus-visible til de fokuserbare elementer.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Hvis du ønsker at specificere label eller knappen for at modtage :focus-visible bare foretag klassen med input or button henholdsvis.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Support

Hvis browseren ikke understøtter :focus-visible du kan falde tilbage på plads for at håndtere interaktionen. Koden nedenfor er fra MDN Legeplads. Du kan bruge @bakker op at-regel eller "funktionsforespørgsel" for at tjekke support. En ting at huske på, reglen skal placeres øverst i koden eller indlejres i en anden gruppe-at-regel.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Yderligere bekymringer om tilgængelighed

Tilgængelighedsproblemer, du skal huske på, når du bygger din oplevelse ud:

• Sørg for, at de farver, du vælger til din fokusindikator, hvis overhovedet, stadig er tilgængelige i henhold til de oplysninger, der er dokumenteret i WCAG 2.2 Ikke-tekstkontrast (niveau AA)
• Kognitiv overbelastning kan forårsage en brugerens nød. Sørg for at holde stilarter på forskellige interaktive elementer konsekvente

Browser Support

Links

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• PlatoData.Network Vertical Generative Ai. Styrk dig selv. Adgang her.
• PlatoAiStream. Web3 intelligens. Viden forstærket. Adgang her.
• PlatoESG. Kulstof, CleanTech, Energi, Miljø, Solenergi, Affaldshåndtering. Adgang her.
• PlatoHealth. Bioteknologiske og kliniske forsøgs intelligens. Adgang her.
• Kilde: https://css-tricks.com/managing-user-focus-with-focus-visible/