Anteprima screen reader
Per uno screen reader una pagina è un’unica lunga frase. Inserisci un indirizzo per avere quella frase trascritta, ascoltala con una voce del tuo dispositivo e scopri quali elementi vengono annunciati senza nome.
Da due dimensioni a una
Con gli occhi abbracci la pagina tutta insieme: logo in alto a sinistra, menu in orizzontale, articolo al centro, barra laterale a destra. La voce non può fare «tutto insieme». Uno screen reader come NVDA, JAWS, VoiceOver o TalkBack percorre l’HTML nell’ordine del codice sorgente e legge un elemento alla volta, con il ruolo davanti al testo: «intestazione livello 2, Prezzi», «link, Contattaci», «modifica, E-mail, obbligatorio».
Nessuno ascolta tutto dall’inizio alla fine. Gli utenti esperti navigano per tipo. Un tasto salta al titolo successivo, un altro elenca tutti i link della pagina, un altro va dritto al landmark principale. Per loro, quindi, il ruolo e il nome di ogni elemento sono l’intera interfaccia. Un pulsante che a schermo sembra ovvio ma non ha testo viene annunciato come «pulsante», e non sentono altro.
Come viene creata la trascrizione
Il nostro server scarica la pagina una volta e percorre il <body> come fanno i software assistivi. Il <title> della pagina viene per primo, perché è la prima cosa letta quando si apre una pagina. Dopo, ogni elemento diventa una riga:
- Landmark: banner, navigation, main, complementary, content info, search, più le regioni e i moduli con un nome.
- Titoli con il loro livello, link con la loro destinazione, pulsanti con il loro stato (espanso, compresso, premuto).
- Campi dei moduli con tipo e stato: «casella di controllo, non selezionata», «casella combinata», «modifica, e-mail, obbligatorio».
- Immagini, frame, elenchi con il numero di voci e tabelle con il numero di righe e colonne.
Calcoliamo il nome di ogni elemento nell’ordine usato dai browser: aria-labelledby, poi aria-label, poi la fonte nativa (alt, <label>, contenuto testuale), poi title. Tutto ciò che ha hidden, aria-hidden="true" o un display:none inline viene escluso, e così il contenuto di un <details> chiuso. Le immagini con alt="" vengono saltate e contate come decorative.
Premi Ascolta e il motore vocale del browser legge le righe. I ruoli sono letti in inglese. Il contenuto è letto con una voce che corrisponde all’attributo lang della pagina, se il tuo dispositivo ne ha una, e la voce cambia per i passaggi marcati con un proprio lang.
Cosa significano le segnalazioni
| Segnalazione | Cosa sente chi ascolta | Soluzione |
|---|---|---|
| senza alt | «Immagine senza etichetta», a volte seguito dal nome del file | Aggiungi un testo alt, o alt="" se l’immagine è decorativa |
| link vuoto, senza nome | Solo «Link» o «pulsante» | Testo visibile, un alt sull’icona, o aria-label |
| senza etichetta | «Modifica» senza nessuna domanda | <label for="…"> legato all’id del campo |
| solo placeholder | Un suggerimento che magari non viene letto affatto | Una vera etichetta accanto al campo |
| testo vago, testo ripetuto | «Leggi di più» cinque volte, ognuna verso una destinazione diversa | Nomina la destinazione nel link |
| salta un livello, vuoto | Una struttura piena di buchi | Passa da h2 a h3, mai direttamente a h4 |
| senza title, senza intestazioni | «Frame»; valori di tabella senza la loro colonna | title sull’<iframe>; celle <th> |
Una segnalazione rossa significa che l’elemento non ha nessun nome. Una segnalazione ambra significa che ne ha uno, ma il nome non aiuta. Il riepilogo segnala anche la mancanza della lingua della pagina, di un <h1> e del landmark principale, e ti dice quanti elementi vengono prima del contenuto principale. Se quel numero è alto, ogni visita a ogni pagina comincia con la stessa lunga recita del tuo menu.
Tre modi di usare i filtri
- Seleziona Titoli e leggi solo quell’elenco. Deve funzionare come indice della pagina.
- Seleziona Link. Ogni riga deve avere senso anche senza la frase intorno.
- Seleziona Campi e pulsanti, chiudi gli occhi e premi Ascolta. Dovresti capire cosa vuole da te ogni controllo.
Seleziona una riga qualsiasi per ricominciare la lettura da lì. Il cursore della velocità ti dà un’idea del ritmo scelto dagli utenti abituali, spesso ben più rapido del parlato normale.
Un’approssimazione, con limiti noti
La trascrizione viene dall’HTML così come l’ha inviato il server. Non eseguiamo JavaScript e non applichiamo i fogli di stile, quindi il contenuto aggiunto da script manca e quello nascosto da una classe CSS viene comunque letto. Il tempo di ascolto è una stima basata su circa 170 parole al minuto. Le pagine molto lunghe si fermano a 1.200 elementi. Ogni vero screen reader ha poi il proprio vocabolario e le proprie scorciatoie, quindi prova con almeno uno di loro prima di un rilascio. NVDA è gratuito su Windows e VoiceOver è incluso in macOS e iOS.
Domande frequenti
È come testare con NVDA o VoiceOver?
No. Mostra l’ordine, i ruoli e i nomi su cui lavora uno screen reader, ed è lì che si trova la maggior parte dei problemi. Non riproduce i comportamenti interattivi come l’apertura dei menu, gli annunci dinamici o il focus che entra in una finestra di dialogo. Usalo per trovare i problemi in fretta, poi conferma con un vero screen reader.
Perché la voce legge la mia pagina con l’accento sbagliato?
O la pagina non dichiara una lingua con <html lang="…">, o il tuo dispositivo non ha una voce installata per quella lingua. La riga di stato sopra la trascrizione dice quale voce è in uso. I veri screen reader si comportano allo stesso modo.
Perché parte del testo della mia pagina manca dalla trascrizione?
Probabilmente è stato aggiunto da JavaScript dopo il caricamento della pagina, oppure sta dentro un elemento <details> chiuso o in un contenitore aria-hidden. Leggiamo solo l’HTML inviato dal server.
Cosa deve annunciare uno screen reader per un logo?
Il nome dell’organizzazione e, se il logo è un link, dove porta: alt="Acme, home page". Non scrivere solo «logo» e non omettere l’alt, altrimenti il link viene annunciato con il nome del file o l’indirizzo.
Quanti link prima del contenuto principale sono troppi?
Non c’è un limite fisso, perché un link per saltare il menu e un elemento <main> permettono di superarli con un solo tasto. Senza questi due, già oltre una manciata di elementi diventa faticoso alla terza pagina.