JavaScript

Puoi utilizzare JavaScript per rispondere alle interazioni degli utenti sul modulo, mostrare altri campi del modulo, inviare un modulo e molto altro ancora.

Immagina di aver creato un modulo per un sondaggio. Dopo che un utente ha selezionato un'opzione, vuoi mostrare un'altra <input> per porre una domanda specifica relativa alla selezione. Come faccio a mostrare solo l'elemento <input> pertinente?

Puoi utilizzare JavaScript per mostrare un <input> solo quando il <input type="radio"> associato è attualmente selezionato.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Diamo un'occhiata al codice JavaScript per la demo. Hai notato gli attributi aria-controls e aria-expanded? Utilizza questi attributi ARIA per aiutare gli utenti di screen reader a capire quando viene mostrato o nascosto un controllo aggiuntivo del modulo.

Assicurati che gli utenti possano inviare un modulo senza uscire da una pagina

Immagina di avere un modulo per i commenti. Quando un lettore aggiunge un commento e invia il modulo, sarebbe ideale se potesse visualizzarlo immediatamente senza aggiornare la pagina.

Per farlo, ascolta l'evento onsubmit, quindi utilizza event.preventDefault() per impedire il comportamento predefinito e invia FormData utilizzando l'API Fetch.

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

Lo script di backend può verificare se una richiesta POST sembra provenire dal browser (utilizzando l'attributo action di un elemento del modulo, dove method="post") o da JavaScript, ad esempio una richiesta fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Informa sempre gli utenti di screen reader delle modifiche ai contenuti dinamici. Aggiungi un elemento con l'attributo aria-live="polite" al codice HTML e aggiorna i contenuti dell'elemento dopo una modifica. Ad esempio, aggiorna il testo in "Il tuo commento è stato pubblicato correttamente" dopo che un utente ha inviato un commento.

Scopri di più sulle regioni live ARIA.

Convalida con JavaScript

Assicurati che i messaggi di errore siano in linea con lo stile e il tono del tuo sito

La formulazione dei messaggi di errore predefiniti varia da un browser all'altro. Come puoi assicurarti che lo stesso messaggio venga mostrato a tutti gli utenti e che sia in linea con lo stile e il tono del tuo sito? Utilizza il metodo setCustomValidity() dell'API Constraint Validation per definire i tuoi messaggi di errore.

Assicurati che gli utenti ricevano notifiche degli errori in tempo reale

Le funzionalità HTML integrate per la convalida dei moduli sono ideali per notificare agli utenti i campi del modulo non validi prima che i dati vengano inviati al tuo backend. Non sarebbe fantastico avvisare gli utenti non appena escono da un campo del modulo?

Ascolta l'evento blur che si attiva quando un elemento perde il focus e utilizza l'interfaccia ValidityState per rilevare se un controllo del modulo non è valido.

Assicurati che gli utenti possano vedere la password inserita

Il testo inserito per <input type="password"> è oscurato per impostazione predefinita per rispettare la privacy degli utenti. Aiuta gli utenti a inserire la password mostrando un <button> per attivare/disattivare la visibilità del testo inserito.

Prova la demo. Attiva/disattiva la visibilità del testo inserito utilizzando l'opzione Mostra password <button>. Come funziona? Se fai clic su Mostra password, l'attributo type del campo della password diventa type="password" anziché type="text" e il testo <button> diventa "Nascondi password".

È importante rendere accessibile il pulsante Mostra password. Collega <button> a <input type="password"> utilizzando l'attributo aria-controls.

Per informare gli utenti che utilizzano uno screen reader se la password è attualmente visibile o nascosta, utilizza un elemento nascosto con aria-live="polite" e modifica il relativo testo di conseguenza. È importante consentire agli utenti di screen reader di sapere quando una password viene visualizzata e visibile a qualcun altro che guarda lo schermo.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Scopri di più sull'implementazione di un'opzione per mostrare la password.

Risorse