Etichette delle finestre di dialogo

Silktide controlla che le finestre di dialogo, ovvero finestre popup che compaiono sopra la pagina, dichiarino un nome che possa essere letto ad alta voce dalla , in modo che le persone sappiano che cosa si è appena aperto.

Una finestra di dialogo viene contrassegnata in assegnando a un elemento il ruolo dialog. Il ruolo comunica alla tecnologia assistiva che è comparsa una finestra separata, ma da solo non indica a cosa serva la finestra.

<!-- Problema: una finestra di dialogo senza nome accessibile -->
<div role="dialog">
  <p>La sessione sta per scadere.</p>
</div>

Perché è importante

Quando si apre una finestra di dialogo, un la annuncia e sposta il focus del visitatore al suo interno. Se la finestra di dialogo ha un nome, l'ascoltatore sente qualcosa come "Scadenza della sessione, finestra di dialogo" e comprende immediatamente l'interruzione. In sua assenza, sente solo "finestra di dialogo": è stato allontanato da ciò che stava facendo senza alcuna spiegazione e deve esplorare il contenuto per capire il motivo.

Come risolvere il problema

Assegna a ogni finestra di dialogo un , utilizzando una delle seguenti opzioni:

aria-labelledby che faccia riferimento all'id del titolo visibile della finestra di dialogo: è l'opzione migliore, perché i visitatori vedenti vedono lo stesso nome:

<!-- Risolto: la finestra di dialogo prende il nome dall'intestazione -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Scadenza della sessione</h2>
  <p>La sessione sta per scadere.</p>
</div>

aria-label con il nome come testo, quando la finestra di dialogo non ha un titolo visibile:

<div role="dialog" aria-label="Scadenza della sessione">
  ...
</div>

Come esegue i controlli Silktide

Individua ogni elemento di ciascuna pagina il cui role è dialog.
Determina il nome accessibile di ogni finestra di dialogo, tramite attributi come aria-label e aria-labelledby.
Segnala ogni finestra di dialogo il cui nome accessibile è assente o vuoto.

Risoluzione dei problemi

La mia finestra di dialogo compare solo dopo un'interazione dell'utente

Silktide esamina ogni pagina al momento del caricamento. Una finestra di dialogo che viene aggiunta alla pagina in un secondo momento, ad esempio dopo aver fatto clic su un pulsante, potrebbe non essere sottoposta a controllo, ma ha comunque bisogno di un'etichetta per i visitatori che la raggiungono.

Uso l'elemento dialog nativo

Questo controllo esamina gli elementi che dichiarano esplicitamente role="dialog". Un elemento nativo <dialog> senza quel ruolo non viene sottoposto a controllo, ma le indicazioni restano valide: assegnagli un nome accessibile con aria-labelledby o aria-label.