Studio di tecnologie e principi di design inclusivo per l'accessibilità nelle applicazioni web per utenti con disabilità visiva

“H”

stazioni della pagina. Dopo aver raggiunto l’intestazione appropriata,

individua la prima area di testo, il campo A. Alice preme il tasto

e passa da VC a FM. L’utilità per la lettura dello schermo

“Invio”

ora posiziona lo stato attivo all’interno dell’area di testo e notifica ad

Alice il cambiamento di modalità. Alice inizia quindi a digitare l’indi-

rizzo e-mail di Bob. Quindi premendo il tasto passa alla riga

“TAB”,

dell’oggetto e inserisce il contenuto, continuando in questo modo fino

a quando individua il pulsante Premendo l’e-mail

"Invia". “Invio”,

viene inviata e la pagina viene ricaricata per visualizzare il contenuto

dell’e-mail inviata. Alice torna quindi a VC e può rileggere la sua

e-mail o trovare il collegamento della posta in arrivo nella pagina e

continuare a scorrere la posta in arrivo.

Come si può osservare, l’interazione tradizionale con screen reader non uti-

lizza PCM. Nella figura 2.3 , è visibile la suddivisione delle interazioni

4

funzionali tra le modalità per l’utilizzo tradizionale delle pagine Web.

2.1.2 Interazione con contenuto web 2.0

Per illustrare meglio l’uso degli screen reader e le difficoltà inerenti alle

applicazioni Web 2.0, lo studio [24] mostra come l’utente di screen reader,

Alice, interagisca con un client di posta elettronica basato sul Web che

utilizza Ajax. In questo caso, l’interazione si divide in due parti:

4 Immagine presente nel documento [24] 33

Figura 2.3: Suddivisione delle funzionalità tra le modalità dello screen reader

con pagine Web tradizionali

1. Quando la pagina viene caricata,

Lettura del contenuto della pagina.

lo screen reader (in VC) inizia a leggere l’intero contenuto della pagi-

na. Anche in questo caso, Alice desidera scoprire quali nuove email ha

ricevuto. Per scorrere il contenuto della posta in arrivo, utilizza due

tasti di scelta rapida, e Alice passa in modalità PCM, per

“J” “K”.

poter interagire con questi tasti. Passando da un elemento all’altro,

non riceve alcun feedback audio. Quindi, deduce che questa interazio-

ne personalizzata non funziona e torna in VC. Poi cerca delle tabelle.

Tuttavia, la posta in arrivo non viene creata con un elemento table,

ma con lo stile CSS degli elementi div. Di conseguenza, il suo metodo

tradizionale di interazione non funziona. A questo punto, va alla ri-

cerca di link, facendoli apparire tramite una lista. Trova una serie di

link che sembrano seguire uno schema: nome, oggetto, data/ora. Ali-

ce ipotizza di poter passare attraverso questi link e ottenere l’accesso

al contenuto. Difatti, dopo aver navigato verso la serie di email, passa

in rassegna una serie di nomi, oggetto, data, finché non ne trova uno

di Eve. Premendo apre l’e-mail. Tuttavia, poiché il client di

"Invio", 34

posta ha aggiornato solo il DOM, la pagina non è stata ricaricata. Di

conseguenza, Alice attende la conferma del caricamento della pagina

invano. Questa situazione crea confusione e preme di nuovo il tasto

ricevendo un errore che la informa che non si trova su un

"Invio",

collegamento o su un elemento cliccabile. A questo punto, indica a

JAWS di rileggere l’intera pagina. Questo è il momento in cui Alice

nota che il contenuto della pagina è cambiato. Individuando il corpo

dell’e-mail, Alice legge il contenuto in VC e si rende conto che Eve

vorrebbe che Alice contattasse il loro direttore finanziario Bob e gli

chiedesse di inviare i rapporti finanziari dell’anno precedente.

2. Alice preme e visualizza un

Costruzione della mail. “Inserisci + F7”

elenco di tutti i collegamenti nella pagina. Usando i tasti “freccia”,

scorre l’elenco, ma non trova alcun collegamento chiamato "Compo-

Questo perché ciò che viene visualizzato non è un

ni nuova e-mail".

collegamento reale, ma uno “decorato”. Alice inizia a leggere l’intera

pagina fino a quando non individua il collegamento in questione, ma

anche se preme né la pagina cambia, né JAWS legge il testo

“Invio”

come collegamento. Pertanto, passa a PCM e preme il tasto Lo

“C”.

screen reader notifica che la pagina è stata caricata, ma poiché non è

in VC, non la legge automaticamente. Inoltre, la pagina utilizza Java-

Script per inserire automaticamente Alice in un campo di testo. Deve

quindi tornare a VC e poi ordinare la lettura del contenuto, scoprendo

di essere in Poiché questo l’ha spostata al di fuori

"Componi posta".

dell’area di testo, passa a FM. Successivamente torna con alle

“TAB”

aree di testo, compila la mail e la invia. La pagina viene ricaricata

per visualizzare una versione di testo statico dell’e-mail inviata e Alice

passa a VC per leggerne il contenuto. Rendendosi conto che la sua

e-mail è corretta, desidera tornare alla sua casella di posta per conti-

nuarne la fruizione. Tuttavia, il link della posta in arrivo è decorato

e, quindi, ricomincia un ciclo simile a quello descritto poc’anzi.

35

Figura 2.4: Suddivisione delle funzionalità tra le modalità dello screen reader

per l’utilizzo di Applicazioni Web 2.0

