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.
focus-visible?
Mis on 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.
focus-visible
Taustalugu 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
Selle brauseri tugiandmed pärinevad Kas ma võin kasutada, millel on rohkem üksikasju. Arv näitab, et brauser toetab seda funktsiooni sellel ja uuemal versioonil.
lauaarvuti
Kroom | Firefox | IE | serv | safari |
---|---|---|---|---|
86 | 4* | Ei | 86 | 15.4 |
Mobiil / tahvelarvuti
android-kroom | Android Firefox | Android | iOS Safari |
---|---|---|---|
123 | 124 | 123 | 15.4 |
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/