Wikipedia:Accessibilità del contenuto

Testo alternativo

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 : 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 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]]

Icone

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

Tabelle di dati

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

Summary ( summary="…")

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

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

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.

I browser vocali possono leggere ad alta voce i contenuti della tabella nell'ordine seguente :

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="Wikipediani" | Contributore di Wikipedia
! 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.

Tabelle per l'impaginazione

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]
|}

{{Frosinone Calcio presidenti}}

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

{{Vincitori dei Giochi olimpici antichi}}

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.

{{A.C. Milan presidenti}}

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.