Un'analisi dettagliata del primo pilastro delle WCAG, con regole tecniche e consigli per un sito web realmente inclusivo.
Benvenuti alla prima parte della nostra serie sull'accessibilità web! Nei prossimi quattro articoli, approfondiremo i WCAG (Web Content Accessibility Guidelines) principi, noti con l'acronimo POUR. Questi principi costituiscono la base per creare esperienze digitali aperte a tutti e sono definiti come: Percebibile, Utilizzabile, Comprensibile, e Robusto.
Oggi ci concentriamo sulla pietra miliare dell'accessibilità: la Percebibilità.
Cosa significa che un sito è percepibile?
Il principio di Percebibilità richiede che le informazioni e i componenti dell'interfaccia utente siano presentabili agli utenti in modi che possano percepire, ovvero attraverso la vista, l'udito o il tatto. In altre parole, i contenuti non possono essere invisibili a tutti i sensi dell'utente. Se una persona con disabilità visiva non può accedere alle informazioni contenute in un'immagine, o un utente con disabilità uditiva non può comprendere un video, il tuo sito non è percepibile.
Livelli di conformità WCAG
Prima di addentrarsi nei dettagli tecnici, è importante comprendere come sono classificate le linee guida WCAG. Per ogni principio, le regole rientrano in una delle seguenti tre categorie, che indicano il grado di accessibilità raggiunto:
- Livello A: È il livello minimo di conformità. Il mancato rispetto di queste linee guida crea barriere significative per gli utenti con disabilità.
- Livello AA: Questo livello include tutti i requisiti del Livello A, più altri aggiuntivi. È lo standard di riferimento per la maggior parte della legislazione globale, incluso l'European Accessibility Act (EAA), e fornisce un livello di accessibilità intermedio e solido.
- Livello AAA: Il livello di conformità più elevato e complesso. Include tutti i requisiti dei Livelli A e AA ed è solitamente adottato da organizzazioni specializzate o per contenuti destinati a un pubblico specifico con esigenze particolari.
Guida tecnica dettagliata per il principio di percepibilità
Di seguito, abbiamo ripreso e strutturato le regole tecniche e i suggerimenti esattamente come definiti nelle linee guida ufficiali, per fornire uno strumento pratico a sviluppatori e creatori di contenuti.
1.2 Fornire alternative testuali per qualsiasi contenuto non testuale
1.2.1. [AAA] Contenuto non testuale
- Tutte le immagini e i pulsanti immagine devono avere un testo alternativo significativo.
- Per le immagini di sfondo, sono preferibili gli sfondi generati tramite CSS. Se vengono utilizzate immagini per lo sfondo, queste devono avere un testo alternativo nullo esplicitamente indicato.
- I pulsanti dei moduli devono avere un valore descrittivo.
- I campi di input dei moduli devono avere etichette di testo descrittive.
- I contenuti multimediali devono essere identificati da un testo descrittivo e accessibile.
- Ogni frame utilizzato deve avere un titolo.
Suggerimenti:
- ARIA: Utilizza aria-label, aria-labelledby o aria-describedby per aggiungere etichette o alternative testuali.
- Generale: Per un gruppo di immagini da interpretare collettivamente, è possibile aggiungere un attributo alt non nullo alla prima immagine per descrivere l'intero gruppo, lasciando vuoti gli attributi alt delle altre.
- HTML/XHTML: Per migliorare l'accessibilità, si consiglia di dotare i link sia di una rappresentazione testuale che grafica. La soluzione ottimale consiste nell'utilizzare un unico elemento contenente sia il testo che l'immagine, assicurandosi che l'immagine abbia un attributo alt esplicitamente nullo.
- HTML/XHTML: Come variante del caso precedente, l'attributo alt dell'immagine può essere non nullo se l'immagine è un'icona che trasmette un messaggio visivo. Ad esempio, se l'icona indica che il link apre un file PDF, il testo alternativo dell'immagine dovrebbe avvisare gli utenti non vedenti di questa caratteristica.
- HTML/XHTML: Per gli elementi applet, l'alternativa testuale deve essere creata utilizzando sia l'attributo alt che inserendo del testo all'interno dell'elemento applet stesso. Entrambi sono necessari poiché il supporto per l'elemento applet varia a seconda dello user agent.
- HTML/XHTML: Per le immagini utilizzate come pulsanti di un modulo, il testo alternativo deve essere fornito tramite l'attributo alt dell'elemento input di tipo img.
- HTML/XHTML: Gli elementi input di tipo text, checkbox, radio, file, password, così come gli elementi textarea e select, possono essere associati a un'etichetta tramite un elemento label, il cui attributo for deve corrispondere al valore dell'attributo id dell'elemento associato. Questo metodo non può essere utilizzato per etichettare input di tipo submit, reset, img o button.
- HTML/XHTML: Nei casi in cui non sia possibile utilizzare un elemento label (per mancanza di spazio o perché non appropriato), è possibile utilizzare l'attributo title per etichettare i campi di interazione dei moduli.
- HTML/XHTML: Gli elementi object possono contenere l'alternativa testuale al loro interno oppure possono contenere un'immagine o un video che, a sua volta, presenta un'alternativa testuale fornita tramite il proprio attributo alt.
1.3 Fornire alternative per i contenuti basati sul tempo
1.3.1. [A] Solo audio e solo video (preregistrati)
- Tutti i contenuti di solo audio devono essere accompagnati da una trascrizione arricchita con elementi descrittivi (relativi agli elementi necessari per la comprensione).
- Tutti i contenuti di solo video devono essere accompagnati da una descrizione audio o testuale.
Suggerimenti:
- Generale: L'alternativa testuale per un podcast può essere il suo script (se disponibile), arricchito con descrizioni degli elementi sonori di sottofondo.
- Generale: L'alternativa testuale per una presentazione PPT convertita in un video muto conterrà sia la descrizione del contenuto delle slide, sia eventuali animazioni o effetti necessari per la comprensione.
- Generale: L'alternativa audio per una presentazione PPT convertita in un video muto descriverà il contenuto delle slide, oltre alle spiegazioni fornite dal presentatore a supporto di determinati punti trattati nelle slide stesse.
- HTML/XHTML: Gli elementi video possono essere associati a elementi track in HTML5. L'attributo src dell'elemento track può specificare un file contenente l'audiodescrizione del filmato, sincronizzata con gli eventi presenti nel video.
1.3.2. [A] Sottotitoli (preregistrati)
- Tutti i contenuti audio-video preregistrati devono essere dotati di sottotitoli sincronizzati, a meno che il contenuto audio-video non sia esso stesso un'alternativa multimediale a un testo (e sia chiaramente indicato come tale).
Suggerimenti: - HTML/XHTML: L'elemento track può essere utilizzato per fornire sottotitoli a un elemento video.
1.3.3. [A] Audiodescrizione o alternativa multimediale (preregistrata)
- Per tutti i contenuti audio-video preregistrati, deve essere fornita un'alternativa: una descrizione testuale (che sia più di un semplice sottotitolo) o una descrizione audio.
1.3.4. [AA] Sottotitoli (dal vivo)
- Tutti i contenuti multimediali dal vivo con una componente audio devono essere accompagnati da sottotitoli sincronizzati.
Suggerimenti: - Generale: Per generare tali sottotitoli è possibile utilizzare servizi di traduzione in tempo reale.
1.3.5. [AA] Audiodescrizione (preregistrata)
- Per tutti i contenuti audio-video preregistrati, deve essere presente un'opzione per selezionare una traccia audio alternativa che contenga l'audiodescrizione delle immagini presentate.
1.3.6. [AAA] Lingua dei segni (preregistrata)
- Per tutti i contenuti audio, deve essere fornita anche l'interpretazione nella lingua dei segni.
1.3.7. [AAA] Audiodescrizione estesa (preregistrata)
- Per qualsiasi contenuto audio-video in cui il suono di sottofondo non presenti pause sufficientemente lunghe da consentire un'audiodescrizione sincronizzata ed esauriente, deve essere fornita una versione multimediale segmentata in modo appropriato per accogliere un'audiodescrizione estesa.
1.3.8. [AAA] Alternativa multimediale (preregistrata)
- Per qualsiasi contenuto audio-video o solo video, deve essere offerta anche un'alternativa descrittiva (testo leggibile da uno screen reader).
1.3.9. [AAA] Solo audio (dal vivo)
- Per qualsiasi contenuto solo audio, deve essere offerta anche un'alternativa multimediale basata sulla vista (sottotitoli in tempo reale, video dal vivo con l'equivalente nella lingua dei segni, ecc.).
1.4 Creare contenuti che possano essere presentati in modi diversi senza perdere informazioni o struttura
1.4.1. [A] Informazioni e relazioni
- Il markup semantico nel codice HTML deve essere utilizzato in modo appropriato (per intestazioni, elenchi, enfasi, ecc.).
- I dati tabellari devono essere strutturati in tabelle con titoli e riepiloghi.
- Gli input dei moduli devono essere contrassegnati con etichette testuali e raggruppati in modo appropriato.
1.4.2. [A] Sequenza significativa
- L'ordine di lettura e navigazione della pagina deve essere logico; agli screen reader deve essere fornito l'accesso alle informazioni riguardanti l'ordine dei blocchi nella pagina.
1.4.3. [A] Caratteristiche sensoriali
- Le istruzioni per comprendere e utilizzare i contenuti non devono basarsi su caratteristiche visive (ad esempio, "è nella colonna di sinistra" o "clicca sul quadrato rosso").
- Le istruzioni per comprendere e utilizzare i contenuti non devono basarsi su segnali uditivi (ad esempio, "attendi il segnale acustico").
1.5 Rendere più semplice per gli utenti vedere e ascoltare i contenuti, anche separando il primo piano dallo sfondo
1.5.1. [A] Uso del colore
- Il colore non deve essere utilizzato come unico mezzo per trasmettere informazioni o gestire le interazioni.
- Per distinguere i link dal resto del testo, non è sufficiente che abbiano solo un colore diverso, a meno che il contrasto con lo sfondo non sia di almeno 3:1 e l'azione di selezionare o passare il mouse sopra il link sia accompagnata dalla comparsa di un elemento distintivo (come una sottolineatura).
1.5.2. [A] Controllo audio
- Se una pagina contiene audio che viene riprodotto automaticamente, devono essere presenti meccanismi nella pagina per interrompere, mettere in pausa, regolare o silenziare il suono.
1.5.3. [AA] Contrasto (minimo)
- Il testo e le immagini di testo devono avere un contrasto minimo di 4,5:1.
- Il testo di grandi dimensioni (almeno 18pt o 14pt in grassetto) deve avere un contrasto minimo di 3:1.
- Il testo di sfondo o il testo presente nei loghi sono esenti da queste condizioni.
1.5.4. [AA] Ridimensionamento del testo
- La pagina deve rimanere funzionale e leggibile quando viene ridimensionata fino al 200% della sua dimensione originale.
1.5.5. [AA] Immagini di testo
- Se le informazioni possono essere trasmesse utilizzando solo testo (eventualmente formattato), l'uso di immagini contenenti tale testo dovrebbe essere evitato.
- Un'eccezione a questa regola si applica quando l'immagine del testo può essere generata dinamicamente e personalizzata in base alle esigenze dell'utente.
1.5.6. [AAA] Contrasto (avanzato)
- Il testo e le immagini di testo devono avere un contrasto minimo di 7:1.
- Il testo di grandi dimensioni (almeno 18pt o 14pt in grassetto) deve avere un contrasto minimo di 4,5:1.
- Il testo di sfondo o il testo presente nei loghi sono esenti da queste condizioni.
1.5.7. [AAA] Rumore di fondo basso o assente
- Il rumore di fondo di una conversazione deve essere inesistente o regolabile per evitare di compromettere la comprensione delle parole.
- Se il rumore di fondo non può essere regolato, deve avere un volume inferiore di almeno 20 dB rispetto a quello della conversazione.
1.5.8. [AAA] Presentazione visiva
- Per la presentazione visiva dei blocchi di testo, deve essere disponibile un meccanismo che consenta regolazioni tali da rispettare le seguenti regole:
- Il colore dello sfondo e del testo può essere selezionato dall'utente.
- La larghezza può essere impostata fino a un massimo di 80 caratteri per riga.
- L'allineamento del testo NON deve essere giustificato (allineato sia al margine sinistro che a quello destro).
- L'interlinea tra le righe di un paragrafo deve essere di almeno 1,5, e tra i paragrafi di almeno 2,5.
- Il ridimensionamento del testo fino al 200% della dimensione iniziale non deve richiedere lo scorrimento orizzontale.
- Il colore dello sfondo e del testo può essere selezionato dall'utente.
1.5.9. [AAA] Immagini di testo (nessuna eccezione)
- Le immagini di testo non dovrebbero mai essere utilizzate al posto del testo reale.
Semplificare la percettibilità con Wawsome
L'implementazione manuale di queste regole può essere un processo laborioso e soggetto a errori. Wawsome è progettato per automatizzare e semplificare questo lavoro.
- Correzioni basate sull'IA: La nostra piattaforma aggiunge automaticamente testo alternativo descrittivo alle immagini ed etichette ARIA essenziali, garantendo che nessun contenuto non testuale rimanga invisibile alle tecnologie assistive.
- Personalizzazione dell'utente: Il widget Wawsome offre ai visitatori il pieno controllo. Possono regolare contrasto, colori, spaziatura e dimensioni del testo, attivare filtri per il daltonismo o scegliere profili predefiniti per diverse esigenze, garantendo una leggibilità ottimale per tutti.
Scopri queste potenti funzionalità e molte altre iniziando una prova gratuita di 7 giorni oggi stesso!
Conclusione
La percepibilità è molto più di un semplice elenco di requisiti tecnici; è la base su cui si costruisce un'esperienza digitale realmente inclusiva. Assicurandoti che tutti gli utenti possano percepire i tuoi contenuti, apri la strada a una comunicazione efficace e dimostri un impegno concreto verso ogni membro del tuo pubblico.
Nel nostro prossimo articolo, affronteremo il secondo principio delle WCAG: Operabilità. Ti mostreremo come garantire che tutti gli utenti possano navigare e interagire con il tuo sito, indipendentemente dal dispositivo o dal metodo di input utilizzato.