Bună, toți dezvoltatorii minunați de acolo! În această postare, vă voi ghida prin crearea unui formular simplu de contact folosind HTML semantic și o pseudo-clasă CSS minunată cunoscută sub numele de :focus-within. :focus-within clasă permite un control excelent asupra concentrării și permite utilizatorului să știe că acesta este exact locul în care se află în experiență. Înainte de a intra, să ajungem la esențialul a ceea ce este accesibilitatea web.

Accesibilitate formular?

Cel mai probabil ați auzit peste tot termenul „accesibilitate” sau numeronimul, a11y. Ce înseamnă? Aceasta este o întrebare grozavă cu atât de multe răspunsuri. Când ne uităm la lumea fizică, accesibilitatea înseamnă lucruri precum să aveți containere pentru obiecte ascuțite în băile dvs. de la afacerea dvs., să vă asigurați că există rampe pentru persoanele asistate la roți și să aveți la îndemână periferice, cum ar fi tastaturi cu litere mari, pentru oricine are nevoie de ele.

Gama de accesibilitate nu se oprește aici, avem accesibilitate digitală de care trebuie să fim conștienți, de asemenea, nu doar pentru utilizatorii externi, ci și pentru colegii interni. Contrastul de culoare este un fruct care atârnă jos că ar trebui să putem ciupi din boboc. La locurile noastre de muncă, asigurându-ne că, dacă vreun angajat are nevoie de tehnologie de asistență, cum ar fi un cititor de ecran, o avem instalată și disponibilă. Sunt o mulțime de lucruri care trebuie ținute în considerare. Acest articol se va concentra pe accesibilitatea web prin păstrarea WCAG (orientări privind accesibilitatea conținutului web) in minte.

Această pseudo clasă este cu adevărat grozavă atunci când doriți să subliniați că utilizatorul interacționează de fapt cu elementul. Puteți schimba culoarea de fundal a întregului formular, de exemplu. Sau, dacă focalizarea este mutată într-o intrare, puteți face eticheta îngroșată și mai mare a unui element de intrare atunci când focalizarea este mutată în acea intrare. Ceea ce se întâmplă mai jos în fragmentele de cod și exemplele este ceea ce face ca formularul să fie accesibil. :focus-within este doar o modalitate prin care putem folosi CSS în avantajul nostru.

Cum să te concentrezi

Focalizarea, în ceea ce privește accesibilitatea și experiența web, este indicatorul vizual că ceva este interacționat pe pagină, în UI sau într-o componentă. CSS poate spune când un element interactiv este focalizat.

Asigurați-vă întotdeauna că indicatorul de focalizare sau inelul din jurul elementelor focalizabile menține contrastul adecvat de culoare prin experiență.

Focus este scris astfel și poate fi stilat pentru a se potrivi cu branding-ul dvs. dacă alegeți să îl stilați.

:focus {
  * / INSERT STYLES HERE /*
}

Orice ai face, nu-ți stabilește niciodată schița 0 or none. Procedând astfel, se va elimina un indicator de focalizare vizibil pentru toată lumea de-a lungul întregii experiențe. Dacă trebuie să eliminați focalizarea, puteți, dar asigurați-vă că o adăugați din nou mai târziu. Când eliminați focalizarea din CSS sau setați conturul la 0 or none, elimină inelul de focalizare pentru toți utilizatorii dvs. Acest lucru se vede mult atunci când se folosește o resetare CSS. O resetare CSS va reseta stilurile la o pânză goală. În acest fel, ești responsabil de pânza goală pentru a stila după cum dorești. Dacă doriți să utilizați o resetare CSS, verificați Resetarea lui Josh Comeau.

*NU FACE ce este mai jos!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Privește înăuntru!

Una dintre cele mai interesante modalități de a vă concentra pe stil folosind CSS este despre ce este vorba în acest articol. Dacă nu ați verificat :focus-within pseudo clasă, cu siguranță aruncă o privire! Există o mulțime de pietre prețioase ascunse când vine vorba de utilizarea markupului semantic și CSS, iar aceasta este una dintre ele. O mulțime de lucruri care sunt trecute cu vederea sunt accesibile în mod implicit, de exemplu, marcajul semantic este accesibil în mod implicit și ar trebui folosit peste div-uri în orice moment.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/ro/">Home</a></li>
      <li><a href="/ro/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, aside, și footer sunt toate elemente semantice. The h1 și ul sunt, de asemenea, semantice și accesibile.

Dacă nu există o componentă personalizată care trebuie creată, atunci a div este bine de utilizat, asociat cu ARIA (Aplicații Internet bogate accesibile). Putem face o scufundare profundă în ARIA într-o postare ulterioară. Deocamdată să ne concentrăm... să vedem ce am făcut acolo... pe această pseudo clasă CSS.

:focus-within pseudoclasă vă permite să selectați un element atunci când orice element descendent pe care îl conține are focus.

:focus-within în acțiune!

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

Exemplul de cod de mai sus va adăuga o culoare de fundal portocalie, va adăuga niște umplutură și va schimba culoarea etichetelor în negru.

Produsul final arată ceva ca mai jos. Desigur, posibilitățile de a schimba stilul sunt nelimitate, dar acest lucru ar trebui să vă aducă pe o cale bună pentru a face web-ul mai accesibil pentru toată lumea!

Un alt caz de utilizare pentru utilizare :focus-within ar fi transformarea etichetelor îndrăznețe, într-o culoare diferită sau mărirea lor pentru utilizatorii cu vedere slabă. Exemplul de cod pentru asta ar arăta mai jos.

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 are, de asemenea, un suport excelent pentru browser la nivel general, conform Pot folosi.

Concluzie

Crearea unei experiențe de utilizator uimitoare și accesibilă ar trebui să fie întotdeauna o prioritate la livrarea software-ului, nu doar extern, ci și intern. Noi, ca dezvoltatori, până la conducerea superioară trebuie să fim conștienți de provocările cu care se confruntă ceilalți și de modul în care putem fi ambasadori ai platformei web pentru a o face un loc mai bun.

Utilizarea tehnologiei precum marcajul semantic și CSS pentru a crea spații incluzive este o parte esențială pentru a face web-ul un loc mai bun, haideți să continuăm să mergem mai departe și să schimbăm vieți.

Consultați o altă resursă grozavă aici pe CSS-Tricks on folosind :focus-within.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• PlatoData.Network Vertical Generative Ai. Împuterniciți-vă. Accesați Aici.
• PlatoAiStream. Web3 Intelligence. Cunoștințe amplificate. Accesați Aici.
• PlatoESG. carbon, CleanTech, Energie, Mediu inconjurator, Solar, Managementul deșeurilor. Accesați Aici.
• PlatoHealth. Biotehnologie și Inteligență pentru studii clinice. Accesați Aici.
• Sursa: https://css-tricks.com/accessible-forms-with-pseudo-classes/