Come creare moduli Web accessibili

Sep 12, 2025

Come si fa

I moduli sono un componente essenziale del Web perché collegano gli utenti alla tua azienda e aiutali a realizzare ciò che sono venuti al tuo sito o app per. Detto questo, vuoi assicurarti che tutti i tuoi utenti siano in grado di utilizzare i tuoi moduli senza dover subire un'esperienza orribile. L'obiettivo è rendere queste interazioni utente chiave come possibile senza attrito.

Anche se è vero che le forme di costruzione possono essere un compito difficile a volte, rendendole moderatamente accessibili non è complicato come si potrebbe pensare (un bene Builder del sito web lo renderà super-semplice). Ci sono spesso scuse lanciate in giro come "non abbiamo il tempo di preoccuparsi dell'accessibilità" o "lo rendiamo accessibile in seguito". Queste scuse sono spesso (se non sempre) non valide e puoi aiutare la tua squadra a cambiare questa mentalità.

Alla ricerca di ulteriori consigli? Ti abbiamo coperto con messaggi su argomenti da web hosting per deposito cloud. .

13 migliori pezzi di software di test dell'utente

Ecco alcune domande che dovresti prendere in considerazione quando sono le forme di costruzione:

Quali difficoltà potrebbero avere qualcuno con disabilità visive usando la mia forma?
L'utente ha una chiara indicazione di quali dati sono previsti per l'input?
La forma è facile da usare - gli utenti saranno in grado di capirlo rapidamente?
Sono in grado di usare la tastiera per completare il modulo?

Come fare un modulo di abbonamento di base

Ti ho dato un codice di avviamento per aiutarti a superare. Bene Inizia con questo ed eventualmente arrivare a questo .

Ti ho fornito alcuni styling e elementi di base che costituirebbero un semplice modulo di abbonamento, ma c'è molto che possiamo fare qui per rendere questa forma più utilizzabile. Con tutto ciò che crei, usando un buon html semantico ti porterà molto lontano.

Iniziamo collegando il & lt; input & gt; elementi al loro rispettivo & lt; Etichetta e GT; S. Lo facciamo dando il & lt; input & gt; un ID e usando quello come l'attributo per il & lt; Etichetta e GT; . Possiamo usare "Nome" e "Email" per questi e abbiamo già fatto due cose:

Abbiamo collaborato a livello di programmazione l'etichetta all'ingresso. Il vantaggio di questo è che leggerà l'etichetta a un utente di schermata se tale input è focalizzato.
L'utente può ora fare clic sull'etichetta e il rispettivo ingresso sarà focalizzato, quindi gli utenti ora hanno una dimensione target più ampia.

Ora che i nostri ingressi ed etichette sono tutti cablati, possiamo definire i tipi di ingresso HTML. Questi sono davvero utili e un modo super semplice per dare un'eccellente esperienza utente. Aggiungendo il. genere L'attributo aiuterà l'utente a riempire automaticamente il modulo e fornirà anche una tastiera più adatta per gli utenti mobili. Per il nostro caso d'uso possiamo fare Type = "Testo" Per il nome input e Type = "Email" per l'ingresso e-mail.

Vogliamo anche che i nostri utenti abbiano una buona idea di quale tipo di dati (e della sua formattazione) ci aspettiamo da loro. Qui è abbastanza ovvio ma non è sempre il caso. Generalmente è buona pratica fornire un'etichetta che è sempre visualizzabile e un segnaposto che comunica l'ingresso previsto. Ciò significa non usare il segnaposto Attributo come etichetta visiva per gli ingressi in cui l'etichetta non è visualizzabile una volta che un utente inizia a digitare. Questa è stata una pratica popolare per molti sviluppatori e deve davvero essere messo a letto una volta per tutte. Possiamo dare un segnaposto di "ex jane doe" per il nome e "ex [email protected]" per l'e-mail.

Ora possiamo andare a lavorare a fuoco stato messa in piega. Lo stile predefinito degli stati di messa a fuoco è diverso tra i browser e possiamo migliorare tutto ciò che lo styling predefinito potrebbe essere per renderlo più user friendly. Nel nostro caso qui, vogliamo che gli input abbiano un contorno denso e colorato che corrisponde al pulsante.

14 modi facili per rendere il tuo sito web più accessibile

Aggiungi stili di messa a fuoco per inserire il selettore

Infine, dobbiamo aggiungere alcuni stili di messa a fuoco attorno all'elemento del pulsante. Questo è spesso trascurato ma può davvero aiutare gli utenti della tastiera solo a sapere dove sono. Dobbiamo aggiungere questo & amp; :: moz-focus-innner Bit per sbarazzarsi di alcuni styling predefiniti in Firefox (potresti voler salvare quel snippet per uso futuro).

Proprio così, abbiamo un modulo di abbonamento di base che puoi essere orgoglioso e migliorare. Poiché abbiamo usato una buona semantica, la forma è accessibile solo tramite la tastiera (prova a utilizzare la scheda e la barra spaziatrice / immettere i tasti). I colori utilizzati per il pulsante sono un rapporto colore di 11,51, soddisfano gli standard AAA per WCAG (linee guida di accessibilità dei contenuti Web). Abbiamo fornito etichette per gli utenti visivi che per gli utenti dei reader visivi, nonché gli stati di messa a fuoco in stile per la nostra tastiera che utilizzano amici. Infine, si nota che il carattere è impostato su 18px. nel corpo. Questo rende la nostra forma molto più leggibile (dovresti cercare di rimanere al di sopra dei 14px).

Progettare e costruire con l'accessibilità in mente prende pratica ma sarai uno sviluppatore migliore per questo e contribuirai a rendere il web un posto migliore.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Generare, la premiata Conferenza vincente per i web designer, ritorna a New York il 24 aprile! Clicca l'immagine per prenotare un biglietto

Questo articolo è stato originariamente pubblicato in questione 316 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 316 qui o Iscriviti qui .

Articoli Correlati:

La correzione accessibilità non riesce con questo strumento gratuito
50 fantastici nuovi strumenti per gli sviluppatori nel 2019
Quanto sono accessibili i tuoi disegni?

Come creare moduli Web accessibili

Come fare un modulo di abbonamento di base

Aggiungi stili di messa a fuoco per inserire il selettore

Come si fa - Articoli più popolari

Come disattivare le notifiche Web per Windows, MacOS e Android

Crea un interno accogliente utilizzando la linea Art

Crea un'immagine multi-esposizione con Adobe CC

Come aggiungere texture ai tuoi pastelli con i primer

Accendi i tuoi menu usando l'animazione con CSS

Come sciogliere un oggetto 3D con tre.js

Affila le tue abilità di pittura di still life

Scopri lo stile e la sostanza della tipografia

Categorie