Tramite questo studio, notiamo le difficoltà che gli utenti con disabilità

visiva affrontano ogni giorno per navigare tramite siti web basati sul Web

2.0. In figura 2.4 , troviamo la suddivisione delle funzionalità tra le modalità

5

dello screen reader per l’utilizzo delle applicazioni Web 2.0, con l’interazione

tradizionale ombreggiata.

2.1.3 Interazione con i sistemi applicativi

Nel nostro studio, ci siamo focalizzati maggiormente sull’accessibilità

nei siti web. Per questo motivo, abbiamo deciso di prendere in esame anche

i sistemi applicativi. Pertanto, in questo capitolo, focalizzeremo la nostra

attenzione su alcuni sistemi applicativi di uso quotidiano e analizzeremo

in quale misura prendono in considerazione l’accessibilità e, quindi, come

consentono il loro l’utilizzo agli utenti oggetti di questo studio. I sistemi

applicativi che verranno analizzati saranno principalmente applicazioni del

5 Immagine presente nel documento [24] 36

pacchetto Office16 ma anche Visual Studio Code. Come vedremo in se-

guito, l’utilizzo del pacchetto Office è possibile solo tramite l’uso di alcune

combinazioni di tasti tramite tastiera. Per tale motivo, ci focalizzeremo

maggiormente su Word, ovvero un’applicazione usata per la scrittura di do-

cumenti.

In Word, secondo la guida online messa a disposizione da Microsoft [67],

per chi fa uso di utilità per la lettura dello schermo, è possibile utilizzarlo

solo tramite l’uso di combinazioni di tasti di scelta rapida tramite tastiera.

In questa trattazione, ne citeremo alcuni, tra cui quelli di JAWS e NVDA.

Per usare le scelte rapide da tastiera per la lettura del testo, spostare lo

stato attivo sull’area del corpo del documento.

• Per iniziare la lettura dalla posizione in cui si trova il cursore con

l’Assistente vocale, premi il tasto SR+CTRL+R o il tasto SR+freccia

GIÙ. Con JAWS premere il tasto SR+PGSU. Con NVDA premere il

tasto SR+freccia GIÙ.

• Per leggere la pagina corrente con l’Assistente vocale, premere il tasto

SR+CTRL+I.

• Per leggere il paragrafo corrente con l’Assistente vocale, premere il

tasto SR+CTRL+K. Con JAWS premere CTRL+5 sul tastierino nu-

merico.

• Per leggere la riga successiva con l’Assistente vocale, premere il tasto

SR+O. Con JAWS e NVDA premere la freccia GIÙ.

• Per leggere la riga precedente con l’Assistente vocale, premere il tasto

SR+U. Con JAWS e NVDA premere la freccia SU.

• Per leggere la parola successiva con l’Assistente vocale, premere il ta-

sto SR+L o SR+CTRL+freccia DESTRA. Con JAWS premere iltasto

SR+freccia DESTRA. Con NVDA premere CTRL+freccia DESTRA.

37

Figura 2.5: Immagine della rilevazione dello screen reader e visualizzazione

della dicitura “Screen reader optimized”

• Per leggere la parola precedente con l’Assistente vocale, premere il

tasto SR+J o SR+CTRL+freccia SINISTRA. Con JAWS premere

il tasto SR+freccia SINISTRA. Con NVDA premere CTRL+freccia

SINISTRA.

Per interrompere la lettura è necessario premere CTRL. Le combinazioni,

però, sono molteplici, ma fortunatamente nella guida online è possibile con-

sultare delle liste di comandi per JAWS e NVDA .

6 7

Visual Studio Code, secondo la guida online [41], è in grado di individuare

l’uso di screen reader. Quando questo avviene, attiva la modalità di ot-

timizzazione screen reader per l’interfaccia utente. Una volta attivata, è

possibile osservare in basso a destra della barra di stato la dicitura “Screen

Reader Optimized”. Per poter disattivare questa modalità, è necessario fare

clic sul testo visualizzato o utilizzare il comando “Attiva/disattiva modalità

di accessibilità dell’utilità per la lettura dello schermo”, vedi figura 2.5

8

Per poter controllare se questa modalità è attiva, è possibile usare l’impo-

stazione e controllare il valore. Tale

“Editor: Supporto per l’accessibilità”

impostazione può assumere tre possibili valori: on, off e auto, ovvero l’impo-

stazione che rileva automaticamente la presenza di uno screen reader tramite

6 Lista comandi JAWS:

https://www.freedomscientific.com/SurfsUp/Reading_Commands.html

7 Lista comandi NVDA:

https://www.nvaccess.org/files/nvda/documentation/userGuide.html

8 Immagine presente in:

https://code.visualstudio.com/docs/editor/accessibility#_screen-reader-mode

38

Figura 2.6: Esempio di applicazione del comando "Esegui comando recente"

l’esecuzione di una query sulla piattaforma. All’attivazione della modali-

tà screen reader, alcune funzionalità, come la piegatura e la minimappa

(panoramica del codice), vengono disabilitate. Per visualizzare la guida al-

l’accessibilità del terminale, è possibile usare la combinazione da tastiera

ALT+F1. Essa contiene suggerimenti utili per l’utilizzo di screen reader,

come ad esempio, l’utilizzo di Alt+F2 per accedere al buffer nel termina-

le. Questa funzione permette di accedere automaticamente alla modalità di

navigazione tramite screen reader, per poter visualizzare l’intero buffer del

terminale in una modalità più accessibile agli utenti. Invece, tramite l&rsq