Tämä on toinen postaus pienessä sarjassa, jonka teemme lomakkeiden saavutettavuudesta. Jos unohdat ensimmäisen postauksen, katso Helppokäyttöiset lomakkeet pseudo-luokilla. Tässä viestissä aiomme tarkastella :focus-visible ja kuinka käyttää sitä web-sivustoissasi!

Keskitä kosketuspiste

Ennen kuin siirrymme eteenpäin :focus-visible, katsotaanpa uudelleen miten :focus toimii CSS:ssäsi. Tarkennus on visuaalinen osoitin siitä, että elementti on vuorovaikutuksessa näppäimistön, hiiren, ohjauslevyn tai aputekniikan avulla. Tietyt elementit, kuten linkit, painikkeet ja lomakeelementit, ovat luonnostaan ​​interaktiivisia. Haluamme varmistaa, että käyttäjämme tietävät missä he ovat ja mitä he tekevät.

Muista, että älä tee tätä CSS:ssäsi!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Kun poistat tarkennuksen, poistat sen KAIKKI! Haluamme varmistaa, että säilytämme painopisteen.

Jos jostain syystä joudut poistamaan kohdistuksen, varmista, että on olemassa myös varatoiminto :focus tyylejä käyttäjillesi. Tämä varaosa voi vastata tuotemerkkisi värejä, mutta varmista, että myös nämä värit ovat käytettävissä. Jos markkinointi, suunnittelu tai brändäys eivät pidä oletusarvoisista tarkennusrenkaiden tyyleistä, on aika aloittaa keskustelut ja tehdä yhteistyötä heidän kanssaan parhaan tavan lisätä se takaisin.

Mikä on focus-visible?

Pseudoluokka, :focus-visible, on aivan kuten oletusarvomme :focus pseudoluokka. Se antaa käyttäjälle indikaattorin siitä, että jotain on keskittynyt sivulla. Tapa, jolla kirjoitat :focus-visible leikataan ja kuivataan:

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

Käytettäessä :focus-visible tietyllä elementillä syntaksi näyttää suunnilleen tältä:

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

Hieno asia käytössä :focus-visible voit tehdä elementistäsi erottuvan, kirkas ja rohkea! Sinun ei tarvitse huolehtia siitä, että se näyttää, jos elementtiä napsautetaan / napautetaan. Jos päätät olla toteuttamatta luokkaa, oletusarvo on käyttäjäagentin tarkennusrengas, joka on joillekin ei-toivottavaa.

Taustatarina aiheesta focus-visible

Ennen kuin meillä oli :focus-visible, käyttäjäagentin tyyliä sovelletaan :focus useimpiin sivun elementteihin; painikkeet, linkit jne. Se käyttäisi ääriviivaa tai "tarkennusrengasta" tarkennettavaan elementtiin. Tätä pidettiin rumana, useimmat eivät pitäneet selaimen tarjoamasta oletustarkennusrenkaasta. Koska tarkennusrengasta oli epäsuotuisa katsoa, ​​useimmat kirjoittajat poistivat sen… ilman varoitusta. Muista, kun poistat :focus, se heikentää käytettävyyttä ja tekee kokemuksesta mahdoton näppäimistön käyttäjille.

Webin nykyisessä tilassa selain ei enää näytä keskittymistä eri elementtien ympärille, kun niillä on fokus. Selain käyttää sen sijaan vaihtelevia heuristiikkaa määrittääkseen, milloin se auttaisi käyttäjää, ja tarjoaa vastineeksi tarkennusrenkaan. Mukaan Khan Academy, heuristinen on, "tekniikka, joka ohjaa algoritmia hyvien valintojen löytämiseen."

Tämä tarkoittaa, että selain voi havaita, onko käyttäjä vuorovaikutuksessa kokemuksen kanssa näppäimistöltä, hiireltä tai ohjauslevyltä, ja lisää tai poistaa tarkennusrenkaan kyseisen syöttötyypin perusteella. Tämän viestin esimerkki korostaa syöttövuorovaikutusta.

