In questa pagina vengono descritti i compiti principali per rendereaccessibile il contenuto di Wikipedia a qualsiasi utente, incluse le persone con disabilità sensoriali (persone cieche, ipovedenti, sorde o affette da ipoacusia) odisturbi specifici di apprendimento.
Per alcune indicazioni sono linkati i relativi punti di controllo delleLinee guida per l'accessibilità ai contenuti del Web (Web Content Accessibility Guidelines, WCAG) e le loropriorità.
<div> per i riquadri,non il markup per le tabelle (correlato:WCAG checkpoint 6.1,priorità 1)
Lo stesso argomento in dettaglio:Aiuto:Testo alternativo per le immagini eAiuto:Markup immagini.Le voci dovrebbero avere un senso compiuto anche per chi per una qualche ragione non può vedere le immagini. Occorre quindi fornire unequivalente testuale per le immagini.WCAG checkpoint 1.1,priorità 1
[[File:<nome>|frame|<altre_opzioni>|didascalia]] o[[File:<nome>|thumb|<altre_opzioni>|didascalia]] enon tabelle, div o cose simili (così il software può generare gli attributi "alt" ecc. nel sorgente HTML).[[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.La dimensione con cui è visualizzata un'immagine dovrebbe poter variare per ogni singolo utente che sta consultando la voce (in base allepreferenze utente), adattandosi così alle sue specifiche esigenze: per quanto possibileva 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 deldimensionamento relativo con il parametroupright (overticale), 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. VedesiAiuto:Tabelle per ulteriori informazioni sulla sintassi usata per le tabelle.
<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]…|} ! scope="col" | e ! scope="row" |)I browser vocali possono leggere ad alta voce i contenuti della tabella nell'ordine seguente[5]:
Si noti che ogni intestazione di colonna viene ripetuta leggendo ogni riga, cosicché un'abbreviazione potrebbe essere aggiunta a intestazioni molto lunghe usando l'attributoabbr="…", 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.
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'attributosummary=. Questi elementi strutturali delle tabelle devono essere usati solo per tabelle di dati, non di layout. Aggiungere inoltrerole="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]|}* 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.Occorreevitare di:
: (indentazione): serve per glielenchi di descrizioni, che sono un tipo di lista diverso.<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.<font> e simili). Per i template, usareTemplateStyles 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 neifogli di stile personali.WCAG checkpoint 3.3, priorità 2Testi e sfondi devono avere unContrast 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:
Si può inoltre installare l'estensione WCAG Contrast checker (Chrome,Firefox) per verificare il contrasto su un'intera pagina.
| Presidenti del Frosinone Calcio | |
|---|---|
| L. Vivoli (1906-07) · E. Frongia (1930-34) · A. Orsini (1963-64) · A. Cristofari, V. Mossini e R. Stirpe (1964-65) · R. Stirpe e B. Stirpe (1965-67) · D. Spaziani (1967-70) · G. Marocco (1970-72) · D. Franceschi (1972-75) · G. Battista (1975-76) · R. Bizzicari (1976-77) · D. A, Marini (1977-80) · G. B. Lenzini (1980-82) · U. Celani (1982-83) · G. Giurgola (1983-85) · E. Profumo (1985-86) · T. Di Vito (1986-87) · M. Iannarilli (1987-89) · A. Scaccia (1989-90) ·A. Deodati (1990-92) · F. Cuzzocrea (1992-93) · M. Conti (1993-98) · G. Carbone (1998-00) · R. Navarra (2000-03) ·M. Stirpe (2003-presente) |
Questo template, con i colori giallo e verde, ha unContrast Ratio di 3.66.
| Colori attuali | Versione accessibile | Versione ancora più accessibile |
|---|---|---|
| Testo CR 3.66 | Testo CR 5.09 | Testo CR 7.93 |
In questo caso, il testo nero su sfondo azzurro è accessibile, ma non lo è il link blu, con unContrast Ratio di 3.49.
| Colori attuali | Versione accessibile | Versione ancora più accessibile |
|---|---|---|
| Testo CR 3.66 | Testo CR 4.55 | Testo CR 7.09 |
| Presidenti dell'A.C. Milan | |
|---|---|
| A. Edwards (1899-1909) ·P. Pirelli (1909-28) · L. Ravasco (1928-29) · M. Benazzoli (1929-33) ·Carica vacante (1933) · L. Ravasco (1933-35) ·P. Annoni (1935-36) ·Carica vacante (1936) ·E. Colombo (1936-39) · A. Invernizzi (1939-40) ·Carica vacante (1940-45) ·U. Trabattoni (1945-54) ·A. Rizzoli (1954-63) ·F. Riva (1963-65) ·Carica vacante (1965-66) ·L. Carraro (1966-67) ·F. Carraro (1967-71) ·F. Sordillo (1971-72) ·A. Buticchi (1972-75) · B. Pardi (1975-76) · V. Duina (1976-77) ·F. Colombo (1977-80) ·G. Morazzoni (1980-82) ·G. Farina (1982-86) ·R. Lo Verde (1986) ·S. Berlusconi (1986-2004) ·Carica vacante (2004-06) ·S. Berlusconi (2006-08) ·Carica vacante (2008-2017) ·Li Y. (2017-2018) ·P. Scaroni (2018-presente) |
In questo caso, a non essere accessibile è il link rosso (lad che punta alla pagina di discussione del template) su sfondo rosso, con unContrast Ratio di 1.14.
| Colori attuali | Versione potenzialmente non accessibile | Versione accessibile |
|---|---|---|
| Testo CR 1.14 | Testo CR 4.60-Testo CR 2.46 | Testo CR 4.57 |
N.B. quando il link diventa blu, la versione con sfondo nero non è più accessibile.
Lo stesso argomento in dettaglio:Wikipedia: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 Wikipedia (comein 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 ilcontrasto).
Presta anche attenzione al fatto che, utilizzando unaskin 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.
Spesso gliacronimi e lesigle 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 inCommons:Timed Text (vedi ancheAiuto:Sottotitoli).
