In questa pagina vengono descritti i compiti principali per rendere accessibile il contenuto di Teknopedia a qualsiasi utente, incluse le persone con disabilità sensoriali (persone cieche, ipovedenti, sorde o affette da ipoacusia) o disturbi specifici di apprendimento.

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

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

• 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

Lo stesso argomento in dettaglio: Aiuto:Testo alternativo per le immagini e Aiuto:Markup immagini.

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.

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 con il parametro upright (o verticale), senza inserire un valore, ma lasciando quello di default, che si adatta alle preferenze dell'utente:

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

atletica leggera

Nel caso qui sopra occorre mettere testo alternativo vuoto per non far leggere cose strane al software di sintesi vocale (inutile mettere "atletica leggera", che verrebbe letto due volte: una come testo alternativo dell'immagine e una come testo semplice).

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

• Fare uso corretto di "header" (e "caption") per le tabelle; vedasi meta:Help:Table per la wiki-sintassi. WCAG checkpoint 5.1, priorità 1
• 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 wikisintassi per le tabelle, non <pre> o lo spazio all'inizio della riga

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

Intestazioni di riga e colonna ( ! )

Come l'intestazione, questi aiutano a presentare le informazioni in una struttura logica. Browser testuali possono leggere le intestazioni e i titoli prima e poi navigare i contenuti relativi. Notare anche che formattare col grassetto il contenuto di una cella normale non rende quest'ultima un'intestazione. [4].

Scope delle intestazioni ( ! scope="col" | e ! scope="row" | )

Identifica esplicitamente le intestazioni come di riga o di colonna. Così le intestazioni si collegano alle caselle corrispondenti.^[1]

I browser vocali possono leggere ad alta voce i contenuti della 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 intestazione di colonna viene ripetuta leggendo ogni riga, cosicché un'abbreviazione potrebbe essere aggiunta a intestazioni molto lunghe usando l'attributo abbr="…", ad esempio:

{| summary=""
|+ [caption text]
|-
! abbr="Teknopediani" | Contributore di Teknopedia
! abbr="Edit"      | Numero di modifiche
! Ultimo edit
! abbr="Donazioni"  | Donazioni ($US)
|-
…

In questo esempio tutte le intestazioni di colonna hanno un'abbreviazione eccetto la terza.

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

Per evitare di creare barriere all'accessibilità, qualora non fosse possibile evitare l'utilizzo di tabelle solo per layout, non usare alcuna caption, o intestazioni, ed evitare anche l'attributo summary=. Questi elementi strutturali delle tabelle devono essere usati solo per tabelle di dati, non di layout. Aggiungere inoltre role="presentation" alla tabella stessa, così che i lettori di schermo non trattino la tabella come tale. 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:

{| role="presentation"
| '''Titolo'''
|-
| [cella normale] || [cella normale]
|-
| [cella normale] || [cella normale]
|}

• Usare il markup previsto per creare liste (elenchi), cioè * per i punti di una lista non numerata e # per le liste numerate (WCAG checkpoint 3.6, priorità 2). Usare il template {{Lista}} per generare liste senza puntini ma al tempo stesso accessibili. In particolare, occorre evitare di:
  • Fare elenchi numerati a mano (non vengono riconosciuti come liste).
  • Usare : (indentazione): serve per gli elenchi di descrizioni, che sono un tipo di lista diverso.
  • Usare l'onnipresente <br /> (a capo): il suo unico utilizzo sensato è di dividere le righe di un testo qualora questa divisione fosse una caratteristica intrinseca di quel tipo di testo (ad esempio per gli indirizzi e le poesie). In particolare non va usato per le liste, per le spaziature, per la paragrafazione, e per quasi tutti gli altri utilizzi per cui lo si trova nelle voci.

• Mai usare solo i colori per differenziare delle cose: i daltonici potrebbero non riuscire a distinguerli, e gli screen reader non danno informazioni sul colore. WCAG checkpoint 2.1, priorità 1
• Evitare di specificare colori del testo nella pagina (tag <font> e simili). Per i template, usare TemplateStyles anziché stili in linea: in generale, l'aspetto del contenuto deve essere separato dalla sua struttura. Inoltre, gli stili in linea (style="...") sono più difficili da sovrascrivere, ad esempio nei fogli di stile personali. 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.

Testi e sfondi devono avere un Contrast Ratio pari o superiore a 4.5 per essere accessibili. Il valore massimo, corrispondente a un testo altamente accessibile, è 21.00 (nero su bianco o viceversa). Sono disponibili vari strumenti per testare le combinazioni di colori:

• marijohannessen.github.io
• webaim.org
• color.a11y.com
• webaim.org (versione per i link)
• app.contrast-finder.org (suggerisce colori accessibili simili a quelli dati in input)

Si può inoltre installare l'estensione WCAG Contrast checker (Chrome, Firefox) per verificare il contrasto su un'intera pagina.

Questo template, con i colori giallo e verde, ha un Contrast Ratio di 3.66.

V · D · M Vincitori dei Giochi olimpici antichi
Elleni della madrepatria	Acanto di Sparta · Agasia d'Arcadia · Agesarco di Tritea · Alcibiade · Cherone di Pellene · Chilone di Patrasso · Cilone · Cimone Coalemo · Corebo di Elide · Demarato di Sparta · Desmone di Corinto · Diagora di Rodi · Diocle di Corinto · Diocle di Messenia · Ebota · Eubota · Eurimene di Samo · Leonida di Rodi · Eutimo · Filino di Coo · Filippo II di Macedonia · Ismone di Elide · Onomasto di Smirne · Orsippo di Megara · Pitagora di Laconia · Polidamante di Scotussa · Senocle di Messenia · Senofonte di Corinto · Senofonte di Egio · Timasiteo di Delfi · Ipeno di Elide
Elleni della Magna Grecia	Astilo di Crotone · Diogneto di Crotone · Ergotele di Himera · Filippo di Crotone · Frinone · Gerone I · Glaucia di Crotone · Icco di Taranto · Ippostrato di Crotone · Anassila · Licino di Crotone · Milone · Nerone · Psaumida · Teogene · Terone · Timasiteo di Crotone · Tisicrate di Crotone · Vincitori olimpici siracusani
Donne	Arsinoe II · Berenice I · Bilistiche · Cinisca · Eurileonide
Gare dei giochi olimpici antichi

In questo caso, il testo nero su sfondo azzurro è accessibile, ma non lo è il link blu, con un Contrast Ratio di 3.49.

In questo caso, a non essere accessibile è il link rosso (la d che punta alla pagina di discussione del template) su sfondo rosso, con un Contrast Ratio di 1.14.

N.B. quando il link diventa blu, la versione con sfondo nero non è più accessibile.

• 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)

Lo stesso argomento in dettaglio: Teknopedia:Personalizzare la firma.

Le firme degli utenti sono fondamentali nelle pagine di discussione. Per questo motivo, è molto importante che abbiano un alto livello di accessibilità. Ad esempio, una firma con testo giallo, sullo sfondo bianco di Teknopedia (come in questo caso), NON è accessibile. Allo stesso modo, non sono accessibili le firme che contengono al loro interno caratteri strani, tipo stelline, emoji e altri fronzoli molto carini, ma poco pratici per chi ha una disabilità visiva.

Sii gentile: usa una firma utente chiara e ben visibile (e ricordati sempre di controllare il contrasto).

Presta anche attenzione al fatto che, utilizzando una skin antecedente a Vector 2022, le pagine di discussione hanno uno sfondo giallino (nello specifico questo giallino: #FFFFEE). Con Vector 2022 fortunatamente le pagine di discussione hanno sfondo bianco.

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

Spesso gli acronimi e le sigle possono generare difficoltà di lettura e comprensione del testo per chi è dislessico se non ne conosce il significato. È bene quindi affiancare all'acronimo o alla sigla la sua versione estesa (ad esempio: "la FIGC, Federazione Italiana Giuoco Calcio" o "la Federazione Italiana Giuoco Calcio (FIGC)") almeno la prima volta in cui compare in una pagina o sezione.

I file video e audio contenenti parti parlate, indipendentemente dalla lingua, dovrebbero sempre essere accompagnati da sottotitoli in lingua italiana al fine di garantirne l'accessibilità anche agli utenti con sordità o ipoacusia. I sottotitoli possono essere inseriti su Wikimedia Commons seguendo le istruzioni che si trovano in Commons:Timed Text (vedi anche Aiuto:Sottotitoli).

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

• 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)
• (EN) Wikimedia Accessibility Guidelines