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 LAU-

REA 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 Inge-

gneria Informatica, autore della presente tesi di Laurea dal titolo: “Studio

Di Tecnologie e Principi Di Design Inclusivo per L’accessibilità nelle Ap-

autorizza la consultazione

plicazioni Web per Utenti con Disabilità Visiva”,

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’e-

quità e l’inclusione nel mondo digitale. Questa tesi si concentra sull’impor-

tanza dell’accessibilità web per le persone non vedenti, esplorando le sfi-

de specifiche che questi utenti incontrano nell’accedere ai contenuti online,

nonché le tecnologie assistive utilizzate per navigare su Internet. Attraver-

so 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’accessibili-

tà 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 for-

nire 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.

Web Accessibility, Blind, W3C, WCAG, Webpage, Web

Parole chiave:

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 accessi-

bilità 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 al-

ternativo . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . 13

WAIM proposto da Lazar et al.

1.2 . . . . . . . . . . . . . . . . . . 14

WAIM proposto da Baguna

2.1 Tipico flusso di lavoro per l’uso non visivo dei sistemi com-

. . . . . . . . . . . . . . . . . . . . . . . . . . . 23

putazionali

2.2 . . . . . . . . . . . . . . 24

Funzionamento dello screen reader

2.3 Suddivisione delle funzionalità tra le modalità dello screen

. . . . . . . . . . . . . . 34

reader con pagine Web tradizionali

2.4 Suddivisione delle funzionalità tra le modalità dello screen

. . . . . . . . . 36

reader per l’utilizzo di Applicazioni Web 2.0

2.5 Immagine della rilevazione dello screen reader e visualizza-

. . . . . . . . 38

zione della dicitura “Screen reader optimized”

2.6 39

Esempio di applicazione del comando "Esegui comando recente"

2.7 . . . . . . . . . . . . . . . . . . . . . . . . . 42

Tastiere Braille

2.8 . 43

Display elettronico Braille per la lettura del testo in uscita

2.9 . . . . . . . . . . . . . . . . . . 44

Istantanea di Braille Touch

2.10 . . . . . . . . . . . . . . . . . 46

Istantanea di POET Compact

2.11 . . . . . . . . . . . . . . . . . . . . 46

Istantanea di PRONTO

2.12 . . . . . . . . . . . . . . . 46

Immagine di "Tangible Desktop"

3.1 (a sinistra) Immagine della pagina web Stradivarius con pul-

sante accessibilità contrassegnato in rosso. (a destra) Imma-

gine del sito di Stradivarius con box contenente i “Profili di

. . . . . . . . . . . . . . . . . . . . . . . . . . . 58

accessibilità” i

3.2 . . . . . 58

Regolazioni sul sito in base alle tecnologie assistive

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

. . . . . . . . . . . . . . . . . . . . . . . . . 59

sezioni del sito

4.1 Frammento di codice sorgente di una pagina web con testo

. . . . . . . . . . . . . . . . . . . . . . 62

alternativo mancante

4.2 . . . 63

Diagramma di flusso del generatore di testo alternativo

4.3 Messaggio di Copilot in cui chiede di descrivere il contenuto

. . . . . . . . . . 64

del documento Word che si vuole realizzare

4.4 . . . . . . 65

Diagramma delle comunicazioni tra le componenti

4.5 66

Modulo di riconoscimento vocale usato da Weeratunga e colleghi

4.6 . . . . . . . . . . . 67

Immagini con descrizione generata da IA

5.1 . . . . . . . . . . . . . . . . . . . . . . . 74

Prisma flow chart ii

Elenco delle tabelle

1.1 . . . . . 11

Riassunto dei ruoli di ogni componente di un team

2.1 . . . . . . . 28

Analisi degli screen readers presenti sul mercato

3.1 55

Risultati ottenuti dalla valutazione con strumenti automatizzati

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, indi-

pendentemente 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 per-

sone 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, ognu-

no dei quali tratta uno degli aspetti nominati in precedenza. La nostra

ricerca partirà dal capitolo 1, intitolato "L’accessibilità Web", in cui esami-

neremo i concetti fondamentali, l’importanza dell’accessibilità e l’organiz-

zazione 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 naviga-

zione del web.

• Nel capitolo 3 analizziamo i principi di progettazione inclusiva e le

1

linee guida WCAG.

• Nel capitolo 4, infine, si descriveranno gli approcci per l’uso dell’in-

telligenza 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 con-

siderati 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ò con-

travviene 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à. No-

nostante abbiano a disposizione alcune tecnologie avanzate, tra cui screen

readers, braille displays e browser web speciali, questi risultano avere ef-

fetti 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 per-

sone con disabilità [43]. In particolare, alcuni studi mostrano come il 99%

dei siti web presentano una struttura che ne limita l’accesso alle informazio-

3

ni. 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 fon-

damenti 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 con-

cetto sia da un punto di vista generico che dal punto di vista informatico.

Secondo la Treccani, per accessibilità si intende: "Possibilità di facile ac-

cesso" [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

1

che: "Per accessibilità si intende la capacità dei sistemi informatici di ero-

gare 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

1 Agenzia per l’Italia digitale: https://www.agid.gov.it/

4

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 vi-

sivi. 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 li-

vello 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 proget-

tati per le loro disabilità [10]. Nel 2007 il padre del Web, Tim BernersLee,

2

disse: “La forza del Web sta nella sua universalità. L’accesso di tutti indi-

pendentemente 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 per-

messo 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 effettua-

to da Leporini e Paterno [36, 35]. All’interno del loro articolo, gli autori

2 Frase citata durante il 3GSM World Congress tenutosi a Barcellona. Consultabile

attraverso questo link: https://www.w3.org/2007/Talks/0222-3gsm-tbl/text

5

hanno evidenziato come la mancanza di accessibilità nelle pagine Web per

le persone non vedenti solitamente si associa alla presenza di tre problemi:

1. 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]

2. Le porzioni statiche della pagina (link, fra-

Overload di informazioni.

me con banner, ecc.) possono sovraccaricare il processo di lettura at-

traverso uno screen reader. Questo avviene poiché l’utente deve rileg-

gere tutto quasi ogni volta, con un aumento del tempo di navigazione

[35].

3. Il comando per la navigazione e la

Eccesso di lettura sequenziale.

lettura può obbligare l’utente a seguire il