Hei kaikki upeat kehittäjät! Tässä viestissä opastan sinut luomaan yksinkertaisen yhteydenottolomakkeen käyttämällä semanttista HTML-koodia ja mahtavaa CSS-pseudoluokkaa, joka tunnetaan nimellä :focus-within. :focus-within luokka mahdollistaa erinomaisen keskittymisen hallinnan ja sen, että käyttäjä tietää, että he ovat juuri tässä kokemuksessa. Ennen kuin siirrymme mukaan, tutustutaan verkon esteettömyyden ytimeen.

Lomakkeen saavutettavuus?

Olet todennäköisesti kuullut termin "saatavuus" kaikkialla tai numeronyymin a11y. Mitä se tarkoittaa? Se on hieno kysymys, johon on niin paljon vastauksia. Kun tarkastelemme fyysistä maailmaa, saavutettavuus tarkoittaa esimerkiksi terävien esineiden säilytysastioita yrityksesi kylpyhuoneissa, ramppien varmistamista pyöräavusteisille henkilöille ja oheislaitteiden, kuten suurikokoisten näppäimistöjen, käyttöä kaikille, jotka sitä tarvitsevat.

Esteettömyys ei lopu tähän, meillä on digitaalinen esteettömyys, joka meidän on myös oltava tietoinen, ei vain ulkopuolisten käyttäjien, vaan myös sisäisten kollegoiden kannalta. Värikontrasti on matalalla roikkuva hedelmä että meidän pitäisi kyetä nappaamaan alkuunsa. Varmistamme työpaikoillamme, että jos joku työntekijä tarvitsee apuvälineitä, kuten näytönlukijaa, meillä on se asennettuna ja saatavilla. On monia asioita, jotka on otettava huomioon. Tämä artikkeli keskittyy verkon saavutettavuuteen säilyttämällä WCAG (verkkosisällön saavutettavuusohjeet) mielessä.

Tämä pseudoluokka on todella hyvä, kun haluat korostaa, että käyttäjä itse asiassa on vuorovaikutuksessa elementin kanssa. Voit muuttaa esimerkiksi koko lomakkeen taustaväriä. Tai jos kohdistus on siirretty syötteeseen, voit lihavoida ja suurentaa syöteelementin tarraa, kun kohdistus siirretään kyseiseen syötteeseen. Alla koodikatkelmissa ja esimerkeissä tapahtuu, mikä tekee lomakkeesta käytettävissä. :focus-within on vain yksi tapa käyttää CSS:ää hyödyksemme.

Kuinka keskittyä

Keskittyminen saavutettavuuteen ja verkkokokemukseen on visuaalinen osoitus siitä, että jotain on vuorovaikutuksessa sivulla, käyttöliittymässä tai komponentissa. CSS voi kertoa, milloin interaktiivinen elementti on kohdistettu.

Varmista aina, että tarkennuksen ilmaisin tai tarkennettavien elementtien ympärillä oleva rengas säilyttää oikean värikontrastin koko kokemuksen.

Focus on kirjoitettu näin, ja se voidaan muotoilla vastaamaan tuotemerkkiäsi, jos valitset sen tyylin.

:focus {
  * / INSERT STYLES HERE /*
}

Mitä tahansa teetkin, älä koskaan määritä ääriviivojasi 0 or none. Tämä poistaa näkyvän tarkennusilmaisimen kaikilta koko käyttökokemuksen ajalta. Jos sinun on poistettava kohdistus, voit tehdä sen, mutta muista lisätä se takaisin myöhemmin. Kun poistat kohdistuksen CSS:stä tai asetat ääriviivat arvoon 0 or none, se poistaa tarkennusrenkaan kaikilta käyttäjiltäsi. Tämä näkyy paljon käytettäessä CSS-nollausta. CSS-nollaus palauttaa tyylit tyhjälle kankaalle. Tällä tavalla olet vastuussa tyhjästä kankaasta ja muotoilet haluamallasi tavalla. Jos haluat käyttää CSS-nollausta, tarkista Josh Comeaun nollaus.

* ÄLÄ TEE mitä alla!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Katso Sisään!

Yksi hienoimmista tavoista keskittyä tyyliin CSS:n avulla on tämä artikkeli. Jos et ole tarkistanut :focus-within pseudoluokka, katso se ehdottomasti! Semanttisen merkinnän ja CSS:n käytössä on paljon piilotettuja helmiä, ja tämä on yksi niistä. Monet asiat, jotka jäävät huomiotta, ovat oletusarvoisesti käytettävissä, esimerkiksi semanttinen merkintä on oletuksena käytettävissä ja sitä tulisi käyttää div:ien päällä aina.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/fi/">Home</a></li>
      <li><a href="/fi/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

- header, nav, main, section, asideja footer ovat kaikki semanttisia elementtejä. The h1 ja ul ovat myös semanttisia ja saavutettavia.

Ellei mukautettua komponenttia tarvitse luoda, a div on hyvä käyttää, pariksi yhdistettynä ARIA (Accessible Rich Internet Applications). Voimme sukeltaa syvälle ARIAan myöhemmässä postauksessa. Keskitytään nyt… katsomaan mitä tein siellä… tähän CSS pseudoluokkaan.

- :focus-within pseudo-luokan avulla voit valita elementin, kun mikä tahansa sen sisältämä jälkeläinen elementti on kohdistettu.

:focus-within toiminnassa!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

Yllä oleva esimerkkikoodi lisää taustavärin oranssin, lisää täytettä ja muuttaa tarrojen värin mustiksi.

Lopputuote näyttää tältä alla. Tietenkin mahdollisuudet muuttaa tyyliä ovat loputtomat, mutta tämän pitäisi saada sinut hyvälle tielle tehdäksesi verkosta helpommin kaikkien saavutettavissa!

Toinen käyttötapaus käyttöön :focus-within muuttaisi tarroja lihavoituiksi, eri värisiksi tai suurentaisi niitä heikkonäköisille käyttäjille. Sen esimerkkikoodi näyttäisi tältä alla.

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within on myös erinomainen selaintuki kautta linjan mukaan Voinko käyttää.

Yhteenveto

Hämmästyttävän helppokäyttöisen käyttökokemuksen luomisen tulee aina olla etusijalla ohjelmistoja toimitettaessa, ei vain ulkoisesti vaan myös sisäisesti. Meidän kehittäjien, aina ylimpään johtoon asti, on oltava tietoisia muiden kohtaamista haasteista ja siitä, kuinka voimme olla verkkoalustan lähettiläitä tehdäksemme siitä paremman paikan.

Semanttisen merkinnän ja CSS:n kaltaisten teknologioiden käyttäminen inklusiivisten tilojen luomiseen on olennainen osa verkosta paremman paikan luomista. Jatketaan eteenpäin menoa ja elämän muuttamista.

Tutustu toiseen loistavaan resurssiin täällä CSS-Tricks on -sivustolla käyttämällä :focus-within.

• 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/accessible-forms-with-pseudo-classes/