Hei kõik imelised arendajad seal! Selles postituses tutvustan teid lihtsa kontaktivormi loomisel, kasutades semantilist HTML-i ja vinget CSS-i pseudoklassi. :focus-within. :focus-within klass võimaldab suurepäraselt juhtida fookust ja anda kasutajale teada, et just see on koht, kus nad on kogemuses. Enne kui alustame, tutvume veebi juurdepääsetavuse tuumaga.

Vormi juurdepääsetavus?

Tõenäoliselt olete kõikjal kuulnud terminit "juurdepääsetavus" või numeronüümi a11y. Mida see tähendab? See on suurepärane küsimus, millel on nii palju vastuseid. Kui me vaatame füüsilist maailma, siis juurdepääsetavus tähendab selliseid asju nagu teravate esemete konteinerite olemasolu teie ettevõtte vannitoas, kaldteed ratastega inimeste jaoks ja välisseadmete, näiteks suurte trükitud klaviatuuride olemasolu kõigile, kes seda vajavad.

Juurdepääsetavuse ulatus ei piirdu sellega, meil on digitaalne juurdepääsetavus, mida peame teadma ka mitte ainult väliste kasutajate, vaid ka sisemiste kolleegide jaoks. Värvikontrast on madalalt rippuv vili et me peaksime suutma näksida. Meie töökohtades hoolitseme selle eest, et kui mõni töötaja vajab abitehnoloogiat, näiteks ekraanilugejat, oleks see installitud ja saadaval. On palju asju, millega tuleb arvestada. See artikkel keskendub veebijuurdepääsule, säilitades selle WCAG (veebisisu juurdepääsetavuse juhised) silmas pidades.

See pseudoklass on tõesti suurepärane, kui soovite rõhutada, et kasutaja suhtleb tegelikult elemendiga. Saate muuta näiteks kogu vormi taustavärvi. Või kui fookus teisaldatakse sisendisse, saate muuta sildi paksuks ja sisendelemendist suuremaks, kui fookus sellesse sisendisse liigutatakse. Allpool koodilõikudes ja näidetes toimuv muudab vormi juurdepääsetavaks. :focus-within on vaid üks viis, kuidas saame CSS-i enda huvides kasutada.

Kuidas keskenduda

Juurdepääsetavus ja veebikogemus on fookus visuaalne indikaator, mis näitab, et lehel, kasutajaliideses või komponendis millegagi suheldakse. CSS võib öelda, millal interaktiivne element on fokuseeritud.

Veenduge alati, et fookuse indikaator või fookustatavate elementide ümber olev rõngas säilitaks kogu kogemuse jooksul õige värvikontrasti.

Focus on kirjutatud nii ja seda saab kujundada vastavalt teie kaubamärgile, kui otsustate selle stiili kujundada.

:focus {
  * / INSERT STYLES HERE /*
}

Mida iganes teete, ärge kunagi määrake oma põhijooni 0 or none. See eemaldab kogu kasutuskogemuse kõigi jaoks nähtava fookuse indikaatori. Kui peate fookuse eemaldama, saate seda teha, kuid lisage see kindlasti hiljem uuesti. Kui eemaldate oma CSS-i fookuse või määrate kontuuri 0 or none, eemaldab see fookusrõnga kõikidelt teie kasutajatelt. Seda on CSS-i lähtestamise kasutamisel palju näha. CSS-i lähtestamine lähtestab stiilid tühjale lõuendile. Nii vastutate tühja lõuendi eest, et kujundada oma soovi järgi. Kui soovite kasutada CSS-i lähtestamist, vaadake Josh Comeau lähtestamine.

*ÄRA TEE seda, mis on allpool!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Vaata sisse!

Üks lahedamaid viise CSS-i abil fookuse kujundamiseks on see, millest see artikkel räägib. Kui te pole kontrollinud :focus-within pseudoklass, vaata seda kindlasti! Semantilise märgistuse ja CSS-i kasutamisel on palju peidetud kalliskive ja see on üks neist. Paljud tähelepanuta jäetud asjad on vaikimisi juurdepääsetavad, näiteks semantiline märgistus on vaikimisi juurdepääsetav ja seda tuleks alati kasutada div-ide kohal.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/et/">Home</a></li>
      <li><a href="/et/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 on kõik semantilised elemendid. The h1 ja ul on ka semantilised ja ligipääsetavad.

Kui just pole vaja luua kohandatud komponenti, siis a div on hea kasutada, paaris ARIA (juurdepääsetavad rikkalikud Interneti-rakendused). Saame ARIAsse sügavalt sukelduda hilisemas postituses. Praegu keskendume...vaatame, mida ma seal tegin...sellele CSS-i pseudoklassile.

. :focus-within pseudoklass võimaldab valida elemendi, kui mis tahes selles sisalduv alanev element on fookuses.

:focus-within tegevuses!

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

Ülaltoodud näitekood lisab oranži taustavärvi, lisab polstri ja muudab siltide värvi mustaks.

Lõpptoode näeb välja umbes selline nagu allpool. Muidugi on stiili muutmiseks lõputud võimalused, kuid see peaks viima teid õigele teele, et muuta veebi kõigile kättesaadavamaks!

Teine kasutusjuhtum kasutamiseks :focus-within muudaks sildid paksuks, muudaks muud värvi või suurendaks neid vaegnägijate jaoks. Selle näidiskood näeks välja umbes selline, nagu allpool.

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 ka suurepärane brauseri tugi kõikjal Kas ma võin kasutada.

Järeldus

Suurepärase ja juurdepääsetava kasutuskogemuse loomine peaks alati olema tarkvara tarnimisel esmatähtis, mitte ainult väliselt, vaid ka sisemiselt. Meie arendajatena kuni tippjuhtideni peame olema teadlikud teiste ees seisvatest väljakutsetest ja sellest, kuidas saame olla veebiplatvormi saadikud, et muuta see paremaks kohaks.

Tehnoloogia, näiteks semantilise märgistuse ja CSS-i kasutamine kaasavate ruumide loomiseks on veebi paremaks muutmisel otsustava tähtsusega. Jätkame edasiliikumist ja elude muutmist.

Vaadake veel üht suurepärast ressurssi siin CSS-Tricks on kasutades :focus-within.

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