Wikipedia:Accessibilità del contenuto

In questa pagina vengono descritti i compiti principali per rendere accessibile il contenuto di Wikipedia a qualsiasi tipologia d'utente, incluse le persone con ridotta o impedita capacità sensoriale.

Passi del processo

1. Reperimento informazioni (in cosa consiste l'accessibilità?)
2. Analisi di it.wiki
3. Come si può rendere accessibile it.wiki
   1. Regole per modificare le voci esistenti e per creare nuove voci in maniera "corretta"
   2. Modifiche del software da sottoporre agli sviluppatori

Come si può rendere accessibile it.wiki

Indicazioni

Per alcune indicazioni sono linkati i relativi punti di controllo delle Linee guida per l'accessibilità ai contenuti del Web (Web Content Accessibility Guidelines, WCAG) e le loro priorità.

Struttura della pagina

• Verificare che i riquadri a lato si inseriscano in modo sensato anche in una versione linearizzata della pagina (un non vedente per esempio può non riconoscere che il riquadro è al di fuori del flusso del testo); usare <div> per i riquadri, non il markup per le tabelle (correlato: WCAG checkpoint 6.1, priorità 1)
• Fare uso corretto delle intestazioni (gerarchia corretta, non usare grassetto al posto delle intestazioni) WCAG checkpoint 3.5, priorità 2

Immagini

Testo alternativo

Le voci dovrebbero avere un senso compiuto anche per chi per una qualche ragione non può vedere le immagini. Occorre quindi fornire un equivalente testuale per le immagini. WCAG checkpoint 1.1, priorità 1

• Immagini con didascalia: Usare la wiki-sintassi [[File:<nome>|frame|<altre_opzioni>|didascalia]] o [[File:<nome>|thumb|<altre_opzioni>|didascalia]] e non tabelle, div o cose simili (così il software può generare gli attributi "alt" ecc. nel sorgente HTML).
• Immagini senza didascalia: Specificare un testo alternativo con la wiki-sintassi [[File:<nome>|<opzioni>|testo_alternativo]] (senza le opzioni "thumb" o "frame"). Il testo alternativo sarà visibile per esempio quando nel browser il caricamento delle immagini è disattivato.
• Test veloce [1]: Immaginate di dovere descrivere la pagina in questione al telefono. Se tutta l'informazione che trasmettereste al vostro interlocutore è presente in forma testuale nella pagina, è probabile che la pagina sia accessibile anche per chi non può vedere le immagini.

Risoluzione non fissa

La dimensione con cui è visualizzata un'immagine dovrebbe poter variare per ogni singolo utente che sta consultando la voce (in base alle preferenze utente), adattandosi così alle sue specifiche esigenze: per quanto possibile va dunque evitato di inserire una dimensione prefissata delle immagini. La forma corretta di inserimento è perciò ad esempio:

[[File:PincoPallo.jpg|thumb|didascalia]]

e non:

[[File:PincoPallo.jpg|thumb|250px|didascalia]]

È invece consentito l'uso del dimensionamento relativo, ad esempio:

[[File:PincoPallo.jpg|thumb|upright=1.2|didascalia]]

Tabelle

Screenreaders e altri strumenti per ipovedenti usano gli attributi specifici delle tabelle per facilitarne l'uso e la navigazione dei contenuti.

Bisogna usare la sintassi wikitable corretta con le "pipe" per avvantaggiarsi di tutte le possibilità disponibili. Vedesi Aiuto:Tabelle per ulteriori informazioni sulla sintassi usata per le tabelle.

Data tables

{| summary="Una descrizione dei contenuti della tabella."
|+ [caption text - testo intestazione]
|-
! scope="col" | [column header 1]
! scope="col" | [column header 2]
! scope="col" | [column header 3]
|-
! scope="row" | [row header 1]
| [normal cell 1,2] || [normal cell 1,3]
…
|}

Intestazione ( |+ )

Un'intestazione è il titolo della tabella, che ne descrive la natura [2].

Summary ( summary="…")

Il riassunto può provvedere una descrizione più lunga e dettagliata dello scopo e struttura della tabella per browser per ipovedenti [3].

Row & column headers ( ! )

Come l'intestazione, questi aiutano a presentare le informazioni in una struttura logica. Browsers testuali possono leggere le intestazioni e i titoli prima e poi navigare i contenuti relativi. [4].

Scope of headers ( ! scope="col" | and ! scope="row" | )

This clearly identifies headers as either row headers or column headers. Headers can now be associated to corresponding cells.

Voice browsers possono leggere ad alta voce i contenuti questi dati nella tabella nell'ordine seguente [5]:

Caption: [caption text]

Summary: [summary text]

[column header 1]: [row header 1], [column header 2]: [cell 1,2], [column header 3]: [cell 1,3]

[column header 1]: [row header 2], [column header 2]: [cell 2,2], [column header 3]: [cell 2,3]

…

Si noti che ogni column header viene ripetuto leggendo ogni row, cosicché un'abbreviazione potrebbe essere aggiunta a headers molto lunghi usando l'attributo abbr="…", ad esempio:

{| summary=""
|+ [caption text]
|-
! abbr="Wikipedian" | Wikipedia editor
! abbr="Edits"      | Number of edits
! Last edit
! abbr="Donations"  | Donations ($US)
|-
…

In questo esempio tutti gli column headers hanno un'abbreviazione eccetto la colonna con la data dell'ultimo edit..

Layout tables

Alcuni template e infobox fanno uso di tabelle.

Evitate di fare uso di tabelle per il solo scopo di layout. La miglior opzione è di usare blocchi di <div> e l'attributo "style" perché sono più flessibili.

Per layout molto semplici le tabelle potrebbero essere un'opzione. Specialmente se l'unico scopo della tabella è di ottenere un effetto di float, allora align="right" ecc. funzionerà anche in alcuni browser che non supportano il CSS. Questo è solo un'approssimazione verbosa di <div> più CSS, e non l'errore/orrore conosciuto come (nested) "table layout".

Comunque, per evitare di creare barriere all'accessibilità, quando si utilizzano tabelle solo per layout, non usare alcuna caption, o headers, ed evitare anche l'attributo summary=. Questi elementi strutturali delle tabelle devono essere usati solo per tabelle di dati, non di layout. Non utilizzare elementi strutturali per il layout, ma usate il CSS. Per il codice Wiki delle tabelle questo significa evitare "!" (= <th> in XHTML) in questi casi:

{| class="toccolours" width="94%"
| align="center" bgcolor="#ccccff" | '''Title'''
|-
| [normal cell] || [normal cell]
|-
| [normal cell] || [normal cell]
|}

• Cercare di fare uso corretto di "header" (e "caption") per le tabelle; vedasi meta:Help:Table per la wiki-sintassi. WCAG checkpoint 5.1, priorità 1
• Cercare di usare il markup delle tabelle solo per tabelle vere, non come mezzo per posizionare elementi della pagina (immagini, riquadri, ecc.). WCAG checkpoint 5.3, priorità 2
• Markup: Usare la wiki-sintassi per le tabelle, non <pre> o lo spazio all'inizio della riga

Liste

• Usare il markup previsto per creare liste (elenchi), cioè * per i punti di una lista non numerata e # per le liste numerate. Quindi possibilmente non numerare a mano e non usare : (indent) o <br /> (a capo) per creare una lista. WCAG checkpoint 3.6, priorità 2

Colori

• Mai usare solo i colori per differenziare delle cose (i daltonici eventualmente non li sanno distinguere). WCAG checkpoint 2.1, priorità 1
• Evitare di specificare colori del testo nella pagina (tag <font> e simili). Per i template cercare di specificare i colori nel monobook.css (per esempio alcune persone riescono meglio a leggere testo chiaro su sfondo scuro. Gli utenti registrati hanno la possibilità di impostare il foglio di stile personale in questo modo, ma rischiano di ritrovarsi per esempio un testo blu scuro su sfondo nero, praticamente illeggibile). WCAG checkpoint 3.3, priorità 2
• Ognuno può utilizzare, secondo le proprie necessità, lo strumento per l'impostazione di colori personalizzati nella visualizzazione dei diff.

HTML

• Se si usa HTML, controllare la pagina inserendone l'URL nel validator del W3C. WCAG checkpoint 3.2, priorità 2
• Usare HTML il meno possibile, dato che il software dovrebbe sempre generare pagine HTML corrette dal wiki-markup, mentre questo non è assicurato inserendo dell'HTML a mano. (A parte che un sorgente complesso in HTML tende a scoraggiare gli utenti meno esperti)

Strumenti

• Wikipedia:Elenchi generati offline, sezione "Accessibilità"

Versione audio delle voci

• Vedi la Categoria:Voci parlate
• Esiste inoltre un progetto libero esterno, Pediaphon, in grado di generare una versione audio di qualunque voce di Wikipedia.

Pagine correlate

• (EN) usability:Accessibility Initiative
• Progetto:Accessibilità

Collegamenti esterni

• http://www.w3c.it/ (ufficio italiano del W3C, con numerosi link utili)
• http://www.w3.org/WAI/gettingstarted/Overview.html.it (Risorse sull'accessibilità; in italiano)
• http://www.webaccessibile.org/ (Sito web italiano sull'accessibilità. Tra l'altro è possibile richiedere un'analisi per i siti di pubblica utilità, vedi [6] )
• http://www.html.it/accessibilita/ (guida alla costruzione di siti accessibili)
• http://www.webxtutti.it/testa.htm (validatore)
• http://www.webxtutti.it/link.htm (raccolta di link su accessibilità e usabilità)
• Tecniche e rassegna stampa sull'accessibilità
• http://www.shinynews.it/usability/1005-errori.shtml (Jakob Nielsen segnala quali siano i problemi e gli errori di usability più comuni nel 2005)
• (EN) http://www.w3.org/WAI/Resources/ (Risorse sull'accessibilità)
• (EN) http://validator.w3.org/ (validatore ufficiale del w3c)
• (EN) http://webxact.watchfire.com/ (validatore)
• (EN) Why is the software out of reach of the community?, discussione in foundation-l (gennaio 2009)