Živjo vsi čudoviti razvijalci! V tej objavi vas bom popeljal skozi ustvarjanje preprostega kontaktnega obrazca z uporabo semantičnega HTML-ja in izjemnega psevdo razreda CSS, znanega kot :focus-within. :focus-within razred omogoča velik nadzor nad osredotočenostjo in daje vašemu uporabniku vedeti, da je natanko tam, kjer je v izkušnji. Preden se lotimo tega, pojdimo k bistvu spletne dostopnosti.

Dostopnost obrazca?

Najverjetneje ste povsod slišali izraz »dostopnost« ali numeronim a11y. Kaj to pomeni? To je odlično vprašanje s toliko odgovori. Ko pogledamo fizični svet, dostopnost pomeni stvari, kot so posode za ostre predmete v kopalnicah v vašem podjetju, zagotavljanje klančin za osebe, ki si pomagajo s kolesi, in imeti zunanje naprave, kot so tipkovnice z velikim tiskanjem, pri roki za vsakogar, ki to potrebuje.

Razpon dostopnosti se tu ne ustavi, imamo tudi digitalno dostopnost, ki se je moramo zavedati, ne samo za zunanje uporabnike, ampak tudi za notranje sodelavce. Barvni kontrast je nizko viseče sadje da bi morali biti sposobni zatreti v kali. Na naših delovnih mestih zagotavljamo, da imamo to nameščeno in na voljo, če kateri koli zaposleni potrebuje pomožno tehnologijo, kot je bralnik zaslona. Veliko stvari je treba upoštevati. Ta članek se bo osredotočil na spletno dostopnost z ohranjanjem WCAG (smernice za dostopnost spletne vsebine) v mislih.

Ta psevdo razred je res odličen, ko želite poudariti, da uporabnik dejansko komunicira z elementom. Spremenite lahko na primer barvo ozadja celotnega obrazca. Ali pa, če je fokus premaknjen na vnos, lahko naredite oznako vhodnega elementa krepko in večjo, ko se fokus premakne na ta vnos. To, kar se dogaja spodaj v delčkih kode in primerih, je tisto, zaradi česar je obrazec dostopen. :focus-within je le eden od načinov, kako lahko uporabimo CSS v svojo korist.

Kako se osredotočiti

Osredotočenost je v zvezi z dostopnostjo in spletno izkušnjo vizualni pokazatelj, da se z nečim izvaja interakcija na strani, v uporabniškem vmesniku ali znotraj komponente. CSS lahko ugotovi, kdaj je interaktivni element fokusiran.

Vedno se prepričajte, da indikator izostritve ali obroč okoli elementov, ki jih je mogoče izostriti, med izkušnjo ohranja ustrezen barvni kontrast.

Focus je napisan tako in ga lahko oblikujete tako, da se ujema z vašo blagovno znamko, če se odločite za stil.

:focus {
  * / INSERT STYLES HERE /*
}

Karkoli počnete, nikoli ne nastavite svojega obrisa 0 or none. S tem boste odstranili viden indikator izostritve za vse v celotni izkušnji. Če morate odstraniti fokus, lahko, vendar ga ne pozabite dodati pozneje. Ko odstranite fokus s svojega CSS ali nastavite oris na 0 or none, odstrani fokusni obroč za vse vaše uporabnike. To se pogosto opazi pri uporabi ponastavitve CSS. Ponastavitev CSS bo ponastavila sloge na prazno platno. Na ta način ste odgovorni za prazno platno, da ga oblikujete po želji. Če želite uporabiti ponastavitev CSS, preverite Ponastavitev Josha Comeauja.

*NE DELAJ tega, kar je spodaj!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Poglej znotraj!

Ta članek govori o enem najbolj kul načinov oblikovanja fokusa z uporabo CSS. Če še niste preverili :focus-within psevdo razred, vsekakor poglej to! Ko gre za uporabo semantičnega označevanja in CSS, je veliko skritih draguljev in to je eden izmed njih. Veliko stvari, ki so spregledane, so privzeto dostopne, na primer semantična oznaka je privzeto dostopna in bi jo bilo treba vedno uporabljati namesto elementov div.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/sl/">Home</a></li>
      <li><a href="/sl/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>

O header, nav, main, section, asidein footer so vsi pomenski elementi. The h1 in ul so tudi pomenske in dostopne.

Razen če je treba ustvariti komponento po meri, potem a div je primeren za uporabo v kombinaciji z ARIA (dostopne bogate internetne aplikacije). V poznejši objavi se lahko poglobimo v ARIA. Za zdaj se osredotočimo ... poglejmo, kaj sem tam naredil ... na tem psevdo razredu CSS.

O :focus-within psevdorazred vam omogoča, da izberete element, ko ima kateri koli podrejeni element, ki ga vsebuje, fokus.

:focus-within v akciji!

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

Zgornji primer kode bo dodal oranžno barvo ozadja, dodal nekaj oblazinjenja in spremenil barvo oznak v črno.

Končni izdelek izgleda nekako takole spodaj. Seveda so možnosti za spremembo stila neskončne, a to bi vas moralo pripeljati na dobro pot, da bo splet bolj dostopen za vse!

Še en primer uporabe za uporabo :focus-within bi oznake obarvali krepko, v drugo barvo ali jih povečali za slabovidne uporabnike. Primer kode za to bi bil videti nekako takole spodaj.

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 glede na to ima tudi odlično podporo brskalnikov na vseh področjih Lahko uporabim.

zaključek

Ustvarjanje neverjetne, dostopne uporabniške izkušnje bi moralo biti vedno glavna prednostna naloga pri pošiljanju programske opreme, ne le navzven, ampak tudi znotraj. Mi kot razvijalci, vse do višjega vodstva, se moramo zavedati izzivov, s katerimi se soočajo drugi, in tega, kako smo lahko ambasadorji spletne platforme, da jo naredimo boljše mesto.

Uporaba tehnologije, kot sta semantično označevanje in CSS, za ustvarjanje vključujočih prostorov je ključnega pomena za izboljšanje spleta. Nadaljujmo s spreminjanjem življenj.

Oglejte si še en odličen vir tukaj na CSS-Tricks on z uporabo :focus-within.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• PlatoData.Network Vertical Generative Ai. Opolnomočite se. Dostopite tukaj.
• PlatoAiStream. Web3 Intelligence. Razširjeno znanje. Dostopite tukaj.
• PlatoESG. Ogljik, CleanTech, Energija, Okolje, sončna energija, Ravnanje z odpadki. Dostopite tukaj.
• PlatoHealth. Obveščanje o biotehnologiji in kliničnih preskušanjih. Dostopite tukaj.
• vir: https://css-tricks.com/accessible-forms-with-pseudo-classes/