30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Come realizzare caselle di controllo e pulsanti di opzione personalizzati e accessibili

by
Difficulty:BeginnerLength:ShortLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Gli elementi dei moduli come le caselle di controllo e i pulsanti di opzione hanno un aspetto diverso a seconda del browser e del sistema operativo dell'utente. Per questo motivo i designer e i sviluppatori hanno dato per lungo tempo uno stile alle proprie caselle di controllo e ai pulsanti di opzione, con l'obiettivo di coerenza indipendentemente dal browser o dal sistema operativo.

Questo è perfettamente soddisfacente, ma allo stesso tempo abbiamo bisogno di assicurarci che le nostre caselle di controllo e i pulsanti di opzione rimangano accessibili per le tecnologia assistive (AT) e per gli utenti da tastiera. In questo tutorial spiegherò cosa significa e come possiamo fare le cose correttamente in diversi modi.

 Stili di Default del browser

Iniziamo osservando come il browser esegue il rendering delle caselle di controllo per impostazione predefinita. Come accennato, quello che vedete qui dipenderà dal vostro browser e dal sistema operativo.

Noterete che potete utilizzare il mouse per attivare/disattivare le caselle di controllo, inoltre potete utilizzare la tastiera (saltate attraverso l'utilizzo di TAB e azionate utilizzando la Barra spaziatrice, anche se questo potrebbe cambiare a seconda delle impostazioni).

1. Dare uno stile personalizzato alle caselle di controllo

È tempo di costruire il nostro. Andremo a "nascondere" visivamente le caselle di controllo predefinite, mettendo delle versioni personalizzate nella parte superiore. La prima cosa che dobbiamo bisogno di guardare è il markup.

Il Markup HTML

Il markup per una singola casella di controllo è simile al seguente:

Usiamo un <div> contenitore per aiutarci con gli stili personalizzati, ma oltre a questo il codice HTML qui è un markup semantico del modulo. La magia avviene quando  nascondiamo visivamente il nostro <input type="checkbox"> utilizzando la regola CSS opacity: 0.

Questo nasconde la nostra casella di controllo visivamente,  permettendoci di andare avanti e creare la nostra. È importante che non lo nascondiamo utilizzando display: none perché questo nasconderebbe la casella di controllo sia del browser che delle tecnologie assistive (AT) degli utenti, e perderemmo anche le interazioni tramite tastiera.

Noterete che, anche se la stiamo nascondendo, diamo alla casella di controllo un'altezza e una larghezza di 40px. Questo ci dà un'area obiettivo chiara e funzionale da porre sotto la nostra casella di controllo realizzata.

Il contenitore <div> ha una regola CSS position: relative. Questa ci aiuta a posizionare la casella di controllo e contrassegnare gli pseudo elementi ::before e ::after utilizzando position: absolute.

 Aggiungere una casella di controllo visiva utilizzando gli pseudo elementi

Ci manca ancora una casella di controllo visiva. Per risolvere questo problema innanzitutto utilizziamo un elemento label::before per aggiungere un bordo:

Ho usato un bordo solido di 2px e colore ereditato, ma potete utilizzare un colore di bordo diverso se lo desiderate. Notate che posizioniamo e ridimensioniamo questo nello stesso modo della nostra casella di controllo trasparente.

Con alcuni margini supplementari per le etichette per darci un po' di spazio, questo è come appaiono le nostre caselle di controllo a questo punto:

Custom checkbox styles with 2px border
Gli stili della casella di controllo personalizzata con un bordo di 2px.

Il passo successivo è quello di utilizzare lo pseudo elemento label::after per dare uno stile alla "spunta":

Creiamo la spunta utilizzando un elemento a cui diamo un bordo di quattro pixel in basso e a destra. Poi lo ruotiamo di 45 gradi: bingo! Una spunta personalizzata. Potreste anche utilizzare dei colori diversi per il bordo per abbinarli al vostro design.

Custom check styles with 4px border bottom and right When rotating this 45 degrees it looks like a check
Lo pseudo elemento dà uno stile con un bordo inferiore e destro di 4px. Quando è ruotato di 45 gradi si presenta come una spunta

In questa fase non saremo in grado di vedere nulla; ancora stiamo nascondendo la spunta visivamente utilizzando opacity: 0. Rimediamo!

 Rivelare la spunta personalizzata usando lo pseudo selettore :checked

Lo pseudo selettore :checked seleziona una casella di controllo quando è attivata con lo stato "on". Possiamo usare ciò per modificare l'opacità della nostra spunta personalizzata:

Fatto questo, questo è quello che abbiamo:

Nota: c'è un'altra cosa che abbiamo bisogno di includere, e cioè "stili di focus". Li discuteremo nella prossimo demo.

2. Casella di controllo personalizzata utilizzando SVG inline

Portiamo le cose a un livello superiore. Invece di un pseudo elemento potremmo usare un'icona personalizzata SVG per la nostra spunta. Per farlo, porremmo l'SVG all'interno dell'etichetta:

Nella maggior parte dei casi il formato SVG è solo decorativo, quindi aria-hidden="true" lo nasconde ai dispositivi AT.

Aggiungere stili SVG

Abbiamo bisogno di applicare un paio di stili all'elemento SVG, in modo che è posizionato e ha le dimensioni corrette. Possiamo inoltre utilizzare la proprietà fill per modificarne il colore (blue in questo caso):

 Ricordare gli stili dello stato focus

L'ispirazione per il mio esempio di stili di casella di controllo è stato preso da quello trovato sul sistema di design degli elementi del modulo di GOV:UK (una risorsa brillante, andate a dare un'occhiata). Gli stili di focus sono importanti come in qualsiasi elemento focalizzabile:

Usiamo un box-shadow per gli stili di focus perché rispetterà i bordi arrotondati, che useremo anche per i pulsanti di opzione in seguito

Focus styles for checkbox yellow border around checkbox
Gli stili di focus per le caselle di controllo: bordo giallo

 Aggiungere gli stili di focus per Windows "Modalità a contrasto elevato"

La modalità a contrasto elevato di Windows rimuove le regole di ombreggiatura, quindi per questo motivo abbiamo anche bisogno di aggiungere degli stili di contorno trasparenti:

Questo contorno trasparente appare come un bordo supplementare in modalità a contrasto elevato.

Transparent outline shows as border in Windows High Contrast Mode
Il contorno trasparente appare come un bordo supplementare in modalità contrasto elevato di Windows

3. SVG come sfondo dello pseudo elemento

Oltre a utilizzare il codice SVG inline, potremmo anche ricreare una versione delle prime caselle di controllo personalizzato che abbiamo fatto, utilizzando SVG come sfondo per lo pseudo elemento invece di costruire la nostra "spunta" con i bordi. Abbiamo coperto tutte le tecniche che dovete sapere su questo, quindi eccovi la demo da analizzare:

4. Stili personalizzati per il pulsante di opzione

Praticamente tutti gli stili e la logica che abbiamo utilizzato finora per le nostre caselle di controllo sono le stesse per i pulsanti di opzione. Date un'occhiata alla demo e vedete voi stessi (navigate con la tastiera, utilizzate i tasti freccia):

La sola differenza apparente è il nostro utilizzo un po' diverso di border-radius e dello stile dello stato :checked. Potreste certamente utilizzare anche un'icona SVG in questo caso – ve lo lascio come compito per casa! Mostrateci i vostri risultati nella sezione commenti.

5. Testare l'accessibilità

Provare è una parte importante del processo quando armeggiate con gli elementi HTML nativi. I miei test sono lungi dall'essere perfetti, ma ecco come ho fatto le cose per questo tutorial:

  • I test con la tastiera in tutti i browser moderni e IE11.
  • VoiceOver usando Safari.
  • Il lettore di schermo NVDA utilizzando Firefox.
  • TalkBack utilizzando un dispositivo Android.
  • Condizioni di daltonismo utilizzando il software Sim Daltonism.
  • Modalità a contrasto elevato di Windows.

Senza dubbio in questo elenco manca il software di riconoscimento vocale come Dragon, o i dispositivi di commutazione. Ma in tutte le mie prove le caselle di controllo e pulsanti di opzione personalizzati si sono comportati nello stesso modo degli elementi nativi.

 Conclusione e riferimenti

Spero che questo tutorial vi abbia dato una comprensione di come creare stili personalizzati per le caselle di controllo e i pulsanti di opzione, mentre state ancora sviluppando per l'accessibilità.

Consiglio vivamente di imparare di più sugli elementi di modulo personalizzati da queste risorse:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.