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

Politecnico di Bari

Dipartimento di Ingegneria Elettrica e dell’Informazione

Corso di Laurea in Ingegneria Informatica e dell’Automazione

Tesi di Laurea in Ingegneria del Software

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

Relatore: Prof.ssa Marina Mongiello

Laureando: Luca Crispino

Anno Accademico 2023 – 2024

Liberatoria alla consultazione della tesi di laurea

Liberatoria alla consultazione della tesi di laurea di cui all’art.4 del Regolamento di Ateneo per la consultazione delle tesi di Laurea (D.R. n. 479 del 14/11/2016).

Il sottoscritto Crispino Luca, matricola 585329. Corso di Laurea in Ingegneria Informatica, autore della presente tesi di Laurea dal titolo: “Studio di Tecnologie e Principi di Design Inclusivo per l’accessibilità nelle Applicazioni Web per Utenti con Disabilità Visiva”, autorizza la consultazione della presente tesi, fatto divieto a chiunque di riprodurre in tutto o in parte quanto in essa contenuto.

Abstract

L’accessibilità web rappresenta un pilastro fondamentale per garantire l’equità e l’inclusione nel mondo digitale. Questa tesi si concentra sull’importanza dell’accessibilità web per le persone non vedenti, esplorando le sfide specifiche che questi utenti incontrano nell’accedere ai contenuti online, nonché le tecnologie assistive utilizzate per navigare su Internet. Attraverso un’analisi dettagliata delle leggi, normative e linee guida internazionali, come le Web Content Accessibility Guidelines (WCAG), la ricerca offre una panoramica chiara del quadro normativo che regolamenta l’accessibilità web. Inoltre, questo elaborato approfondisce i principi di progettazione e design accessibile, fornendo esempi concreti di siti web esemplari in termini di accessibilità per non vedenti, nonché come l’intelligenza artificiale opera in questo campo. L’obiettivo principale di questo lavoro è quello di fornire una comprensione approfondita dell’accessibilità web per non vedenti, in tutti i suoi aspetti, in modo tale da migliorare l’esperienza digitale per tutti gli utenti, indipendentemente dalle loro capacità fisiche o sensoriali. Le conclusioni tracciano un bilancio delle principali scoperte, limitazioni e implicazioni pratiche, proponendo spunti per future ricerche e sviluppi nel campo dell’accessibilità web.

Parole chiave: Web Accessibility, Blind, W3C, WCAG, Webpage, Web Content Accessibility Guidelines.

Bari, 20/10/2024

Firma

Indice

Elenco delle figure i

Elenco delle tabelle iii

Introduzione 1

1 L’accessibilità web 3

1.1 Concetti di base sull’accessibilità web . . . . . . . . . . . . . 4

1.1.1 Le tecnologie assistive . . . . . . . . . . . . . . . . . 4

1.1.2 Studi e soluzioni . . . . . . . . . . . . . . . . . . . . 5

1.1.3 Accessibilità vs usabilità . . . . . . . . . . . . . . . . 7

1.2 Importanza dell’accessibilità nella progettazione dei siti web 8

1.3 Organizzazione e sviluppo di siti web accessibili . . . . . . . 9

1.3.1 Gli attori dell’accessibilità web . . . . . . . . . . . . 9

1.3.2 Come si arriva a un sito web accessibile? . . . . . . . 11

1.4 Leggi e normative dell’accessibilità web . . . . . . . . . . . . 14

1.4.1 Leggi nazionali sull’accessibilità web . . . . . . . . . 15

1.4.2 Convenzioni internazionali e direttive . . . . . . . . . 18

1.5 Struttura dell’analisi dei risultati . . . . . . . . . . . . . . . 21

2 Tecnologie assistive per la navigazione web 22

2.1 Screen reader . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2.1.1 Interazione con contenuto web tradizionale . . . . . . 31

2.1.2 Interazione con contenuto web 2.0 . . . . . . . . . . 33

2.1.3 Interazione con i sistemi applicativi . . . . . . . . . . 36

2.2 Software di sintesi vocale . . . . . . . . . . . . . . . . . . . . 40

2.3 Dispositivi braille . . . . . . . . . . . . . . . . . . . . . . . . 42

2.4 Altri strumenti e tecnologie assistive . . . . . . . . . . . . . 44

3 Principi di progettazione e design accessibile 47

