Kasutaja fookuse haldamine funktsiooniga :focus-visible

See on teine ​​postitus väikeses seerias, mida teeme vormide juurdepääsetavuse kohta. Kui esimene postitus jäi kahe silma vahele, siis vaata Pseudoklassidega juurdepääsetavad vormid. Selles postituses vaatleme :focus-visible ja kuidas seda oma veebisaitidel kasutada!

Fookuse puutepunkt

Enne kui edasi liigume :focus-visible, vaatame uuesti, kuidas :focus töötab teie CSS-is. Fookus on visuaalne indikaator, mis näitab, et elemendiga klaviatuuri, hiire, puuteplaadi või abitehnoloogia kaudu suheldakse. Teatud elemendid, nagu lingid, nupud ja vormielemendid, on loomulikult interaktiivsed. Tahame olla kindlad, et meie kasutajad teavad, kus nad on ja kuidas nad suhtlevad.

Pidage meeles, et ärge tehke seda oma CSS-is!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Kui eemaldate fookuse, eemaldate selle KÕIGILE! Tahame olla kindlad, et säilitame fookuse.

Kui peate mingil põhjusel fookuse eemaldama, veenduge, et oleks olemas ka tagavara :focus stiile oma kasutajatele. See varu võib ühtida teie kaubamärgivärvidega, kuid veenduge, et need värvid oleksid ka juurdepääsetavad. Kui turundusele, disainile või brändingule ei meeldi fookusrõnga vaikestiilid, siis on aeg alustada vestlusi ja teha nendega koostööd, et leida parim viis selle tagasi lisamiseks.

Mis on focus-visible?

Pseudoklass, :focus-visible, on täpselt nagu meie vaikeseade :focus pseudoklass. See annab kasutajale indikaatori, et lehele keskendutakse. See, kuidas sa kirjutad :focus-visible lõigatakse ja kuivatatakse:

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

Kasutamisel :focus-visible konkreetse elemendiga näeb süntaks välja umbes selline:

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

Suurepärane asi kasutamise juures :focus-visible kas saate oma elemendi silma paista, särav ja julge! Pole vaja muretseda, et see kuvab, kui elementi klõpsatakse/puudutatakse. Kui otsustate klassi mitte rakendada, on vaikimisi kasutajaagendi fookusrõngas, mis mõne jaoks on ebasoovitav.

Taustalugu focus-visible

Enne kui meil oli :focus-visible, rakendub kasutajaagendi stiil :focus enamikule lehe elementidele; nupud, lingid jne. See rakendaks fookustatavale elemendile kontuuri või "fookusrõnga". Seda peeti inetuks, enamikule ei meeldinud brauseri pakutav vaikefookusrõngas. Kuna fookusrõngast oli ebasoodne vaadata, eemaldas enamik autoreid selle … ilma tagavarata. Pidage meeles, kui eemaldate :focus, vähendab see kasutatavust ja muudab kasutuskogemuse klaviatuurikasutajatele kättesaamatuks.

Veebi praeguses olekus ei näita brauser enam nähtavalt fookust erinevate elementide ümber, kui need on fookuses. Selle asemel kasutab brauser erinevat heuristikat, et määrata, millal see kasutajat aitaks, pakkudes vastutasuks fookusrõngast. Vastavalt Khan Academy, heurist on "tehnika, mis juhib algoritmi heade valikute leidmiseks."

See tähendab, et brauser suudab tuvastada, kas kasutaja kasutab klaviatuuri, hiire või puuteplaadi kasutuskogemust või mitte, ning lisab või eemaldab selle sisenditüübi põhjal fookusrõnga. Selle postituse näide tõstab esile sisendinteraktsiooni.

Aasta alguses :focus-visible kasutasime a polüfill Alice Boxhalli ja Brian Kardelli loodud teravustamisrõnga käsitsemiseks tuli Mozilla välja ka oma pseudoklassiga, :moz-focusring, enne ametlikku spetsifikatsiooni. Kui soovite fookusrõnga algusaegade kohta rohkem teada saada, vaadake A11y heidab koos Rob Dodsoniga.

