Utente:Yiyi/Accessibilità


Problemi di contrasto modifica

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). Questo tool permette di testare le combinazioni di colori.

Anche questo :-)

E questo, molto simpatico.

Esempi modifica

{{Frosinone Calcio presidenti}} modifica

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

Colori attuali Versione accessibile Versione ancora più accessibile
Testo CR 3.66 Testo CR 5.09 Testo CR 7.93

{{Vincitori dei Giochi olimpici antichi}} modifica

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

Colori attuali Versione accessibile Versione ancora più accessibile
Testo CR 3.66 Testo CR 4.55 Testo CR 7.09

{{A.C. Milan presidenti}} modifica

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.

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.

Problemi di Text To Speech (TTS) modifica

Le persone non vedenti utilizzano software di sintesi vocale per accedere ai contenuti online. Questi contenuti devono però essere costruiti in maniera adeguata.

Esempi modifica

{{Palmarès}} usato in {{Sportivo}} modifica

Competizione Ori Argenti Bronzi
Campionati mondiali 2 5 1


In questo caso il software Text To Speech leggerà:

«Campionati mondiali. Due. Cinque. Uno.»

Ma 2, 5 e 1 cosa? Patate?

Usando il tag <abbr> (o il template {{Tooltip}}), scrivendo {{Tooltip|2|2 ori}} si avrà come risultato 2 (la funzionalità si può integrare direttamente nel template {{Palmarès}}). Il software TTS leggerà:

«Due ori.»

Mantenendo sostanzialmente inalterati gli aspetti grafici:

Competizione Ori Argenti Bronzi
Campionati mondiali 2 5 1


Immagini modifica

 
Boomerang.

Tutte le immagini dovrebbero avere un testo alternativo, ottenibile utilizzando l'attributo alt. Il testo alternativo permette ai software di Text To Speech di descrivere le immagini agli utenti con disabilità visiva.

Ad esempio, nell'immagine qui a sinistra, l'assenza dell'attributo alt ha come conseguenza il fatto che il software TTS andrà a leggere il nome del file ("Wooden boomerang asv2021-05.jpg"). Con l'attributo alt, invece, si può far leggere al software una descrizione più accurata (ad esempio "Un boomerang in legno su un prato"). Questo è particolarmente importante per grafici e mappe.

NB il testo alternativo per un'immagine può variare in base alla voce in cui la stessa è inserita, in quanto la medesima immagine può essere utilizzata per illustrare soggetti, situazioni o concetti differenti.

Icone modifica

  atletica leggera → 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)