Una finestra di dialogo più accessibile

L’argomento di oggi non è certo di quelli che si discutono sotto l’ombrellone tra un sorso di mojito ed un’occhiata al bagnino fustaccio che osserva imperscrutabile i bagnanti allegri che si fanno cullare tra le onde stanche del mare. Cosciente del periodo dell’anno in cui ci troviamo, cercherò di alleggerire il tema di oggi quanto più possibile, sperando nel contempo di incuriosire chi passasse da queste parti a saperne di più. L’idea mi è venuta qualche giorno fa, quando il mio collega, il cui lavoro è quello di monitorare l’accessibilità del sito d’ateneo e di tutte le risorse collegate (dai documenti PDF ai vari sistemi per la gestione dei contenuti che usiamo), ci raccontava nella sua periodica “pillola della settimana”, l’esistenza dell’elemento HTML dialog, di cui pochi conoscono l’esistenza, a giudicare dal suo scarso utilizzo in giro per il web. Il sito della Mozilla dedicato agli sviluppatori è sicuramente un buon punto di partenza. Ma che c’azzecca, si chiederanno i miei piccoli lettori, questo elemento con la possibilità rendere il web più accessibile ai disabili?

Gli sviluppatori, sin dagli albori del web, hanno implementato le soluzioni più disparate per emulare una funzione che ogni sistema operativo moderno offriva in maniera naturale: la possibilità di aprire una finestra di dialogo per confermare un’azione, o per richiedere al visitatore di inserire dati in un modulo, ad esempio per iscriversi ad una newsletter oppure per autenticarsi in un sito di commercio elettronico. Abbiamo visto l’uso creativo di alert, confirm, ma anche div per le finestre cosiddette modali, fino ad arrivare agli standard di fatto rappresentati da pacchetti come Bootstrap. Sfortunatamente, tante di queste soluzioni, per quanto eleganti e relativamente facili da usare, non sono accessibili per coloro che usano un lettore vocale per navigare il web. Bootstrap rappresenta un caso a parte, specialmente nella versione 4.x del framework, visto che implementa gli attributi ARIA per cercare di dare un senso a qualcosa che… un senso non ce l’ha, come cantava una volta qualcuno.

Ecco allora entrare in scena l’elemento dialog, tramite il quale è possibile implementare finestre di dialogo semplici ed efficaci:

<dialog id="confirmation-dialog">
  <h1>Confermi di voler cancellare tutto?</h1>
  <p>Tutti i dati verranno eliminati dal sistema.</p>
  <button id="cancel-delete">Annulla</button>
  <button id="confirm-delete">Procedi!</button>
</dialog>

Di suo, quest’elemento rimarrà nascosto al visitatore, quando la pagina viene caricata nel browser. Basterà qualche riga di JavaScript per dirgli di apparire:

<script>
let dialog = document.getElementById("confirmation-dialog");
let result = document.getElementById("result");
// Show the dialog when clicking "Delete everything"
document.getElementById("delete").addEventListener("click", function() {
  dialog.showModal();
});
document.getElementById("cancel-delete").addEventListener("click", function() {
  dialog.close();
  result.textContent = "L'operazione è stata annullata.";
});
document.getElementById("confirm-delete").addEventListener("click", function() {
  dialog.close();
  result.textContent = "Dati eliminati con successo.";
});
</script>

Da notare come in quest’esempio, il metodo showModal() consente di interagire con l’elemento in maniera nativa, senza la necessità di librerie JavaScript di terze parti. L’interazione con l’utente è bloccata all’interno della finestra di dialogo modale e il contenuto esterno non può essere selezionato, messo a fuoco, modificato o visualizzato neppure navigando il sito con la tastiera. Infine, tieni in considerazione che l’elemento dialog apparirà sempre sopra ogni altro elemento nella pagina, indipendentemente dagli attributi z-index a loro associati.

Come dicevamo all’inizio, spesso queste finestre sono usate per mostrare un modulo che possa raccogliere un qualche dato dall’utente. Il codice necessario è molto simile a quello appena visto qui sopra:

<dialog id="confirmation-dialog">
  <form method="dialog">
    <h1>Accedi al sistema</h1>
    <p>Inserisci il tuo nome utente e password per visualizzare la tua fattura</p>
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit" value="Annulla">Annulla</button>
    <button type="submit" value="Invia">Invia</button>
  </form>
</dialog>

That’s it, come si direbbe in inglese. Con queste poche righe di codice si ottiene una soluzione altrettanto elegante ed intuitiva da gestire anche per coloro che non masticano queste cose per mestiere. Poi basterà qualche pennellata di CSS per rendere il tutto esteticamente gradevole, ed il gioco è fatto.