3.1 Principi di design inclusivo per siti web accessibili . . . . . . 47

3.1.1 Linee guida WCAG . . . . . . . . . . . . . . . . . . 48

3.1.2 Tecniche di ottimizzazione dei siti Web . . . . . . . . 50

3.2 Strumenti e tecniche per valutare e migliorare l’accessibilità 52

3.3 Descrizione di alcuni siti web esemplari in termini di accessibilità per non vedenti . . . . . . . . . . . . . . . . . . . . . . 54

4 L’intelligenza artificiale nell’accessibilità web 60

4.1 L’intelligenza artificiale a supporto degli utenti . . . . . . . 61

4.1.1 L’intelligenza artificiale nella generazione di testo alternativo . . . . . . . . . . . . . . . . . . . . . . . . 61

4.1.2 Intelligenza artificiale generativa . . . . . . . . . . . 63

4.1.3 L’intelligenza artificiale per la generazione di descrizioni 66

4.1.4 L’intelligenza artificiale nella lettura dello schermo . 67

4.2 Valutazione di intelligenze artificiali a supporto dei team di sviluppo dei siti web . . . . . . . . . . . . . . . . . . . . . . 68

5 Conclusioni 70

5.1 Considerazioni finali . . . . . . . . . . . . . . . . . . . . . . 70

5.2 Implicazioni pratiche e future ricerche . . . . . . . . . . . . 71

Appendice 73

Bibliografia 76

Elenco delle figure

1.1 WAIM proposto da Lazar et al. . . . . . . . . . . . . . . . . 13

1.2 WAIM proposto da Baguna . . . . . . . . . . . . . . . . . . 14

2.1 Tipico flusso di lavoro per l’uso non visivo dei sistemi computazionali . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2.2 Funzionamento dello screen reader . . . . . . . . . . . . . . 24

2.3 Suddivisione delle funzionalità tra le modalità dello screen reader con pagine Web tradizionali . . . . . . . . . . . . . . 34

2.4 Suddivisione delle funzionalità tra le modalità dello screen reader per l’utilizzo di Applicazioni Web 2.0 . . . . . . . . 36

2.5 Immagine della rilevazione dello screen reader e visualizzazione della dicitura “Screen reader optimized” . . . . . . . . 38

2.6 Esempio di applicazione del comando "Esegui comando recente" 39

2.7 Tastiere Braille . . . . . . . . . . . . . . . . . . . . . . . . . 42

2.8 Display elettronico Braille per la lettura del testo in uscita . 43

2.9 Istantanea di Braille Touch . . . . . . . . . . . . . . . . . . 44

2.10 Istantanea di POET Compact . . . . . . . . . . . . . . . . . 46

2.11 Istantanea di PRONTO . . . . . . . . . . . . . . . . . . . . 46

2.12 Immagine di "Tangible Desktop" . . . . . . . . . . . . . . . 46

3.1 (a sinistra) Immagine della pagina web Stradivarius con pulsante accessibilità contrassegnato in rosso. (a destra) Immagine del sito di Stradivarius con box contenente i “Profili di accessibilità” . . . . . . . . . . . . . . . . . . . . . . . . 58 i

3.2 Regolazioni sul sito in base alle tecnologie assistive . . . . . 58

3.3 (sopra) Immagine che mostra i menù dell’accessibilità e della struttura della pagina. (sotto) Immagine che mostra il box, evidenziato in rosso, che permette di spostarsi attraverso le sezioni del sito . . . . . . . . . . . . . . . . . . . . . . . . 59

4.1 Frammento di codice sorgente di una pagina web con testo alternativo mancante . . . . . . . . . . . . . . . . . . . . . 62

4.2 Diagramma di flusso del generatore di testo alternativo . . . 63

4.3 Messaggio di Copilot in cui chiede di descrivere il contenuto del documento Word che si vuole realizzare . . . . . . . . . 64

4.4 Diagramma delle comunicazioni tra le componenti . . . . . . 65

4.5 Modulo di riconoscimento vocale usato da Weeratunga e colleghi 66

4.6 Immagini con descrizione generata da IA . . . . . . . . . . . 67

5.1 Prisma flow chart . . . . . . . . . . . . . . . . . . . . . . . 74 ii

Elenco delle tabelle

1.1 Riassunto dei ruoli di ogni componente di un team . . . . . 11

