Share
Gli elementi del modulo come caselle di controllo e pulsanti di opzione appaiono diversi a seconda del browser e del sistema operativo dell'utente. Per questo motivo i designer e gli sviluppatori hanno da molto tempo messo a punto le proprie caselle di controllo e pulsanti radio, puntando alla coerenza, indipendentemente dal browser o dal sistema operativo..
Questo è perfettamente soddisfacente, ma allo stesso tempo dobbiamo assicurarci che le nostre caselle di controllo e i pulsanti di opzione rimangano accessibili agli utenti di tecnologia assistiva (AT) e tastiera. In questo tutorial spiegherò cosa significa e come possiamo fare le cose correttamente in diversi modi.
Questo tutorial fa parte dell'accessibilità Web: la Guida completa all'apprendimento, in cui abbiamo raccolto una serie di tutorial, articoli, corsi e ebook, per aiutarti a capire l'accessibilità web dall'inizio.
Iniziamo osservando come il browser esegue il rendering delle caselle di controllo per impostazione predefinita. Come già detto, ciò che vedi qui dipenderà dal tuo browser e dal tuo sistema operativo.
Noterai che puoi usare il mouse per attivare e disattivare le caselle di controllo, inoltre puoi usare la tastiera (usa l'immagine TAB e passare utilizzando SPAZIO, anche se questo potrebbe cambiare a seconda delle impostazioni).
È tempo di costruire il nostro. Stiamo per "nascondere" visivamente le caselle di controllo predefinite, posizionando le versioni personalizzate sopra la parte superiore. La prima cosa che dovremo esaminare è il markup.
Markup per una singola casella di controllo assomiglia a questo:
Noi usiamo a Questo nasconde visivamente la nostra casella di controllo, permettendoci di andare avanti e creare il nostro. È importante non nasconderlo usando Noterai che, anche se lo nascondiamo, diamo alla casella di controllo un'altezza e una larghezza di 40px. Questo ci fornisce un'area obiettivo chiara e funzionale da posizionare sotto la nostra casella di controllo fabbricata. L'involucro Manca ancora una casella di controllo visiva. Per risolvere questo, prima usiamo a Ho usato un bordo solido 2px e il colore ereditato, ma puoi usare un colore di bordo diverso se lo desideri. Si noti che la posizioniamo e la ridimensioniamo allo stesso modo della nostra casella di controllo trasparente. Con alcuni margini extra per le etichette per darci un po 'di spaziatura, ecco come appaiono le nostre checkbox a questo punto: Il prossimo passo è usare il Creiamo il controllo usando un elemento che diamo un bordo di quattro pixel per il fondo e il destro. Poi lo ruotiamo di 45 gradi: bingo! Un controllo personalizzato Puoi anche usare colori di bordo diversi per abbinarli al tuo design. A questo punto non sarai in grado di vedere nulla; stiamo ancora nascondendo il controllo usando visivamente Il Fatto questo, questo è quello che abbiamo: Nota: c'è un'altra cosa che dobbiamo includere in questo, e questo è "stili di messa a fuoco". Ne discuteremo nella prossima demo. Prendiamo le cose su un livello. Invece di uno pseudo elemento potremmo usare un'icona SVG personalizzata per il nostro controllo. Per fare ciò, posizioniamo l'SVG all'interno dell'etichetta: Nella maggior parte dei casi SVG è solo decorativo, quindi Abbiamo bisogno di applicare un paio di stili all'elemento SVG in modo che sia posizionato e dimensionato correttamente. Possiamo anche usare il L'ispirazione per gli stili della mia casella di controllo di esempio è stata presa da quelli trovati nel sistema di progettazione di GOV.UK per gli elementi del modulo (una risorsa geniale, vai a dare un'occhiata). Gli stili di messa a fuoco sono importanti quanto in qualsiasi elemento focalizzabile: Noi usiamo a La modalità Contrasto elevato di Windows rimuove le regole box-shadow, quindi per questo motivo è necessario aggiungere anche stili di contorno trasparenti: Questo contorno trasparente appare come un bordo aggiuntivo in modalità contrasto elevato. Oltre a utilizzare il codice SVG in linea, è anche possibile ricreare una versione delle prime caselle di controllo personalizzate che abbiamo creato, utilizzando SVG come sfondo per lo pseudo elemento invece di creare il nostro "controllo" con i bordi. Abbiamo coperto tutte le tecniche che devi sapere per questo, quindi ecco la demo per te da analizzare: Praticamente tutti gli stili e la logica che abbiamo usato per le nostre caselle di controllo finora sono gli stessi per i pulsanti di scelta. Dai un'occhiata alla demo e guarda di persona (per navigare con la tastiera, usa il Tasti freccia): L'unica differenza apparente è il nostro utilizzo Il test è una parte importante del processo quando si lavora con elementi HTML nativi. I miei test sono tutt'altro che perfetti, ma è così che ho fatto le cose per questo tutorial: Probabilmente questo elenco manca di software di riconoscimento vocale come Dragon, o cambia dispositivo. Ma in tutti i miei test le caselle di controllo e i pulsanti di opzione personalizzati si comportavano allo stesso modo degli elementi nativi. Speriamo che questo tutorial ti abbia dato una comprensione di come creare stili personalizzati per le caselle di controllo e i pulsanti di opzione, pur continuando a creare accessibilità. Consiglio vivamente di imparare di più sugli elementi del modulo personalizzato da queste risorse: usando la regola CSS opacità: 0..wrapper position: relativo; .wrapper input height: 40px; a sinistra: 0; opacità: 0; posizione: assoluta; inizio: 0; larghezza: 40px;
display: nessuno perché ciò nasconderebbe la casella di controllo sia dagli utenti di browser che di tecnologia assistiva (AT) e perderemmo anche le interazioni con la tastiera.posizione: relativa Regola CSS. Questo ci aiuta a posizionare la casella di controllo e l'etichetta ::prima e ::dopo elementi pseudo utilizzando posizione: assoluta. Aggiungi casella di controllo visuale usando pseudo elementi
Etichetta :: prima elemento per aggiungere un bordo:.input wrapper + label :: before border: 2px solid; contenuto: ""; altezza: 40px; a sinistra: 0; posizione: assoluta; inizio: 0; larghezza: 40px;
Stili di selezione personalizzati con bordo 2px.Etichetta :: dopo pseudo elemento per lo stile del "controllo":.input wrapper + label :: after content: ""; bordo: 4 px solido; border-left: 0; border-top: 0; altezza: 20px; a sinistra: 14px; opacità: 0; posizione: assoluta; inizio: 6px; transform: ruotare (45 gradi); transizione: opacità 0.2s easy-in-out; larghezza: 12px;
Pseudo elemento in stile con bordo 4px in basso e a destra. Quando ruotato di 45 gradi sembra un assegnoopacità: 0. Rimediamolo! Rivela il controllo personalizzato con
: selezionata Pseudo selettore: selezionata lo pseudo selettore seleziona una casella quando è impostata sullo stato "on". Possiamo usarlo per cambiare l'opacità del nostro controllo personalizzato:.input wrapper: checked + label :: after opacity: 1;
2. Casella di controllo personalizzata che utilizza SVG in linea
aria-hidden = "true" lo nasconde dai dispositivi AT.Aggiungi stili SVG
riempire proprietà per cambiare il suo colore (blu in questo caso):.wrapper input + label svg border: 0; riempimento: blu; altezza: 20px; larghezza: 20px; opacità: 0; posizione: assoluta; a sinistra: 10px; inizio: 10px; transizione: opacità 0.2s easy-in-out;
Ricorda stili di stato della messa a fuoco
.input wrapper: focus + label :: before box-shadow: 0 0 0 3px # ffbf47;
box-ombra per gli stili di messa a fuoco perché rispetterà i bordi arrotondati, che utilizzeremo anche per i pulsanti di opzione in seguito
Focus stili per casella di controllo: bordo giallo Aggiungi stili di messa a fuoco per Windows "Modalità contrasto elevato"
.input wrapper: focus + label :: before box-shadow: 0 0 0 3px # ffbf47; schema: 3px trasparente solido; / * Per la modalità a contrasto elevato di Windows. * /
Il contorno trasparente appare come un bordo in più in modalità Contrasto elevato di Windows 3. SVG come sfondo dell'elemento pseudo
4. Stili pulsanti radio personalizzati
border-radius e lo stile : selezionata dichiarare un po 'diversamente. In questo caso, potresti anche usare un'icona SVG: lo lascerò come compito per te! Mostraci i tuoi risultati nella sezione commenti. 5. Test per l'accessibilità
Conclusione e riferimenti
Accentsconagua