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".
Pensare i contenuti: usabile o non usabile? 3
Pensare i contenuti
Architettura dell'informazione
Pensare i contenuti: IA 1
La combinazione di organizzazione dell'informazione, etichettatura, ricerca e sistemi di navigazione all'interno di siti Web e Intranet.
Peter Morville, Information Architecture for the World Wide Web, Third Edition, O'Reilly
[...] la struttura organizzativa logica e semantica delle informazioni, dei contenuti, dei processi e delle funzionalità di un sistema o un'applicazione informatica.
Architettura dell'informazione. (19 marzo 2008). Wikipedia, L'enciclopedia libera.
Pensare i contenuti: IA 2
- Le tre fasi dell'IA:
- 1 - IA come trasferimento di conoscenze da disclipline storiche come biblioteconomia e architettura verso il Web.
- 2 - IA strategica (o corporate) come supporto all'organizzazione dell'informazione aziendale nel suo complesso (non solo Web).
- 3 - IA trasversale: organizzazione dell'informazione in contesti sia fisici sia digitali.
Luca Rosati, Architettura dell'informazione, Apogeo
Pensare i contenuti: IA 3
- Sistemi di organizzazione (categorie).
- Sistemi di navigazione.
- Sistemi di ricerca.
- Sistemi di etichettatura (le etichette di categorie, opzioni e link).
Pensare i contenuti: IA 4
- Le domande dell'utente a cui l'IA deve rispondere:
- Dove sono?
- So cosa cercare, come effettuo la ricerca?
- Come esploro i contenuti del sito?
- Come posso contattare un essere umano?
- Come torno alla Home Page?
- Ecc.