2.1 Analisi degli screen readers presenti sul mercato . . . . . . . 28

3.1 Risultati ottenuti dalla valutazione con strumenti automatizzati 55

iii

Introduzione

L’accessibilità dei siti web è un argomento sempre più attuale nell’era digitale. La scelta di questo argomento è nata dalla necessità di fornire un accesso equo e completo ai contenuti online per tutte le persone, indipendentemente dalle capacità fisiche o cognitive. Questa necessità richiede particolare attenzione e intervento da parte di progettisti, sviluppatori e legislatori. In questo elaborato, ci concentreremo maggiormente sulle persone con disabilità visiva, andando ad analizzare i concetti fondamentali, le tecnologie assistive messe a loro disposizione, ma anche le normative e i principi di progettazione utili a garantire l’accessibilità dei siti web. Questo elaborato è frutto di un lavoro di ricerca e filtraggio, la cui descrizione è stata lasciata nel capitolo in appendice.

Abbiamo deciso di strutturare il nostro lavoro in quattro capitoli, ognuno dei quali tratta uno degli aspetti nominati in precedenza. La nostra ricerca partirà dal capitolo 1, intitolato "L’accessibilità Web", in cui esamineremo i concetti fondamentali, l’importanza dell’accessibilità e l’organizzazione dei team di sviluppo. Questo ci permetterà di comprendere meglio i risultati discussi nei successivi capitoli. La struttura, che sarà esposta dettagliatamente nel paragrafo "Struttura dell’analisi dei risultati", è così organizzata:

• Nel capitolo 2 vengono descritti le tecnologie assistive per la navigazione del web.
• Nel capitolo 3 analizziamo i principi di progettazione inclusiva e le linee guida WCAG.
• Nel capitolo 4, infine, si descriveranno gli approcci per l’uso dell’intelligenza artificiale nell’accessibilità web.

Lo scopo di questo documento è duplice: da un lato, vogliamo avvicinare il pubblico e gli esperti del settore al mondo dell’accessibilità, andando a descrivere le tecnologie usate oggigiorno nella navigazione web; dall’altro, vogliamo descrivere gli strumenti e i principi utili per progettare e sviluppare applicazioni web sempre più accessibili. In sostanza, si vuole promuovere un ambiente digitale sempre più equo e accessibile a prescindere dalle proprie condizioni fisiche. 2

Capitolo 1

L’accessibilità web

In questo periodo storico, Internet e il World Wide Web vengono considerati come i principali mezzi di comunicazione a distanza [8]. Inoltre, la capacità di saper utilizzare i computer e il Web è sempre più richiesta per l’istruzione, l’occupazione, le interazioni sociali e altre attività della vita quotidiana [10]. Tra tutti i documenti digitali pubblicati quotidianamente, solo una parte di essi è accessibile alle persone con disabilità. Ciò contravviene al crescente interesse e alla pressione legale per la produzione di contenuti accessibili [47]. Al giorno d’oggi, si stima che circa il 15% della popolazione mondiale abbia una forma di disabilità [64]. Di questi, circa 36 milioni di persone sono affette da cecità [15]. L’accesso al Web, però, è particolarmente difficile per questa categoria di utenti, proprio a causa dell’assenza della percezione visiva [25]. Questa non è l’unica difficoltà. Nonostante abbiano a disposizione alcune tecnologie avanzate, tra cui screen readers, braille displays e browser web speciali, questi risultano avere effetti limitati proprio a causa della mancanza di un design web accessibile [8]. Sebbene l’accessibilità sia un prerequisito legale nella maggior parte dei paesi, attualmente un gran numero di siti web presenta delle barriere, che spesso rendono difficile o addirittura impossibile l’utilizzo da parte delle persone con disabilità [43]. In particolare, alcuni studi mostrano come il 99% dei siti web presentano una struttura che ne limita l’accesso alle informazioni. Inoltre, nonostante la presenza massiccia di linee guida sulla creazione di pagine web accessibili, molti web designer non le prendono neanche in considerazione. L’esistenza di queste barriere compromette l’indipendenza e l’autonomia degli utenti non vedenti nella navigazione e nell’interazione con i siti web.

Questo capitolo si propone di fornire una panoramica dettagliata sui fondamenti dell’accessibilità web, esplorandone i principi chiave, i concetti di base e l’importanza di integrarla nella progettazione e nello sviluppo dei siti web.

