Quando un non vedente si ritrova a dover navigare una pagina web, c’è un fatto da premettere: se la pagina non è accessibile, dubito fortemente che ci riuscirà.
Potrà magari leggere il testo, cliccare su qualche link, ma una cosa è certa: se gli elementi non sono etichettati correttamente, non sono ben riconoscibili e identificabili dal browser, l’impresa sarà dura.
Se la pagina è ben strutturata e il codice utilizzato rispetta gli standard, è pulito e corretto, ogni elemento verrà identificato in modo chiaro da tutti i browser. E questo significa che anche il browser farà meno fatica per interpretare quel codice e tradurlo in ciò che compare a schermo, risparmiando così anche qualche millisecondo prezioso per il caricamento della pagina.
Se il sito non è accessibile, le informazioni non arrivano
Un esempio concreto per far chiarezza: immaginiamo di incontrare il famoso “Pulsante cerca”.
A video sarà raffigurato un pulsante con la scritta “Cerca” al suo interno, oppure la classica icona a forma di lente di ingrandimento, magari con un’etichetta al suo fianco che mi spiega il reale funzionamento di quel pulsante.
Affinché un non vedente comprenda questo elemento, il programmatore della pagina web deve assolutamente compilare correttamente il pulsante e la sua etichetta.
Il rischio è che al non vedente arrivi solo l’informazione della presenza di un pulsante, senza che ci sia alcuna indicazione per fargli comprendere a cosa serva.
È come se un vedente trovasse un rettangolino in mezzo alla pagina, senza nessuna scritta. Capisce che è un pulsante solo perché ha quella forma che ben conosce. Cosa succederà se ci clicchi sopra? Mistero.
Lo screen reader su una pagina web
I non vedenti utilizzano dei software, gli Screen Reader (lettori di schermo), che passano le informazioni del focus all’utente tramite una sintesi vocale integrata. In parole povere, dicono a voce su quale elemento siamo posizionati. Questi software permettono anche di gestire un display braille, uno strumento che riporta in braille le informazioni presenti sul monitor.
Lo screen reader, oltre ad aiutarci nell’uso del computer in generale, identifica tutti gli elementi di una pagina web e ci permette di consultare l’intera pagina grazie a delle combinazioni di tasti che spostano il focus in ogni elemento richiesto.
Possiamo navigare una pagina web utilizzando il tasto Tab o le frecce direzionali. Per quanto funzionale, risulta un lavoro molto dispersivo soprattutto in caso di contenuti o intere pagine web molto lunghe. Esiste però tra queste due modalità di navigazione una enorme differenza. Con le frecce direzionali vengono identificati e letti tutti gli elementi, anche il testo statico, per carattere, per parola o per riga. Il Tab invece passa da un elemento al successivo purché questo sia interattivo, cioè esegue un’azione o un comando.
Esempio:
Possiamo avere un link, del testo e successivamente un altro link.
Come in questo paragrafo. Qui c’è del testo. Tra poco inserirò un link che, cliccandoci sopra, ti porterà su Google. E ora trovi di nuovo del semplice testo. Ma sì, mettiamo anche un altro link che ti porta su Wikipedia.
Ora, navigando su questa pagina con le frecce, un non vedente che usa lo screen reader leggerà tutto e potrà interagire con i link. Se invece si muove con il tab, il focus si sposta da un link al successivo ignorando e di conseguenza non vocalizzando il testo.
Come descritto sopra, lo screen reader naviga tra gli elementi di una pagina web. Permette quindi proprio di poter scegliere su quale elemento spostare il focus e come interagire con esso.
Vuoi entrare più nel tecnico? Ecco come spostarsi tra gli elementi di una pagina web utilizzando i comandi da tastiera specifici dello screen reader. Quindi, se non hai uno screen reader, questi comandi non faranno assolutamente nulla.
Elenco dei link
Se voglio un elenco di tutti i link presenti nella pagina web, premerò la combinazione di tasti Insert + F7. Apparirà un elenco di tutti i link sulla pagina e, scorrendo con le frecce verticali, è possibile scegliere il link desiderato, che aprirò premendo Invio.
Finestre simili a questa possono essere utilizzate anche per elencare intestazioni, pulsanti o campi dei form.
Esistono poi degli ulteriori comandi che rendono la navigazione ancora più rapida e fluida, utilizzando fisicamente la sola pressione di una singola lettera.
Vediamo alcuni esempi.
Spostarsi fra le intestazioni
La lettera H sta per Heading, che significa intestazione, titolo. Premendo la H, mi sposto tra tutte le intestazioni sequenzialmente indipendentemente dal loro livello, dalla prima intestazione all’ultima. L’aggiunta del tasto SHIFT permette la stessa navigazione a ritroso.
In una pagina web, infatti, ci sono (o meglio, dovrebbero esserci!) un’intestazione di livello 1, alcune intestazioni di livello 2, alcune di livello 3 ecc., in base a quanto in profondità si scenderà nella organizzazione dei contenuti. Questo articolo, ad esempio, ha un’intestazione di livello 1 che corrisponde al suo titolo, alcune intestazioni di livello 2 e alcune di livello 3.
A video, quella di livello 1 sarà più grande, poiché è la più importante, mentre i livelli successivi avranno una dimensione del carattere via via più piccola. Non è una regola “ufficiale”, posso comunque fare in modo di avere un’intestazione 6 enorme, ma non è sicuramente pratico per strutturare al meglio una pagina web. E poi non tocchiamo il tasto degli sviluppatori che utilizzano le intestazioni “a caso” solo perché vogliono scrivere un testo più grande. Le heading servono a suddividere la pagina in sezioni e sotto-sezioni, aiutano la comprensione della struttura del testo e servono per orientarsi fra gli argomenti trattati.
Navigando con la lettera H non decido a quale livello spostarmi, le leggo semplicemente tutte in ordine così come compaiono, dall’alto verso il basso.
Volendo accelerare la navigazione, per spostare il focus su una intestazione con un livello ben definito, mi basterà premere i numeri della tastiera estesa. La pressione del tasto 1 mi porterà il focus alla intestazione di livello 1, solitamente il titolo del sito, della pagina o dell’articolo. La pressione del tasto 2 mi permetterà di navigare tra le varie suddivisioni di una pagina web, solitamente identificate da una intestazione di livello 2.
Proseguendo con i numeri, sino al tasto 6 che corrisponde al massimo livello possibile, si può interagire con tutte le intestazioni e di qualsiasi livello.
Spostamento tra altri elementi della pagina web
Premendo la lettera B, come Button (pulsante), navigo sequenzialmente tra i vari pulsanti presenti nella pagina.
Premendo la lettera L, come List (elenco), navigo tra tutti gli elenchi esistenti.
Con la lettera I, come Item (elemento di un elenco), navigo tra tutti gli elementi presenti all’interno di un elenco.
Premendo la lettera E, come Edit (editazione, modifica), sposterò il focus al primo campo dove posso inserire del testo. Solitamente, il primo che compare in una pagina web è il campo di editazione Cerca, o altri campi tipo email e password per l’accesso ad aree riservate.
Attivare i campi di editazione
Nel caso dei campi di editazione, bisogna aggiungere una funzione dello screen reader, la “Modalità scrittura”, cioè la possibilità di decidere alternativamente quando utilizzare le lettere per navigare e quando utilizzarle per digitare del testo fisicamente all’interno di un campo.
Per attivare questa modalità, e quindi per inserire i caratteri, una volta che il focus è posizionato su un campo di editazione, sarà sufficiente premere la barra spaziatrice e iniziare a scrivere. La pressione del tasto Esc interrompe questa funzione.
Oltre a navigare per elementi, la pagina web può essere letta totalmente dall’inizio alla fine. Basta attivare il comando per la lettura continua, e la voce leggerà tutto il contenuto dalla posizione in cui ci troviamo fino alla fine. È anche possibile selezionare e copiare del testo, esattamente come in un editor di testo.
Conclusione
Come avrai ormai intuito, quando parliamo di navigazione e accessibilità web andiamo ben oltre il semplice utilizzo delle scorciatoie da tastiera specifiche del browser che stiamo utilizzando. L’accessibilità ci permette di leggere e interagire con qualsiasi contenuto o elemento di una pagina web.
Lo screen reader permette la consultazione totale di una pagina web da parte di un non vedente purché, come specificato sopra, tutti gli elementi vengano identificati correttamente da chi crea la pagina stessa.
Nei siti non accessibili, sono presenti a video pulsanti, campi di editazione, elenchi, eppure, premendo le combinazioni dello screen reader, il focus non si sposta o non vocalizza nulla.
In questi casi la navigazione da parte di un non vedente risulta impossibile, come se a una persona vedente venisse spento il monitor mentre naviga.
Se questo argomento ti ha incuriosito e vuoi saperne di più su come funziona uno screen reader, lascia un commento! Ti risponderò volentieri.