Felhasználói fókusz kezelése a :focus-visible segítségével

Ez lesz a 2. bejegyzés abban a kis sorozatban, amelyet az űrlapok hozzáférhetőségéről készítünk. Ha lemaradtál az első bejegyzésről, nézd meg Hozzáférhető űrlapok pszeudoosztályokkal. Ebben a bejegyzésben a :focus-visible-t fogjuk megvizsgálni, és azt, hogy hogyan használd fel a webhelyeden!

Fókusz érintési pont

Mielőtt továbblépnénk vele :focus-visible, nézzük meg újra, hogyan :focus működik a CSS-ben. A fókusz annak a vizuális jelzése, hogy egy elemet billentyűzeten, egéren, görgetőpadon vagy kisegítő technológián keresztül kommunikálnak. Bizonyos elemek – például hivatkozások, gombok és űrlapelemek – természetesen interaktívak. Biztosak akarunk lenni abban, hogy felhasználóink ​​tudják, hol vannak és milyen interakciókat folytatnak.

Ne feledje, ne tegye ezt a CSS-ben!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Amikor eltávolítja a fókuszt, akkor eltávolítja MINDENKI! Biztosak akarunk lenni abban, hogy megőrizzük a fókuszt.

Ha bármilyen okból el kell távolítania a fókuszt, győződjön meg arról, hogy van tartalék is :focus stílusokat a felhasználók számára. Ez a tartalék megfelelhet a márkaszíneknek, de ügyeljen arra, hogy ezek a színek is hozzáférhetők legyenek. Ha a marketing, a dizájn vagy a márkaépítés nem szereti az alapértelmezett fókuszgyűrű-stílusokat, akkor ideje elkezdeni a beszélgetéseket, és együttműködni velük annak érdekében, hogy miként lehet a legjobban hozzáadni.

Mi focus-visible?

Az álosztály, :focus-visible, olyan, mint az alapértelmezett :focus álosztály. Jelzi a felhasználónak, hogy valami az oldalra koncentrál. Ahogy írod :focus-visible vágva és szárítva:

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

Használat során :focus-visible egy adott elemmel a szintaxis valahogy így néz ki:

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

A nagyszerű dolog a használatban :focus-visible kiemelheti az elemét, fényes és merész! Nem kell aggódnia amiatt, hogy megjelenik, ha az elemre kattintott/koppintott. Ha úgy dönt, hogy nem implementálja az osztályt, az alapértelmezett a felhasználói ügynök fókuszgyűrűje lesz, amely egyesek számára nem kívánatos.

Háttértörténete focus-visible

Mielőtt nálunk volt a :focus-visible, a felhasználói ügynök stílusa érvényesül :focus az oldal legtöbb elemére; gombok, hivatkozások stb. Egy körvonalat vagy „fókuszgyűrűt” alkalmazna a fókuszálható elemen. Ezt csúnyának ítélték meg, a legtöbbnek nem tetszett a böngésző által biztosított alapértelmezett fókuszgyűrű. Mivel a fókuszgyűrű nem volt kedvező ránézésre, a legtöbb szerző eltávolította… tartalék nélkül. Ne feledje, amikor eltávolítja :focus, csökkenti a használhatóságot, és elérhetetlenné teszi az élményt a billentyűzetet használók számára.

Az internet jelenlegi állapotában a böngésző már nem jelzi láthatóan a fókuszt a különböző elemek körül, ha azok fókuszban vannak. Ehelyett a böngésző különböző heurisztikákat használ annak meghatározására, hogy mikor segít a felhasználónak, cserébe fókuszgyűrűt biztosítva. Alapján Khan Academy, a heurisztika az, „Egy olyan technika, amely egy algoritmust irányít a jó választások megtalálásához.”

Ez azt jelenti, hogy a böngésző képes észlelni, hogy a felhasználó billentyűzetről, egérről vagy trackpadről interakcióba lép-e az élményben, és az adott beviteli típus alapján hozzáadja vagy eltávolítja a fókuszgyűrűt. Az ebben a bejegyzésben szereplő példa kiemeli a bemeneti interakciót.