1.1 Concetti di base sull’accessibilità web

Prima di affrontare il tema dell’accessibilità web, definiamone il concetto sia da un punto di vista generico che dal punto di vista informatico. Secondo la Treccani, per accessibilità si intende: "Possibilità di facile accesso" [60], una definizione che racchiude appieno una delle caratteristiche principali che tutti i siti web dovrebbero avere. Entrando più nel dettaglio e analizzando il termine dal punto di vista informatico, l’AGID afferma che: "Per accessibilità si intende la capacità dei sistemi informatici di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari" [7]. Quindi, attraverso queste due definizioni, possiamo affermare che l’accessibilità dei siti web mira a consentire a tutte le persone di usufruire in egual misura dei contenuti presenti in rete, senza esclusioni [29].

1.1.1 Le tecnologie assistive

Al giorno d’oggi, esistono alcuni mezzi che facilitano in parte l’erogazione dei servizi web. Essi sono noti come “tecnologie assistive”, cioè dispositivi o sistemi che permettono a un individuo di eseguire un compito che altrimenti non sarebbe in grado di svolgere, o semplicemente aumentarne la facilità e la sicurezza [57]. In altre parole, forniscono quei meccanismi di sostituzione sensoriale, fisica o cognitiva a persone con disabilità. Ad esempio, i non vedenti richiedono alternative non visive per compiti tradizionalmente visivi. Queste tecnologie possono essere applicate su vari livelli, vale a dire browser, lettori multimediali o plug-in sotto forma di strumenti software aggiuntivi come lettori di schermo e ingranditori di schermo, nonché a livello di sistema operativo con funzionalità di adattamento integrate, come la possibilità di modificare i caratteri e i colori del sistema. [10]

Gli utenti Web con disabilità possono utilizzare un sistema basato sul Web solo se è progettato per essere compatibile con le tecnologie assistive progettati per le loro disabilità [10]. Nel 2007 il padre del Web, Tim BernersLee, disse: “La forza del Web sta nella sua universalità. L’accesso di tutti indipendentemente dalla disabilità è un aspetto essenziale” [27]. Questa celebre frase, purtroppo, non è stata ancora del tutto presa in considerazione in quanto, da una parte, il design dei siti web ha gradualmente migliorato la comprensione dei contenuti per gli utenti vedenti, ma dall’altra parte, ha creato più ostacoli per gli utenti con disabilità visiva [57]. Difatti, queste tecnologie hanno effetti limitati proprio a causa della mancanza di un design web accessibile [8].

1.1.2 Studi e soluzioni

Nel corso degli anni, sono stati condotti numerosi studi che hanno permesso di individuare le problematiche alla base dell’accessibilità Web. A partire da questi, sono state create delle linee guida per facilitare il lavoro ai web designer; nonché criteri o strumenti da impiegare per poter valutare e/o quantificare il livello di accessibilità all’interno della pagina [10].

Tra i diversi studi effettuati, un ruolo rilevante lo ha avuto quello effettuato da Leporini e Paterno [36, 35]. All’interno del loro articolo, gli autori hanno evidenziato come la mancanza di accessibilità nelle pagine Web per le persone non vedenti solitamente si associa alla presenza di tre problemi:

• Gli utenti tendono a perdere il Mancanza di contesto nella pagina. contesto di navigazione quando visitano e leggono porzioni minori di testo [36]. Superare questo ostacolo è possibile attraverso l’uso del web semantico e delle annotazioni semantiche del contesto degli elementi della pagina [66]. Per web semantico si intende l’insieme di tutti i servizi che consentono di interpretare e rendere interrogabili, mediante l’utilizzo di motori di ricerca e di sistemi di elaborazione automatica, i contenuti presenti nel web. In questo modo, i contenuti risultano collegati da una serie di parole chiave che ne permettono una maggiore facilità di reperimento. [14]
• Le porzioni statiche della pagina (link, frame con banner, ecc.) possono sovraccaricare il processo di lettura attraverso uno screen reader. Overload di informazioni. Questo avviene poiché l’utente deve rileggere tutto quasi ogni volta, con un aumento del tempo di navigazione [35].
• Il comando per la navigazione e la Eccesso di lettura sequenziale. lettura può obbligare l’utente a seguire il