Dette kommer til å bli det andre innlegget i en liten serie vi gjør om skjematilgjengelighet. Hvis du gikk glipp av det første innlegget, sjekk ut Tilgjengelige skjemaer med pseudoklasser. I dette innlegget skal vi se på :focus-visible og hvordan du bruker det på nettsidene dine!

Fokus berøringspunkt

Før vi går videre med :focus-visible, la oss se hvordan :focus fungerer i din CSS. Fokus er den visuelle indikatoren som et element samhandles med via tastatur, mus, styreflate eller hjelpeteknologi. Enkelte elementer er naturlig interaktive, som lenker, knapper og skjemaelementer. Vi vil sørge for at brukerne våre vet hvor de er og interaksjonene de gjør.

Husk ikke gjør dette i din CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Når du fjerner fokus, fjerner du det for ALLE! Vi vil sørge for at vi bevarer fokuset.

Hvis du av en eller annen grunn trenger å fjerne fokus, sørg for at det også er tilbakefall :focus stiler for brukerne dine. Denne reserven kan matche merkevarefargene dine, men sørg for at disse fargene også er tilgjengelige. Hvis markedsføring, design eller merkevarebygging ikke liker standard fokusringstiler, er det på tide å begynne å ha samtaler og samarbeide med dem om den beste måten å legge den til igjen.

Hva er focus-visible?

Pseudoklassen, :focus-visible, er akkurat som standarden vår :focus pseudoklasse. Det gir brukeren en indikator på at noe fokuseres på siden. Måten du skriver på :focus-visible er kuttet og tørt:

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

Når du bruker :focus-visible med et spesifikt element ser syntaksen omtrent slik ut:

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

Det fine med å bruke :focus-visible er du kan få elementet ditt til å skille seg ut, lyst og dristig! Du trenger ikke bekymre deg for at det skal vises om elementet er klikket/tappet. Hvis du velger å ikke implementere klassen, vil standarden være brukeragentens fokusring som for noen er uønsket.

Bakgrunnshistorie av focus-visible

Før vi hadde :focus-visible, vil brukeragentens stil gjelde :focus til de fleste elementene på siden; knapper, lenker osv. Det vil bruke en kontur eller "fokusring" på det fokuserbare elementet. Dette ble ansett for å være stygt, de fleste likte ikke standard fokusringen nettleseren ga. Som et resultat av at fokusringen var ugunstig å se på, fjernet de fleste forfattere den ... uten tilbakeslag. Husk når du fjerner :focus, reduserer det brukervennligheten og gjør opplevelsen utilgjengelig for tastaturbrukere.

I den nåværende tilstanden til nettet indikerer nettleseren ikke lenger fokus rundt ulike elementer når de har fokus. Nettleseren bruker i stedet varierende heuristikk for å bestemme når det vil hjelpe brukeren, og gir en fokusring i retur. I følge Khan Academy, en heuristikk er, "en teknikk som veileder en algoritme for å finne gode valg."

Hva dette betyr er at nettleseren kan oppdage om brukeren samhandler med opplevelsen fra et tastatur, mus eller styreflate, og basert på den inndatatypen legger den til eller fjerner fokusringen. Eksemplet i dette innlegget fremhever input-interaksjonen.

I de tidlige dager av :focus-visible vi brukte en polyfyll for å håndtere fokusringen skapt av Alice Boxhall og Brian Kardell, kom Mozilla også med sin egen pseudo-klasse, :moz-focusring, før den offisielle spesifikasjonen. Hvis du vil lære mer om de første dagene av fokusringen, sjekk ut A11y Casts med Rob Dodson.

Fokus viktighet

Det er mange grunner til at fokus er viktig i søknaden din. For det første, som jeg sa ovenfor, må vi som ambassadører for nettet sørge for at vi gir den beste, tilgjengelige opplevelsen vi kan. Vi vil ikke at noen av brukerne våre skal gjette hvor de er mens de navigerer gjennom opplevelsen.

Et eksempel som alltid kommer til hjernen er Two Blind Brothers nettsted. Går du inn på nettsiden og klikker/trykker (dette fungerer på mobil), det lukkede øyet nederst i venstre hjørne, vil du se øyet åpne og en simulering starter. Begge brødrene, Bradford og Bryan Manning, ble diagnostisert i ung alder med Stargardts sykdom. Stargardts sykdom er en form for makuladegenerasjon i øyet. Over tid vil begge brødrene være helt blinde. Besøk nettstedet og klikk på øyet for å se hvordan de ser.

Hvis du var i deres sko og du måtte navigere gjennom en side, ville du være sikker på at du visste nøyaktig hvor du var gjennom hele opplevelsen. En fokusring gir deg den kraften.

Demo

Demoen nedenfor viser hvordan :focus-visible fungerer når den legges til CSS. Den første delen av videoen viser opplevelsen når du navigerer gjennom med en mus, den andre viser hvordan du navigerer med bare tastaturet. Jeg tok også opp meg selv for å vise at jeg byttet fra å bruke musen til tastaturet.

Nettleseren forutsier hva den skal gjøre med fokusringen basert på inndataene mine (tastatur/mus), og legger deretter til en fokusring til disse elementene. I dette tilfellet, når jeg navigerer gjennom dette eksemplet med tastaturet, får alt fokus. Når du bruker musen er det kun inngangen som får fokus og ikke knappene. Hvis du fjerner :focus-visible, vil nettleseren bruke standard fokusring.

Koden nedenfor gjelder :focus-visible til de fokuserbare elementene.

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

Hvis du vil spesifisere label eller knappen for å motta :focus-visible bare forbered timen 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;
}

Støtte

Hvis nettleseren ikke støtter :focus-visible du kan falle tilbake på plass for å håndtere interaksjonen. Koden nedenfor er fra MDN lekeplass. Du kan bruke @støtter at-regel eller "funksjonsspørring" for å sjekke support. En ting å huske på, regelen bør plasseres øverst i koden eller nestes inne i en annen 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;
  }
}

Ytterligere tilgjengelighetsproblemer

Tilgjengelighetsbekymringer du bør huske på når du bygger ut opplevelsen din:

• Sørg for at fargene du velger for fokusindikatoren, hvis i det hele tatt, fortsatt er tilgjengelige i henhold til informasjonen som er dokumentert i WCAG 2.2 Ikke-tekstkontrast (nivå AA)
• Kognitiv overbelastning kan forårsake brukerproblemer. Sørg for å holde stiler på ulike interaktive elementer konsekvente

nettleser~~POS=TRUNC

lenker

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• PlatoData.Network Vertical Generative Ai. Styrk deg selv. Tilgang her.
• PlatoAiStream. Web3 Intelligence. Kunnskap forsterket. Tilgang her.
• PlatoESG. Karbon, CleanTech, Energi, Miljø, Solenergi, Avfallshåndtering. Tilgang her.
• PlatoHelse. Bioteknologisk og klinisk etterretning. Tilgang her.
• kilde: https://css-tricks.com/managing-user-focus-with-focus-visible/