A korai napokban :focus-visible használtunk a polifill Az Alice Boxhall és Brian Kardell által készített fókuszgyűrű kezelésére a Mozilla is kijött a saját álosztályával, :moz-focusring, a hivatalos specifikáció előtt. Ha többet szeretne megtudni a fókuszgyűrű korai napjairól, nézze meg A11y Cast Rob Dodsonnal.

Fókuszban a fontosság

Számos oka van annak, hogy miért fontos a fókusz az alkalmazásban. Egyrészt, amint fentebb kifejtettem, nekünk, a web nagyköveteinek gondoskodnunk kell arról, hogy a lehető legjobb, elérhető élményt nyújtsuk. Nem akarjuk, hogy felhasználóink ​​találgassák, hol vannak, miközben navigálnak az élményben.

Az egyik példa, ami mindig eszembe jut, az a Two Blind Brothers weboldal. Ha felkeresi a webhelyet, és a bal alsó sarokban lévő csukott szemre kattint/koppint (mobilon működik), látni fogja, hogy a szem nyitva van, és elkezdődik a szimuláció. Mindkét testvérnél, Bradfordnál és Bryan Manningnél fiatalon Stargardt-kórt diagnosztizáltak. A Stargardt-kór a szem makuladegenerációjának egyik formája. Idővel mindkét testvér teljesen vak lesz. Látogassa meg a webhelyet, és kattintson a szemre, hogy megtudja, hogyan látnak.

Ha az ő helyükben lennél, és végig kellene navigálnod egy oldalon, akkor meg akarod győződni arról, hogy az egész élmény során pontosan tudod, hol van. A fókuszgyűrű megadja ezt az erőt.

Demó

Az alábbi bemutató bemutatja, hogyan :focus-visible akkor működik, ha hozzáadjuk a CSS-hez. A videó első része az egérrel való navigálás élményét mutatja be, a második pedig a billentyűzettel való navigálást mutatja be. Felvettem magamat is, hogy megmutassam, hogy az egér használatáról a billentyűzetre váltottam.

A böngésző az én bemenetem (billentyűzet/egér) alapján megjósolja, hogy mit kell tenni a fókuszgyűrűvel, majd fókuszgyűrűt ad hozzá ezekhez az elemekhez. Ebben az esetben, amikor ebben a példában navigálok a billentyűzettel, minden fókuszba kerül. Az egér használatakor csak a bemenet kap fókuszt, a gombok nem. Ha eltávolítod :focus-visible, a böngésző az alapértelmezett fókuszgyűrűt alkalmazza.

Az alábbi kód érvényes :focus-visible a fókuszálható elemekhez.

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

Ha szeretné megadni a label vagy a fogadás gombot :focus-visible csak tedd az osztály elé input or button illetőleg.

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

Támogatás

Ha a böngésző nem támogatja :focus-visible visszaeshet a helyén az interakció kezeléséhez. Az alábbi kód a MDN játszótér. Használhatja a @támogatja at-szabály vagy „funkció lekérdezés” hogy ellenőrizze a támogatást. Egy dolog, amit szem előtt kell tartani, a szabályt a kód tetejére kell helyezni, vagy be kell ágyazni egy másik szabálycsoportba.

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

További akadálymentességi aggályok

A kisegítő lehetőségekkel kapcsolatos aggályokat tartsa szem előtt, amikor tapasztalatot készít:

• Győződjön meg arról, hogy a fókuszjelzőhöz kiválasztott színek, ha egyáltalán elérhetők, továbbra is elérhetők a dokumentumban dokumentált információk szerint WCAG 2.2 nem szöveges kontraszt (AA szint)
• A kognitív túlterhelés szorongást okozhat a felhasználónak. Ügyeljen arra, hogy a különböző interaktív elemek stílusai egységesek legyenek

Böngésző támogatás

Linkek

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• PlatoData.Network Vertical Generative Ai. Erősítse meg magát. Hozzáférés itt.
• PlatoAiStream. Web3 Intelligence. Felerősített tudás. Hozzáférés itt.
• PlatoESG. Carbon, CleanTech, Energia, Környezet, Nap, Hulladékgazdálkodás. Hozzáférés itt.
• PlatoHealth. Biotechnológiai és klinikai vizsgálatok intelligencia. Hozzáférés itt.
• Forrás: https://css-tricks.com/managing-user-focus-with-focus-visible/