Acesta va fi al 2-lea post dintr-o serie mică pe care o facem despre accesibilitatea formularelor. Dacă ați ratat prima postare, verificați Formulare accesibile cu pseudo-clase. În această postare ne vom uita la :focus-visible și cum să-l folosești pe site-urile tale web!
Punct de atingere focalizat
Înainte să mergem înainte cu :focus-visible, să revedem cum :focus funcționează în CSS. Focalizarea este indicatorul vizual cu care un element este interacționat prin tastatură, mouse, trackpad sau tehnologie de asistență. Anumite elemente sunt în mod natural interactive, cum ar fi linkurile, butoanele și elementele de formular. Dorim să ne asigurăm că utilizatorii noștri știu unde se află și interacțiunile pe care le fac.
Nu uitați să nu faceți acest lucru în CSS!
:focus {
outline: 0;
}
/*** OR ***/
:focus {
outline: none;
}Când eliminați focalizarea, o eliminați pentru TOATA LUMEA! Vrem să ne asigurăm că păstrăm focalizarea.
Dacă, dintr-un motiv oarecare, trebuie să eliminați focalizarea, asigurați-vă că există și un back-up :focus stiluri pentru utilizatorii dvs. Această alternativă se poate potrivi cu culorile dvs. de branding, dar asigurați-vă că acele culori sunt, de asemenea, accesibile. Dacă marketingul, designul sau brandingul nu le plac stilurile implicite de inel de focalizare, atunci este timpul să începeți să purtați conversații și să colaborați cu ei la cel mai bun mod de a le adăuga din nou.
Ce este focus-visible?
Pseudoclasa, :focus-visible, este la fel ca implicit :focus pseudo clasa. Oferă utilizatorului un indicator că ceva este concentrat pe pagină. Felul în care scrii :focus-visible este tăiat și uscat:
:focus-visible {
/* ... */
}Atunci când se utilizează :focus-visible cu un element specific, sintaxa arată cam așa:
.your-element:focus-visible {
/*...*/
}Lucrul grozav despre utilizarea :focus-visible este că poți face elementul tău să iasă în evidență, strălucitor și îndrăzneț! Nu trebuie să vă faceți griji că se va afișa dacă elementul este făcut clic/atingat. Dacă alegeți să nu implementați clasa, implicit va fi inelul de focalizare al agentului utilizator, care pentru unii nu este de dorit.
Povestea de fundal a focus-visible
Înainte să avem :focus-visible, s-ar aplica stilul agentului utilizator :focus la majoritatea elementelor de pe pagină; butoane, link-uri etc. Ar aplica un contur sau „inel de focalizare” elementului focalizat. Acest lucru a fost considerat a fi urât, majoritatea nu le-a plăcut inelul de focalizare implicit oferit de browser. Ca rezultat al inelului de focalizare nefavorabil la privit, majoritatea autorilor l-au eliminat... fără o alternativă. Amintiți-vă, când eliminați :focus, scade gradul de utilizare și face experiența inaccesibilă pentru utilizatorii de tastatură.
În starea actuală a web-ului, browserul nu mai indică vizibil focalizarea în jurul diferitelor elemente atunci când acestea au focalizare. Browserul folosește în schimb euristici diferite pentru a determina când ar ajuta utilizatorul, oferind în schimb un inel de focalizare. Conform Khan Academia, o euristică este, „o tehnică care ghidează un algoritm pentru a găsi alegeri bune.”
Acest lucru înseamnă că browserul poate detecta dacă utilizatorul interacționează sau nu cu experiența de pe o tastatură, mouse sau trackpad și, pe baza acelui tip de intrare, adaugă sau elimină inelul de focalizare. Exemplul din această postare evidențiază interacțiunea de intrare.
În primele zile ale anului :focus-visible folosim un polifund pentru a se ocupa de inelul de focalizare creat de Alice Boxhall și Brian Kardell, Mozilla a apărut și cu propria lor pseudo clasă, :moz-focusring, înainte de caietul de sarcini oficial. Dacă doriți să aflați mai multe despre primele zile ale inelului de focalizare, verificați A11y Distribuie cu Rob Dodson.
Concentrați-vă asupra importanței
Există o mulțime de motive pentru care concentrarea este importantă în aplicația dvs. În primul rând, așa cum am spus mai sus, noi, în calitate de ambasadori ai internetului, trebuie să ne asigurăm că oferim cea mai bună experiență accesibilă posibilă. Nu dorim ca niciunul dintre utilizatorii noștri să ghicească unde se află în timp ce navighează prin experiență.
Un exemplu care îmi vine întotdeauna în minte este Site-ul web Two Blind Brothers. Dacă accesați site-ul web și faceți clic/atingeți (aceasta funcționează pe mobil), ochiul închis din colțul din stânga jos, veți vedea ochiul deschis și începe o simulare. Ambii frați, Bradford și Bryan Manning, au fost diagnosticați la o vârstă fragedă cu boala Stargardt. Boala Stargardt este o formă de degenerescență maculară a ochiului. În timp, ambii frați vor fi complet orbi. Vizitați site-ul și faceți clic pe ochi pentru a vedea cum văd.
Dacă ai fi în locul lor și ai trebui să navighezi printr-o pagină, ai dori să te asiguri că știi exact unde te afli pe parcursul întregii experiențe. Un inel de focalizare vă oferă această putere.
Demo
Demo de mai jos arată cum :focus-visible funcționează atunci când este adăugat la CSS. Prima parte a videoclipului arată experiența când navighezi cu mouse-ul, a doua arată că navighezi doar cu tastatura mea. M-am înregistrat și eu pentru a arăta că am trecut de la utilizarea mouse-ului la tastatură.
Browserul prezice ce să facă cu inelul de focalizare în funcție de intrarea mea (tastatură/mouse), apoi adaugă un inel de focalizare acelor elemente. În acest caz, când navighez prin acest exemplu cu tastatura, totul primește focus. Când utilizați mouse-ul, doar intrarea este focalizată, iar butoanele nu. Dacă eliminați :focus-visible, browserul va aplica inelul de focalizare implicit.
Se aplică codul de mai jos :focus-visible la elementele focalizabile.
:focus-visible {
outline-color: black;
font-size: 1.2em;
font-family: serif;
font-weight: bold;
}Dacă doriți să specificați label sau butonul pentru a primi :focus-visible doar înaintează clasa cu input or button respectiv.
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;
}Suport
Dacă browserul nu acceptă :focus-visible puteți avea o retragere în loc pentru a gestiona interacțiunea. Codul de mai jos este de la Locul de joacă MDN. Puteți utiliza @sprijină la-regula sau „interogare de funcții” pentru a verifica suportul. Un lucru de reținut, regula ar trebui să fie plasată în partea de sus a codului sau imbricată în interiorul unui alt grup la regulă.
<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;
}
}Preocupări suplimentare privind accesibilitatea
Probleme de accesibilitate de care trebuie să țineți cont atunci când vă construiți experiența:
- Asigurați-vă că culorile pe care le alegeți pentru indicatorul de focalizare, dacă este deloc, sunt încă accesibile conform informațiilor documentate în Contrast fără text WCAG 2.2 (Nivel AA)
- Supraîncărcarea cognitivă poate provoca suferință utilizatorului. Asigurați-vă că păstrați consecvența stilurilor pentru diferitele elemente interactive
Suport pentru browser
Datele de asistență ale acestui browser provin de la Pot folosi, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția la versiunea respectivă și mai sus.
Desktop
| Chrome | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 86 | 4* | Nu | 86 | 15.4 |
Mobil/Tabletă
| Android-chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 123 | 124 | 123 | 15.4 |
Link-uri
- Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
- PlatoData.Network Vertical Generative Ai. Împuterniciți-vă. Accesați Aici.
- PlatoAiStream. Web3 Intelligence. Cunoștințe amplificate. Accesați Aici.
- PlatoESG. carbon, CleanTech, Energie, Mediu inconjurator, Solar, Managementul deșeurilor. Accesați Aici.
- PlatoHealth. Biotehnologie și Inteligență pentru studii clinice. Accesați Aici.
- Sursa: https://css-tricks.com/managing-user-focus-with-focus-visible/