Alkujaikoina :focus-visible käytimme a polyfill käsitelläkseen Alice Boxhallin ja Brian Kardellin luomaa tarkennusrengasta Mozilla esitteli myös oman pseudoluokkansa, :moz-focusring, ennen virallista määritystä. Jos haluat oppia lisää tarkennusrenkaan alkuajoista, tutustu A11y heittää Rob Dodsonin kanssa.

Keskitä tärkeys

On monia syitä, miksi keskittyminen on tärkeää hakemuksessasi. Ensinnäkin, kuten edellä totesin, meidän verkon lähettiläinä on varmistettava, että tarjoamme parhaan mahdollisen käyttökokemuksen. Emme halua kenenkään käyttäjistämme arvaavan, missä he ovat, kun he navigoivat kokemuksen läpi.

Yksi esimerkki, joka tulee aina mieleen, on Two Blind Brothers -sivusto. Jos siirryt verkkosivustolle ja napsautat/napautat (tämä toimii mobiililaitteella), suljetun silmän vasemmassa alakulmassa, näet silmän auki ja simulaatio alkaa. Molemmilla veljillä, Bradfordilla ja Bryan Manningilla, diagnosoitiin nuorena Stargardtin tauti. Stargardtin tauti on eräänlainen silmän makulan rappeuma. Ajan myötä molemmat veljet ovat täysin sokeita. Vieraile sivustolla ja napsauta silmää nähdäksesi, kuinka he näkevät.

Jos olisit heidän asemassaan ja sinun täytyisi selata sivua, haluat varmistaa, että tiesit tarkalleen missä olit koko kokemuksen ajan. Tarkennusrengas antaa sinulle tämän voiman.

esittely

Alla oleva demo näyttää kuinka :focus-visible toimii, kun se lisätään CSS:ään. Videon ensimmäinen osa näyttää kokemuksen hiirellä navigoinnista, toinen näyttää navigoinnin pelkällä näppäimistölläni. Nauhoitin myös itseni osoittaakseni, että vaihdoin hiiren käytöstä näppäimistööni.

Selain ennustaa, mitä tehdä tarkennusrenkaalla syötteeni perusteella (näppäimistö/hiiri), ja lisää sitten tarkennusrenkaan näihin elementteihin. Tässä tapauksessa, kun selailen tätä esimerkkiä näppäimistöllä, kaikki keskittyy. Hiirtä käytettäessä vain sisääntulo saa tarkennuksen, painikkeet eivät. Jos poistat :focus-visible, selain käyttää oletustarkennusrengasta.

Alla oleva koodi on voimassa :focus-visible tarkennettaviin elementteihin.

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

Jos haluat määrittää label tai vastaanottamispainike :focus-visible vain luokan eteen input or button vastaavasti.

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

Tuki

Jos selain ei tue :focus-visible voit saada takaisin paikalleen hoitamaan vuorovaikutusta. Alla oleva koodi on peräisin MDN leikkikenttä. Voit käyttää @support säännöllä tai "ominaisuuskysely" tarkistaaksesi tuen. Yksi asia on pidettävä mielessä, että sääntö tulee sijoittaa koodin yläosaan tai upottaa toisen sääntöryhmän sisällä.

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

Muita saavutettavuusongelmia

Muista esteettömyysongelmat, kun kehität kokemustasi:

• Varmista, että tarkennusilmaisimelle valitsemasi värit ovat edelleen käytettävissä julkaisussa dokumentoitujen tietojen mukaan WCAG 2.2 ei-tekstikontrasti (taso AA)
• Kognitiivinen ylikuormitus voi aiheuttaa käyttäjälle ahdistusta. Varmista, että vaihtelevien interaktiivisten elementtien tyylit ovat yhdenmukaisia

Selaintuki

Linkit

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• PlatoData.Network Vertical Generatiivinen Ai. Vahvista itseäsi. Pääsy tästä.
• PlatoAiStream. Web3 Intelligence. Tietoa laajennettu. Pääsy tästä.
• PlatoESG. hiili, CleanTech, energia, ympäristö, Aurinko, Jätehuolto. Pääsy tästä.
• PlatonHealth. Biotekniikan ja kliinisten kokeiden älykkyys. Pääsy tästä.
• Lähde: https://css-tricks.com/managing-user-focus-with-focus-visible/