Ciao a tutti voi, meravigliosi sviluppatori là fuori! In questo post ti guiderò attraverso la creazione di un semplice modulo di contatto utilizzando HTML semantico e una fantastica pseudo classe CSS nota come :focus-within. :focus-within class consente un grande controllo sulla messa a fuoco e consente all'utente di sapere che questo è esattamente il punto in cui si trova nell'esperienza. Prima di entrare nel merito, entriamo nel vivo di cosa sia l'accessibilità web.

Accessibilità dei moduli?

Molto probabilmente hai sentito il termine "accessibilità" ovunque o il numeronimo, a11y. Cosa significa? Questa è una bella domanda con così tante risposte. Quando guardiamo al mondo fisico, accessibilità significa cose come avere contenitori per oggetti taglienti nei bagni della tua azienda, assicurarsi che ci siano rampe per le persone assistite su sedia a rotelle e avere periferiche come tastiere di grandi dimensioni a portata di mano per chiunque ne abbia bisogno.

La gamma di accessibilità non si ferma qui, abbiamo anche l'accessibilità digitale di cui dobbiamo essere consapevoli, non solo per gli utenti esterni, ma anche per i colleghi interni. Il contrasto cromatico è un frutto a portata di mano che dovremmo essere in grado di stroncare sul nascere. Nei nostri luoghi di lavoro, assicurandoci che se un dipendente ha bisogno di tecnologie assistive come uno screen reader, le abbiamo installate e disponibili. Ci sono molte cose che devono essere tenute in considerazione. Questo articolo si concentrerà sull'accessibilità web mantenendo il file WCAG (linee guida per l'accessibilità dei contenuti web) in mente.

Questa pseudo classe è davvero fantastica quando vuoi sottolineare che l'utente sta effettivamente interagendo con l'elemento. Puoi, ad esempio, modificare il colore di sfondo dell'intero modulo. Oppure, se il focus viene spostato su un input, puoi rendere l'etichetta in grassetto e più grande di un elemento di input quando il focus viene spostato su quell'input. Ciò che accade di seguito negli snippet di codice e negli esempi è ciò che rende accessibile il modulo. :focus-within è solo un modo in cui possiamo usare i CSS a nostro vantaggio.

Come concentrarsi

Il focus, per quanto riguarda l'accessibilità e l'esperienza web, è l'indicatore visivo che si sta interagendo con qualcosa sulla pagina, nell'interfaccia utente o all'interno di un componente. I CSS possono dire quando un elemento interattivo è focalizzato.

Assicurati sempre che l'indicatore di messa a fuoco o l'anello attorno agli elementi focalizzabili mantengano il contrasto cromatico corretto durante l'esperienza.

Focus è scritto in questo modo e può essere modellato per abbinarlo al tuo marchio se scegli di modellarlo.

:focus {
  * / INSERT STYLES HERE /*
}

Qualunque cosa tu faccia, non impostare mai il tuo schema 0 or none. In questo modo verrà rimosso un indicatore di messa a fuoco visibile per tutti nell'intera esperienza. Se è necessario rimuovere il focus, puoi farlo, ma assicurati di aggiungerlo nuovamente in un secondo momento. Quando rimuovi il focus dal tuo CSS o imposti la struttura su 0 or none, rimuove l'anello di messa a fuoco per tutti i tuoi utenti. Questo si vede spesso quando si utilizza un ripristino CSS. Un ripristino CSS ripristinerà gli stili su una tela vuota. In questo modo sei responsabile della tela vuota da modellare come desideri. Se desideri utilizzare un ripristino CSS, controlla Il reset di Josh Comeau.

*NON FARE ciò che è riportato di seguito!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Guarda dentro!

Uno dei modi più interessanti per modellare la messa a fuoco utilizzando i CSS è ciò di cui tratta questo articolo. Se non hai controllato il :focus-within pseudo classe, dagli un'occhiata sicuramente! Ci sono molte gemme nascoste quando si tratta di utilizzare markup semantico e CSS, e questa è una di queste. Molte cose che vengono trascurate sono accessibili per impostazione predefinita, ad esempio, il markup semantico è accessibile per impostazione predefinita e dovrebbe essere utilizzato sempre sui div.

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

I header, nav, main, section, asidee footer sono tutti elementi semantici. IL h1 ed ul sono anche semantici e accessibili.

A meno che non sia necessario creare un componente personalizzato, a div va bene da usare, abbinato a ARIA (Applicazioni Internet ricche accessibili). Potremo approfondire ARIA in un post successivo. Per ora concentriamoci... vediamo cosa ho fatto lì... su questa pseudo classe CSS.

I :focus-within la pseudo classe ti consente di selezionare un elemento quando qualsiasi elemento discendente in esso contenuto è attivo.

:focus-within in azione!

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

Il codice di esempio sopra aggiungerà un colore di sfondo arancione, aggiungerà del riempimento e cambierà il colore delle etichette in nero.

Il prodotto finale è simile a quello riportato di seguito. Naturalmente le possibilità di cambiare lo stile sono infinite, ma questo dovrebbe metterti sulla buona strada per rendere il web più accessibile a tutti!

Un altro caso d'uso per l'utilizzo :focus-within significherebbe rendere le etichette in grassetto, di un colore diverso o ingrandirle per gli utenti ipovedenti. Il codice di esempio per questo sarebbe simile al seguente.

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 ha anche un ottimo supporto del browser su tutta la linea secondo Posso usare.

Conclusione

Creare un'esperienza utente straordinaria e accessibile dovrebbe sempre essere una priorità assoluta quando si spedisce software, non solo esternamente ma anche internamente. Noi come sviluppatori, fino alla leadership senior, dobbiamo essere consapevoli delle sfide che gli altri devono affrontare e di come possiamo essere ambasciatori della piattaforma web per renderla un posto migliore.

Usare tecnologie come il markup semantico e i CSS per creare spazi inclusivi è una parte cruciale nel rendere il web un posto migliore, continuiamo ad andare avanti e a cambiare la vita.

Dai un'occhiata a un'altra fantastica risorsa qui su CSS-Tricks su utilizzando :focus-interiore.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• PlatoData.Network Generativo verticale Ai. Potenzia te stesso. Accedi qui.
• PlatoAiStream. Intelligenza Web3. Conoscenza amplificata. Accedi qui.
• PlatoneESG. Carbonio, Tecnologia pulita, Energia, Ambiente, Solare, Gestione dei rifiuti. Accedi qui.
• Platone Salute. Intelligence sulle biotecnologie e sulle sperimentazioni cliniche. Accedi qui.
• Fonte: https://css-tricks.com/accessible-forms-with-pseudo-classes/