Scrivere per il web con l’accessibilità in mente

Marco Bertoni

www.semplicemente.org

Il seminario

• Argomenti:
  • Pensare i contenuti.
  • Scrivere i contenuti.
  • Pubblicare i contenuti.
• Strumenti:
  • Prospettiva multidisciplinare.
  • Buon senso?

Pensare i contenuti

Pensare i contenuti?

Le pagine web del Comune di [...] sono state realizzate secondo le specifiche che definiscono l'HyperText Markup Language (HTML), versione 4.01, il linguaggio per la pubblicazione su Web e CSS2, le specifiche relative ai fogli di stile: due tecnologie indispensabili per la separazione dei contenuti dalla struttura del documento.

Pensare i contenuti

La struttura

Pensare i contenuti: la struttura 1

• La struttura di un documento è il modo in cui è organizzato il contenuto.
• Il contenuto di un libro, per esempio, è organizzato in titoli, sottotitoli paragrafi ecc. utilizzando convenzioni tipografiche per rappresentarli.
• Il contenuto di una pagina web può essere strutturato in modo analogo grazie ai linguaggi di marcatura.

Pensare i contenuti: la struttura 2

• Ogni marcatore assegna una funzione al contenuto che delimita e ne definisce di conseguenza le relazioni con le restanti informazioni.
• HTML si è evoluto nel tempo alla ricerca di una sempre maggiore separazione della struttura dallo stile di presentazione.

Pensare i contenuti

La presentazione

Pensare i contenuti: la presentazione 1

• La presentazione è il modo in cui il contenuto strutturato è reso fruibile agli utenti.
• E' l’insieme delle regole che indicano:
  • le modalità tipografiche;
  • la disposizione dei contenuti;
  • i colori da utilizzare;
  • ecc.

Pensare i contenuti: la presentazione 2

• Le regole variano in funzione della modalità di fruizione dei contenuti:
  • presentati su schermo;
  • stampati su carta;
  • letti da un sintetizzatore vocale;
  • fruiti con dispositivi tattili braille;
  • ecc.

Pensare i contenuti: la presentazione 3

• Le regole sono impostate utilizzando linguaggi come CSS (Cascading Style Sheets) o la famiglia XSL (eXtensible Stylesheet Language) per XML, e sono applicate da programmi (o dispositivi) in grado di interpretare un documento scritto in un dato linguaggio (per esempio un browser).

Pensare i contenuti: la presentazione 4

• A partire dal design tipografico di base, quindi, con questi linguaggi si possono realizzare complessi layout visivi, insieme a modalità di presentazione alternative, senza modificare la struttura del documento sorgente.

Pensare i contenuti

Quiz

Pensare i contenuti: frutta o metropoli? 1

Pensare i contenuti: frutta o metropoli? 2

• "Una mela appoggiata alla sommità di un grattacielo e sullo sfondo una città"
• "Panorama di New York"
• "La Grande Mela (The Big Apple)"
• "Una mela"
• " "

Pensare i contenuti

Comunicazione digitalizzata

Pensare i contenuti: CMC 1

• E' facile da modificare.
• E' facile da memorizzare.
• Si trasmette fedelmente (è meno sensibile ai disturbi).
• I canali si integrano facilmente (multimedialità).

Pensare i contenuti: CMC 2

• Alcuni esempi di CMC asincrona:
  • Siti Web (ipertesti e ipermedia), forum, blog, wiki.
  • Posta elettronica.
  • Newsletter, newsgroup.
  • Mailing list, Guestbook.
  • Ecc.

Pensare i contenuti: CMC 3

• Alcuni esempi di CMC sincrona:
  • IRC e Web Chat.
  • Instant messaging.
  • MUD (Multi User Dungeon) e MMORPG (Massive(ly) Multiplayer Online Role-Playing Game).
  • uCommunity (o Ubiquitous Community) come Second Life.
  • Ecc.

