To bo druga objava v majhni seriji, ki jo pripravljamo o dostopnosti obrazcev. Če ste zamudili prvo objavo, si oglejte Dostopni obrazci s psevdo razredi. V tej objavi si bomo ogledali :focus-visible in kako ga uporabiti na svojih spletnih mestih!

Focus Touchpoint

Preden gremo naprej z :focus-visible, poglejmo ponovno, kako :focus deluje v vašem CSS. Fokus je vizualni indikator, da je element v interakciji prek tipkovnice, miške, sledilne ploščice ali podporne tehnologije. Nekateri elementi so naravno interaktivni, kot so povezave, gumbi in elementi obrazca. Želimo zagotoviti, da naši uporabniki vedo, kje so in kakšne interakcije izvajajo.

Ne pozabite, da tega ne počnite v svojem CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Ko odstranite fokus, ga odstranite za VSI! Želimo se prepričati, da ohranjamo fokus.

Če morate iz kakršnega koli razloga odstraniti fokus, se prepričajte, da obstaja tudi nadomestna možnost :focus stilov za vaše uporabnike. Ta rezerva se lahko ujema z barvami vaše blagovne znamke, vendar poskrbite, da bodo te barve tudi dostopne. Če marketingu, oblikovanju ali blagovni znamki niso všeč privzeti slogi prstanov za ostrenje, potem je čas, da se začnete pogovarjati in z njimi sodelovati o najboljšem načinu, kako jih znova dodati.

Kaj je focus-visible?

Psevdo razred, :focus-visible, je tako kot naš privzeti :focus psevdo razred. Uporabniku daje indikator, da je na strani nekaj osredotočeno. Način pisanja :focus-visible se razreže in posuši:

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

Pri uporabi :focus-visible z določenim elementom je sintaksa videti nekako takole:

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

Odlična stvar pri uporabi :focus-visible lahko naredite, da vaš element izstopa, svetlo in drzno! Ni vam treba skrbeti, da bo prikazano, ali je element kliknjen/tapnjen. Če se odločite, da ne boste implementirali razreda, bo privzeti fokusni obroč uporabniškega agenta, kar je za nekatere nezaželeno.

Zadnje zgodbe focus-visible

Preden smo imeli :focus-visible, bi veljal slog uporabniškega agenta :focus na večino elementov na strani; gumbi, povezave itd. Na element, ki ga je mogoče fokusirati, bi uporabil obris ali "obroč za ostrenje". To se je zdelo grdo, večini ni bil všeč privzeti obroč za ostrenje, ki ga je ponujal brskalnik. Ker obroč za fokusiranje ni bil ugoden za ogled, ga je večina avtorjev odstranila ... brez rezerve. Ne pozabite, ko odstranite :focus, zmanjšuje uporabnost in naredi izkušnjo nedostopno za uporabnike tipkovnice.

V trenutnem stanju spleta brskalnik ne označuje več vidno fokusa okoli različnih elementov, ko imajo fokus. Brskalnik namesto tega uporablja različne hevristike, da ugotovi, kdaj bi uporabniku pomagal, in v zameno zagotovi fokusni obroč. Po navedbah Khan Academy, hevristika je, "tehnika, ki vodi algoritem, da najde dobre izbire."

To pomeni, da lahko brskalnik zazna, ali uporabnik uporablja izkušnjo s tipkovnico, miško ali sledilno ploščico, in glede na to vrsto vnosa doda ali odstrani obroč za ostrenje. Primer v tej objavi poudarja vhodno interakcijo.

V zgodnjih dneh :focus-visible uporabljali smo a polifil za obdelavo fokusnega obroča, ki sta ga ustvarila Alice Boxhall in Brian Kardell, je tudi Mozilla izdala svoj psevdo razred, :moz-focusring, pred uradno specifikacijo. Če želite izvedeti več o prvih dneh fokusnega obroča, si oglejte A11y Casts z Robom Dodsonom.

Osredotočite se na pomembnost

Obstaja veliko razlogov, zakaj je fokus pomemben pri vaši prijavi. Prvič, kot sem omenil zgoraj, moramo kot ambasadorji spleta zagotoviti najboljšo in dostopno izkušnjo, ki jo lahko. Nočemo, da bi kateri od naših uporabnikov ugibal, kje so, medtem ko krmarijo po izkušnji.

Primer, ki mi vedno pride na misel, je Spletna stran Dva slepa brata. Če obiščete spletno mesto in kliknete/tapnete (to deluje na mobilniku), zaprto oko v spodnjem levem kotu, boste videli odprto oko in simulacija se začne. Oba brata, Bradford in Bryan Manning, sta bila v mladosti diagnosticirana s Stargardtovo boleznijo. Stargardtova bolezen je oblika makularne degeneracije očesa. Čez čas bosta oba brata popolnoma oslepela. Obiščite spletno mesto in kliknite oko, da vidite, kako vidijo.

Če bi bili na njihovem mestu in bi morali brskati po strani, bi se želeli prepričati, da natančno veste, kje ste skozi celotno izkušnjo. Fokusni obroč vam daje to moč.

Predstavitev

Spodnja predstavitev prikazuje, kako :focus-visible deluje, ko je dodan vašemu CSS. Prvi del videoposnetka prikazuje izkušnjo krmarjenja z miško, drugi pa krmarjenje samo s tipkovnico. Posnel sem tudi sebe, da pokažem, da sem prešel z miške na tipkovnico.

Brskalnik na podlagi mojih vnosov (tipkovnica/miška) predvideva, kaj naj naredi z obročem za ostrenje, in nato tem elementom doda obroč za ostrenje. V tem primeru, ko se po tem primeru premikam s tipkovnico, je vse v fokusu. Ko uporabljate miško, dobi fokus samo vnos, gumbi pa ne. Če odstranite :focus-visible, bo brskalnik uporabil privzeti obroč za ostrenje.

Velja spodnja koda :focus-visible do elementov, ki jih je mogoče fokusirati.

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

Če želite določiti label ali gumb za sprejem :focus-visible samo pred razred s input or button oz.

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;
}

Podpora

Če brskalnik ne podpira :focus-visible lahko se vrnete na svoje mesto, da obvladate interakcijo. Spodnja koda je iz Igrišče MDN. Lahko uporabite @podpira na-pravilo oz "poizvedba po funkciji" za preverjanje podpore. Upoštevajte eno stvar, pravilo mora biti postavljeno na vrh kode ali ugnezdeno znotraj druge skupine at-rule.

<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;
  }
}

Dodatni pomisleki glede dostopnosti

Pomisleki glede dostopnosti, ki jih morate upoštevati pri gradnji svoje izkušnje:

• Prepričajte se, da so barve, ki jih izberete za indikator izostritve, če sploh, še vedno dostopne v skladu z informacijami, dokumentiranimi v Kontrast brez besedila WCAG 2.2 (raven AA)
• Kognitivna preobremenjenost lahko povzroči stisko uporabnika. Poskrbite, da bodo slogi na različnih interaktivnih elementih dosledni

Browser Support

Moj meni

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• PlatoData.Network Vertical Generative Ai. Opolnomočite se. Dostopite tukaj.
• PlatoAiStream. Web3 Intelligence. Razširjeno znanje. Dostopite tukaj.
• PlatoESG. Ogljik, CleanTech, Energija, Okolje, sončna energija, Ravnanje z odpadki. Dostopite tukaj.
• PlatoHealth. Obveščanje o biotehnologiji in kliničnih preskušanjih. Dostopite tukaj.
• vir: https://css-tricks.com/managing-user-focus-with-focus-visible/