Keskenduge tähtsusele

On palju põhjuseid, miks fookus on teie rakenduses oluline. Esiteks, nagu ma eespool ütlesin, peame veebi saadikutena tagama, et pakume parimat ja ligipääsetavat kogemust. Me ei taha, et ükski meie kasutaja mõistaks, kus nad on, kui nad kogemuses navigeerivad.

Üks näide, mis alati meelde tuleb, on Kahe pimeda venna veebisait. Kui lähete veebisaidile ja klõpsate/puudutage (see töötab mobiilis), suletud silma all vasakus nurgas, näete, et silm avaneb ja simulatsioon algab. Mõlemad vennad, Bradford ja Bryan Manning, diagnoositi noores eas Stargardti tõvega. Stargardti tõbi on silma kollatähni degeneratsiooni vorm. Aja jooksul jäävad mõlemad vennad täiesti pimedaks. Külastage saiti ja klõpsake silmal, et näha, kuidas nad näevad.

Kui oleksite nende asemel ja peaksite lehte navigeerima, peaksite veenduma, et teadsite kogu kogemuse jooksul täpselt, kus viibite. Fookusrõngas annab teile selle jõu.

Demo

Allolev demo näitab, kuidas :focus-visible töötab, kui see lisatakse teie CSS-i. Video esimene osa näitab hiirega navigeerimise kogemust, teine ​​​​näitab ainult klaviatuuriga navigeerimist. Salvestasin ka ennast, et näidata, et läksin hiire kasutamiselt klaviatuurile.

Brauser ennustab minu sisendi (klaviatuur/hiir) põhjal, mida fookusrõngaga teha, ja lisab seejärel nendele elementidele fookusrõnga. Sel juhul, kui ma selles näites klaviatuuriga navigeerin, fookustatakse kõik. Hiirt kasutades saab fookuse ainult sisend ja nupud mitte. Kui eemaldate :focus-visible, rakendab brauser vaikefookusrõnga.

Allolev kood kehtib :focus-visible fokuseeritavatele elementidele.

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

Kui soovite täpsustada label või vastuvõtmisnupp :focus-visible lihtsalt lisage klassi ette input or button võrra.

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

Toetus

Kui brauser ei toeta :focus-visible interaktsiooni haldamiseks võite end tagasi lükata. Allolev kood pärineb MDN mänguväljak. Võite kasutada @toetab at-reeglil või "funktsioonide päring" toetuse kontrollimiseks. Pidage meeles ühte asja, et reegel tuleks asetada koodi ülaossa või pesastada teise reegli rühma sees.

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

Täiendavad juurdepääsetavuse probleemid

Juurdepääsetavusprobleeme, mida oma kogemuse loomisel meeles pidada.

• Veenduge, et fookusnäidiku jaoks valitud värvid (kui üldse) oleksid endiselt juurdepääsetavad vastavalt dokumendis dokumenteeritud teabele WCAG 2.2 mitteteksti kontrast (AA tase)
• Kognitiivne ülekoormus võib põhjustada kasutajas stressi. Veenduge, et erinevate interaktiivsete elementide stiilid oleksid ühtsed

Brauseri tugi

Lingid

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• PlatoData.Network Vertikaalne generatiivne Ai. Jõustage ennast. Juurdepääs siia.
• PlatoAiStream. Web3 luure. Täiustatud teadmised. Juurdepääs siia.
• PlatoESG. Süsinik, CleanTech, Energia, Keskkond päikeseenergia, Jäätmekäitluse. Juurdepääs siia.
• PlatoTervis. Biotehnoloogia ja kliiniliste uuringute luureandmed. Juurdepääs siia.
• Allikas: https://css-tricks.com/managing-user-focus-with-focus-visible/