Pensare i contenuti: CMC 4

• Alcune peculiarità "negative" della CMC:
  • Sono assenti gli aspetti di metacomunicazione. Come devi "intendere" il contentuto?
  • Non c'è garanzia sull' identità dell'interlocutore. Puoi assumere un'identità fittizia Spoofing.
  • L' alternanza dei turni non può essere definita precisamente (CMC sincrona).

Pensare i contenuti: CMC 5

• Il principio di cooperazione è indebolito (non ci sono feedback diretti e l'elaborazione del messaggio non è immediata).
• Si diffondono atti comunicativi disfunzionali (discomunicazione):
  • Lurking
  • Flaming: aggressività.
  • Fisking: critica sarcastica punto per punto.
  • Ecc.

Pensare i contenuti: CMC 6

[...] nessun dispositivo tecnologico è di per sé neutro, ma la sua stessa esistenza modifica, spesso in modo sostanziale, il nostro rapporto con l'ambiente, con il lavoro, le nostre relazioni interpersonali e la nostra stessa auto-percezione [...]

Patrizia Violi, Conversazioni Telematiche, in Galatolo, Pallotti, La Conversazione, Cortina.

Pensare i contenuti

Accessibilità

Pensare i contenuti: accessibilità 1

Qualunque persona in qualunque momento della vita può avere una condizione di salute che in un ambiente sfavorevole diventa disabilità.

Matilde Leonardi - editor del progetto "ICF in Italia"

Pensare i contenuti: accessibilità 2

• Qualsiasi utente dovrebbe essere in grado di fruire dei contenuti e servizi offerti da un sito web. Ma utenti differenti hanno bisogni differenti.

Pensare i contenuti: accessibilità 3

• Una persona non vendente necessita di tecnologie assistive per navigare il web;
• chi ha disabilità motorie può trovare difficile, o impossibile, l’utilizzo di sistemi di puntamento standard come un mouse;
• ognuno di noi nell’arco della vita può sperimentare una disabilità temporanea (come per esempio un braccio rotto)...

Pensare i contenuti: accessibilità 4

• I differenti livelli di abilità delle persone diventano vere e proprie barriere. Come fare?
• Esistono alcune linee guida per l’accessibilità (WCAG) che un web designer può seguire durante lo sviluppo di un sito.
  • Lo scopo di queste tecniche è quello di rendere le informazioni e i servizi disponibili a chiunque senza discriminazioni. Questo è il significato della parola accessibilità del Web.

Pensare i contenuti: accessibilità 5

• Un esempio: il testo alternativo (attributo HTML ALT)
  • Il testo alternativo fornisce allo screen reader una rappresentazione del contenuto informativo di un oggetto non di testo, quando è rilevante per la comprensione dei contenuti.
  • L’attributo ALT è obbligatorio per i marcatori IMG e AREA mentre è opzionale per gli elementi INPUT e APPLET.

Pensare i contenuti: accessibilità 6

• Tutti i marcatori per le immagini in tutto il sito, senza distinzione, devono contenere l’attributo ALT.
• Se le immagini sono decorative deve essere inserito nullo: alt="".
• Se l’immagine è rilevante per la comprensione del testo, deve essere equivalente al contenuto informativo veicolato dall’oggetto al quale si applica.

Pensare i contenuti: accessibilità 7

• Quando utilizzi immagini che contengono testo, il testo alternativo deve corrispondere al testo presente nell’immagine.
• Non ha senso modificare, nel testo alternativo, il contenuto testuale di un oggetto grafico. Se lo ritieni necessario per la chiarezza dell’informazione, allora forse hai sbagliato qualcosa.

Pensare i contenuti: accessibilità 8

Pensare i contenuti: accessibilità 9

• Al non vedente devi veicolare la stessa informazione che riceve il vedente.
• Questo atteggiamento nei confronti del disabile spesso è un retaggio culturale. Un po’ come chi parla a un volume più alto, e scandendo le parole, di fronte a un non vedente...

Pensare i contenuti: accessibilità 10

• Il contenuto in eccesso è inutile rumore per il non vedente.
• Una persona disabile non ha necessariamente bisogno di un trattamento speciale.

Pensare i contenuti: accessibilità 11

• Un altro esempio: perché le intestazioni HTML (H1, H2, H3 ecc.) sono fondamentali per l'accessibilità di un documento?

Pensare i contenuti: accessibilità 12

Pensare i contenuti: accessibilità 13

Pensare i contenuti: accessibilità 14

• Lo screen reader consente di:
  • muoversi attraverso gli elementi della pagina: parole, righe, paragrafi ecc.
  • Può leggere solo gli elementi di intestazione (H1, H2, H3 ecc.);
  • saltare da una tabella all’altra;
  • saltare da un modulo all’altro;
  • leggere le liste HTML (OL, UL) indicando il livello di annidamento.
  • Ecc.

Pensare i contenuti: accessibilità 15

• Queste funzionalità sono compromesse se:
  • il testo non è marcato correttamente;
  • se mancano le intestazioni o sono strutturate in modo scorretto;
  • se sono assenti le etichette per i controlli dei moduli;
  • se le tabelle non hanno gli attributi corretti ecc.

Pensare i contenuti

Quiz

Pensare i contenuti: dov'è l'errore? 1

Pensare i contenuti: dov'è l'errore? 2

Pensare i contenuti: dov'è l'errore? 3

Pensare i contenuti

Usabilità

Pensare i contenuti: usabilità 1

L'usabilità è un attributo qualitativo che riguarda quanto qualcosa è facile da usare. Più specificamente, si riferisce a quanto velocemente le persone imparano a usarlo, a quanto sono efficienti nel farlo, a quanto l'oggetto è degno di essere ricordato, a quanti errori provoca e a quanto piace usarlo agli utenti. Se gli utenti non possono o non vogliono usare una caratteristica, questa potrebbe anche non esistere.

Nielsen, Loranger, Prioritizing Web Usability, New Riders.

Pensare i contenuti: usabilità 2

• Alcuni problemi di usabilità del Web secondo Nielsen:
  • Il colore del link non cambia quando è visitato.
  • Il pulsante "Indietro" del browser è disabilitato.
  • Si aprono nuove finestre del browser.
  • Si aprono finestre pop-up.

Pensare i contenuti: usabilità 3

• Alcuni problemi di usabilità del Web secondo Nielsen:
  • Ci sono elementi di design che sembrano pubblicità.
  • Sono violate le convenzioni di design.
  • I contenuti sono nebulosi e vi sono annunci "vuoti".
  • Il contenuto è troppo denso e non "scansionabile".

Pensare i contenuti: usabilità 4

• Un esempio: le modalità di lettura sul web:
  • Colpo d’occhio: l’informazione visiva di una pagina nel suo insieme dà la percezione dei contenuti e della presenza o meno di particolari argomenti.
  • Scansione del testo: le persone raramente leggono le pagine web parola per parola; piuttosto scansionano la pagina, selezionando singole parole e frasi (Jacob Nielsen).

Pensare i contenuti: usabilità 5

• Suggerimenti per facilitare il colpo d’occhio:
  • Organizza le pagine in zone caratteristiche per tipo di informazione.
  • Inserisci i contenuti più importanti, e quelli più recenti, prima possibile nella struttura del documento.
  • Struttura l’informazione con intestazioni ordinate gerarchicamente dal generale al particolare.
  • Utilizza con parsimonia gli elementi grafici: possono creare rumore visivo.

Pensare i contenuti: usabilità 6

• Suggerimenti per facilitare il colpo d’occhio:
  • Inserisci sempre nella stessa posizione blocchi funzionali comuni a tutte le pagine.
  • Fai in modo che l’informazione visiva sia chiara e coerente in tutto il sito. Per esempio:
    • Gli stessi simboli grafici devono avere lo stesso significato.
    • La rappresentazione tipografica di elementi strutturali deve essere sempre la stessa.

Pensare i contenuti: usabilità 7

• Suggerimenti per facilitare la scansione del testo:
  • Utilizza le intestazioni come fossero microcontenuti.
  • Suddividi il testo in paragrafi.
  • Separa tipograficamente un paragrafo dall’altro.
  • Riduci il numero di parole di un paragrafo, rispetto al numero di parole che avresti utilizzato su carta.

Pensare i contenuti: usabilità 8

• Suggerimenti per facilitare la scansione del testo:
  • Visualizza in modo tipograficamente diverso dalle altre le parole significative in un paragrafo.
  • La caratterizzazione tipografica del testo deve essere diversa da quella utilizzata per rappresentare altri elementi strutturali come intestazioni e link.

Pensare i contenuti: usabilità 9

• Suggerimenti per facilitare la scansione del testo:
  • Utilizza le liste (UL) per raggruppare logicamente gli elementi informazionali, e utilizza le liste numerate (OL) quando la successione è importante.
  • Aumenta la leggibilità "fisica" del testo, dimensionando adeguatamente interlinea e caratteri.

Pensare i contenuti: usabilità 10

• I principi sono sacri ma la realtà è spietata:
  • Quando si scrive per il web, ridurre la lunghezza del testo è di certo una buona idea. Purtroppo non è sempre possibile farlo. C’è chi è costretto a pubblicare testi prodotti dal malefico Ufficio X, e non può tagliare nulla, altrimenti si offendono. Ci sono redattori vittime di dirigenti che impongono la loro "visione" del web. E via così.
  • Un brutto testo, quindi, non è sempre sinonimo di un pessimo redattore. Si fa quel che si può. Quando si può.

Pensare i contenuti: usabilità 11

• I principi sono sacri ma la realtà è spietata:
  • Per agevolare la scansione del testo occorrono titoli ben fatti. Significativi. Comprensibili al di fuori del contesto. Anche dopo qualche mese.
  • Si può imparare molto sui titoli leggendo un buon giornale. Ma cercando di non dimenticare che il web non è fatto di carta.
  • Le parole chiave, le frasi e i collegamenti che riteniamo importanti dovrebbero essere in qualche modo evidenziati. Ok, ma senza esagerare.

Pensare i contenuti: usabilità 12

• I principi sono sacri ma la realtà è spietata:
  • Le categorie ripetitive di informazione devono essere convertite in tabelle, diagrammi o grafici. Si usano le liste HTML ogni volta che si presenta un testo convertibile in un elenco, per esempio una sequenza di concetti o di passi.
  • Attenzione però all’ ossessione per le liste. Non va bene. Come non è saggio trasformare qualsiasi testo in un pomposo saggio. Perché un inutile diagramma non rende più credibili.

Pensare i contenuti: usabilità 13

• I principi sono sacri ma la realtà è spietata:
  • Non può mancare un "clicca qui" in un sito che si rispetti. Almeno è ciò che i redattori del passato devono aver pensato a giudicare dalla diffusione virale del meme "clicca qui".
  • Il collegamento deve essere comprensibile anche se estrapolato dal contesto. Pensate che meraviglia sentirsi leggere dallo screen reader "qui, qui, qui, qui". Ma se sei proprio "costretto" a ripeterti usa l'attributo TITLE!

Pensare i contenuti: usabilità 14

• I principi sono sacri ma la realtà è spietata:
  • Per combattere la piaga del “clicca qui” una strada è spostare la focalizzazione della frase dai collegamenti, o dai documenti collegati, al soggetto.
  • Per esempio: "I commenti condizionali servono per indirizzare regole CSS a una specifica versione di Internet Explorer" e non "Clicca qui, per approfondire i commenti condizionali".