AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.
Le linee guida WCAG 2.0 sono costituite da un insieme di criteri di successo e linee guida che non dipendono dalla tecnologia in uso e hanno l’obiettivo di rendere i contenuti web accessibili e utilizzabili da persone con disabilità.
Consulta anche:
Il contenuto viene classificato in base a tre livelli di conformità: A (il più basso), AA e AAA (il più alto). Brevemente, i livelli sono definiti come segue:
Quando si crea un sito, è necessario determinare il livello complessivo che si desidera ottenere.
Nella sezione seguente sono incluse le linee guida WCAG 2.0 e i criteri di successo per i livelli di conformità A e AA.
Poiché non è possibile soddisfare tutti i criteri di successo AAA per alcuni tipi di contenuti, si sconsiglia di richiedere questo livello di conformità come criterio generale.
In questo documento vengono utilizzati:
Le informazioni contenute in una pagina web possono essere fornite in diversi formati non testuali, ad esempio immagini, video, animazioni, grafici e grafici. Le persone non vedenti o con gravi disabilità visive non sono in grado di visualizzare contenuti non testuali, ma possono accedere al contenuto testuale tramite la lettura da parte di un assistente vocale o la presentazione in forma tattile da parte di un dispositivo di visualizzazione Braille. Pertanto, fornendo alternative testuali al contenuto in formato grafico, le persone che non possono vedere il contenuto grafico possono accedere a una versione equivalente delle informazioni fornite dal contenuto.
Un ulteriore vantaggio utile riguarda le alternative testuali, le quali consentono l’indicizzazione dei contenuti non testuali da parte della tecnologia dei motori di ricerca.
Per gli elementi grafici statici, il requisito fondamentale consiste nel fornire un’alternativa testuale equivalente. Questo può essere fatto nel campo Testo Alt:
Alcuni componenti pronti per l’uso, come Carosello e Presentazione, non consentono di aggiungere descrizioni di testo alternativo alle immagini. Quando implementi le versioni di questi componenti per l’istanza AEM, il team di sviluppo dovrà configurarli per supportare l’attributo alt
, affinché gli autori possano aggiungerlo al contenuto (consulta Aggiunta di supporto per elementi e attributi HTML aggiuntivi).
La Testo alternativo è disponibile nel campo Immagine finestra di dialogo del componente Metadati scheda:
In AEM il campo Testo alternativo deve essere compilato per impostazione predefinita. Se l’immagine è puramente decorativa e il testo alternativo non sarebbe sensoriale, la L'immagine è decorativa è possibile selezionare questa opzione.
Esistono varie forme di contenuti non testuali, di conseguenza il valore del testo alternativo dipende dal ruolo dell’elemento grafico all’interno della pagina Web. Alcune regole generali da seguire sono:
Le alternative testuali dovrebbero essere concise ma acquisire chiaramente le informazioni essenziali fornite dal contenuto non testuale.
È necessario evitare descrizioni eccessivamente lunghe (oltre 100 caratteri). Se un testo alternativo richiede ulteriori dettagli:
Il testo alternativo non deve replicare il contenuto vicino, fornito sotto forma di testo sulla stessa pagina. Ricorda che molte immagini sono illustrazioni di punti già trattati nel testo di una pagina, pertanto potrebbe già esistere un'alternativa testuale dettagliata.
Se il contenuto non testuale è un collegamento a un’altra pagina o a un altro documento e non esiste altro testo che faccia parte dello stesso collegamento, il testo alternativo per l’immagine deve indicare la destinazione del collegamento, non descrivere l’immagine.
Se il contenuto non testuale è contenuto in un elemento pulsante e non esiste testo che faccia parte dello stesso pulsante, il testo alternativo dell’immagine deve indicare la funzionalità del pulsante e non descrivere l’immagine.
È perfettamente accettabile associare a un’immagine un testo alternativo vuoto (null), ma solo se l’immagine non prevede testo alternativo (ad esempio, se si tratta di un elemento grafico puramente decorativo) o se il testo equivalente è già incluso nel testo della pagina.
La Bozza W3C: Tecniche di HTML5 per fornire alternative testuali utili dispone di ulteriori dettagli ed esempi di testi alternativi adeguati per immagini di tipi diversi.
Tipi specifici di contenuto non testuale che richiedono alternative testuali potrebbero includere:
Foto illustrative: queste sono immagini di persone, oggetti o luoghi. Pensa al ruolo della foto nella pagina; è probabile che un equivalente testuale adeguato sia Foto di [oggetto], ma potrebbe dipendere dal testo circostante.
Icone: Si tratta di piccoli pittogrammi (immagini) che veicolano informazioni specifiche. Devono essere utilizzati in modo coerente all’interno di una pagina e del sito. Tutte le istanze dell’icona in una pagina o in un sito devono avere lo stesso testo alternativo, breve e sintetico, a meno che questo determini inutili duplicazioni di testo adiacente.
Grafici e diagrammi: solitamente rappresentano dati numerici. Di conseguenza, un possibile testo alternativo potrebbe consistere in una breve sintesi delle principali tendenze indicate nel diagramma o grafico. Se necessario, fornisci anche una descrizione più dettagliata nel testo utilizzando il campo Descrizione nella scheda Avanzate delle proprietà dell’immagine. In aggiunta, è possibile fornire i dati di origine in formato tabellare altrove nella pagina o nel sito.
Per fornire un'alternativa a questo grafico di esempio, aggiungi un conciso alt
all'immagine stessa e quindi seguire l'immagine con un'alternativa testuale completa.
<p><img src="figure1.gif" alt="Figure 1" ></p>
<p> Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.</p>
Lo snippet di cui sopra viene utilizzato solo per illustrare l’ordine. Si consiglia di utilizzare il Immagine (anziché il img src
riferimento utilizzato sopra.
In AEM questo può essere fatto utilizzando una combinazione di Testo Alt e Descrizione campi nella finestra di dialogo di configurazione dell’immagine, come in Come soddisfare il criterio - Contenuto non testuale (1.1.1).
Mappe, diagrammi, diagrammi di flusso: per gli elementi grafici che forniscono dati spaziali (ad esempio, per la descrizione di relazioni tra oggetti o un processo), assicurati che il messaggio principale venga comunicato in formato testuale. Per le mappe, sarà probabilmente poco pratico fornire un testo equivalente completo. Tuttavia, se la mappa ha lo scopo di indicare il percorso verso una particolare destinazione, il testo alternativo dell’immagine della mappa potrà brevemente indicare Mappa di X, e quindi fornire indicazioni nel testo altrove sulla pagina o mediante il campo Descrizione nella scheda Avanzate del componente Immagine.
CAPTCHA: Un CAPTCHA è un Test di Turing Pubblico Completamente Automatizzato per dire computer e umani a parte. Si tratta di un controllo di sicurezza utilizzato sulle pagine web per distinguere gli esseri umani da software dannoso, ma che può causare barriere di accessibilità. Si tratta di immagini che richiedono agli utenti di descrivere ciò che visualizzano per poter superare un test di sicurezza. Fornire un'alternativa testuale per l'immagine ovviamente non è possibile, quindi sarà necessario considerare soluzioni non grafiche alternative.
Il W3C fornisce una serie di suggerimenti, come ad esempio:Ognuno di questi approcci ha i propri meriti e svantaggi.
Immagini di sfondo: Questi risultati vengono ottenuti utilizzando i CSS (Cascading Style Sheets, fogli di stile a cascata) anziché in HTML. Ciò significa che non è possibile specificare un valore di testo alternativo. Pertanto, le immagini di sfondo non devono fornire informazioni testuali importanti, se lo fanno, devono essere fornite anche nel testo della pagina.
Tuttavia, è importante che venga visualizzato uno sfondo alternativo quando l'immagine non può essere visualizzata.
Dovrebbe essere previsto un livello adeguato di contrasto tra lo sfondo e il testo in primo piano; questo elemento viene discusso più dettagliatamente in Contrasto (minimo) (1.4.3).
Si tratta del contenuto web basato sul tempo. Vengono trattati i contenuti che l’utente può riprodurre (come video, audio e contenuti animati) e che possono essere preregistrati o in streaming.
Criterio di successo 1.2.1
Livello A
Solo audio e solo video (preregistrati): per gli elementi solo video e solo audio preregistrati vale quanto segue, tranne quando l’audio o il video sia un elemento alternativo per il testo, chiaramente indicato come tale:
Problemi di accessibilità per audio e video possono essere riscontrati da:
Video o audio potrebbero non essere disponibili per le persone che utilizzano browser o dispositivi che non supportano la riproduzione di contenuto in formati multimediali specifici, come Adobe Flash.
Fornire queste informazioni in un formato diverso, ad esempio testo (o audio per video senza audio) può renderle accessibili alle persone che non possono accedere al contenuto originale.
Se il contenuto è una traccia audio preregistrata senza video (come un podcast):
Fornisci un collegamento immediatamente prima o dopo il contenuto, a una trascrizione testuale del contenuto audio.
La trascrizione deve essere una pagina HTML con un equivalente testuale di tutti i contenuti parlati e non parlati importanti, oltre all’indicazione di chi sta parlando, una descrizione dell’ambientazione, le espressioni vocali e una descrizione di qualsiasi altro elemento sonoro significativo.
Se il contenuto è un'animazione o un video preregistrato senza audio:
Se il contenuto audio o video viene fornito come alternativa al contenuto già esistente in un altro formato in una pagina web, non è necessario soddisfare i requisiti di cui sopra. Ad esempio, se un video illustra un elenco di istruzioni testuali, questo video non richiede un’alternativa, in quanto le istruzioni testuali agiscono già come alternativa al video.
L’inserimento di contenuti multimediali, in particolare contenuti di Flash, nelle pagine web AEM è simile all’inserimento di un’immagine. Tuttavia, dato che i contenuti multimediali sono molto più di un fermo immagine, esistono differenti impostazioni e opzioni per controllarne la riproduzione.
Quando utilizzi elementi multimediali con contenuti informativi, è necessario creare anche collegamenti a contenuti alternativi. Ad esempio, per includere una trascrizione testuale, crea una pagina HTML per visualizzare la trascrizione e quindi aggiungi un collegamento accanto o sotto al contenuto audio.
Le persone non udenti o ipoudenti non potranno accedere ai contenuti audio o avranno gravi difficoltà di accesso. I sottotitoli sono equivalenti testuali dell’audio parlato e non, visualizzati sullo schermo al momento opportuno durante il video. Permettono alle persone che non possono sentire l'audio di capire cosa sta succedendo.
I sottotitoli non sono richiesti quando testo o equivalenti non testuali adeguati (che forniscono informazioni direttamente equivalenti) sono disponibili sulla stessa pagina del video o dell’animazione.
I sottotitoli possono essere:
Se possibile, utilizza i sottotitoli codificati in modo da consentire agli utenti di scegliere se visualizzarli o meno.
Per i sottotitoli codificati è necessario creare e fornire, unitamente al file video, un file di sottotitoli sincronizzati in un formato appropriato, ad esempio SMIL (i dettagli su come effettuare questa operazione vanno oltre lo scopo di questa guida, ma abbiamo incluso collegamenti ad alcune esercitazioni nella sezione Ulteriori informazioni - Sottotitoli (preregistrati) (1.2.2)). Assicurati di includere una nota per indicare agli utenti che per il video sono disponibili sottotitoli.
Se è necessario utilizzare sottotitoli non codificati, inserisci il testo nella traccia video. A questo scopo è possibile utilizzare applicazioni di editing video che consentono di sovrapporre i sottotitoli al video.
Le persone non vedenti o ipovedenti avranno problemi di accessibilità se le informazioni in un video o in un’animazione vengono fornite solo visivamente, o se l’audio non fornisce informazioni sufficienti per consentire la comprensione di ciò che sta accadendo.
Per soddisfare questo criterio di successo è possibile adottare due approcci. Entrambi sono accettabili:
Includere una descrizione audio aggiuntiva per i contenuti video. Questo si può ottenere in uno dei tre modi seguenti:
Durante le pause nella finestra di dialogo esistente, fornisci informazioni sulle modifiche della scena che non vengono presentate come parte della traccia audio esistente;
Includi una nuova traccia audio, aggiuntiva e facoltativa, contenente l’audio originale, ma anche informazioni audio ulteriori sui cambiamenti della scena.
Creare una seconda versione dei contenuti video per consentire descrizioni audio estese. Questo riduce le difficoltà associate alla fornitura di descrizioni audio dettagliate all’interno degli spazi tra la finestra di dialogo esistente, mettendo temporaneamente in pausa l’audio e il video nei punti opportuni. Di conseguenza, è possibile fornire una descrizione audio molto più lunga prima che l’azione ricominci. Come nell’esempio precedente, questa funzione è fornita come traccia audio aggiuntiva opzionale per evitare interruzioni agli utenti che non necessitano della descrizione aggiuntiva.
Fornisci una trascrizione testuale che rappresenti un equivalente testuale adatto per gli elementi sonori e visivi del video o dell’animazione. Ciò dovrebbe comprendere, se del caso, un'indicazione su chi sta parlando, una descrizione dell'ambientazione, le espressioni vocali. A seconda della lunghezza, è possibile inserire la trascrizione nella stessa pagina del video o dell’animazione oppure in una pagina separata; se scegli la seconda opzione, includi un collegamento alla trascrizione accanto al video o all’animazione.
I dettagli precisi sulle modalità di creazione di video con descrizione audio vanno oltre lo scopo di questa guida. La creazione di video e descrizioni audio può richiedere parecchio tempo, ma puoi ricorrere ad altri prodotti Adobe per facilitare l’esecuzione di tali attività. Se crei contenuto in Adobe Flash Professional, devi anche creare uno script per richiedere all’utente di scaricare il plug-in appropriato e fornire un testo alternativo attraverso l’elemento <noscript>
.
Questo criterio di successo è identico a Sottotitoli (preregistrati), in quanto riguarda la rimozione degli ostacoli di accessibilità per persone non udenti o ipoudenti, tranne per il fatto che questo criterio di successo è relativo a presentazioni in tempo reale, come i webcast.
Segui le indicazioni fornite sopra per Sottotitoli (preregistrati). Dato che l’elemento multimediale è in tempo reale, tuttavia, i sottotitoli dovranno essere creati il più rapidamente possibile e in modo dinamico. Pertanto, dovresti considerare l’utilizzo di strumenti per la creazione di sottotitoli in tempo reale o di speech-to-text.
Istruzioni dettagliate al riguardo vanno oltre lo scopo di questo documento, ma informazioni utili sono reperibili tramite le risorse seguenti:
Questo criterio di successo è identico a Descrizione audio o elemento multimediale alternativo (preregistrato), tranne per il fatto che gli autori devono fornire una descrizione audio molto più dettagliata per adeguarsi al livello AA.
Segui le indicazioni fornite per Descrizione audio o elemento multimediale alternativo (preregistrato).
Questa linea guida copre i requisiti necessari per supportare le persone che:
potrebbero non essere in grado di accedere alle informazioni presentate da un autore in un standard layout di pagina web colorato bidimensionale, a più colonne
potrebbero utilizzare una visualizzazione solo audio o una alternativa, ad esempio testo di grandi dimensioni e a contrasto elevato.
Molte tecnologie per l’accessibilità utilizzate da persone con disabilità si basano su informazioni strutturali per visualizzare o generare contenuti in modo efficace. Queste possono assumere la forma di titoli, intestazioni di righe e colonne di tabella, e tipi di elenchi. Ad esempio, un’utilità di lettura dello schermo potrebbe consentire a un utente di spostarsi all’interno di una pagina passando da un’intestazione a un’altra. Tuttavia, quando la struttura del contenuto della pagina dipende esclusivamente da uno stile visivo, anziché dal codice HTML sottostante, non sono presenti informazioni strutturali utilizzabili dalle tecnologie per l’accessibilità, il che ne limita la capacità di supportare la navigazione facilitata.
Questo criterio di successo esiste per garantire che tali informazioni strutturali vengano fornite tramite HTML, in modo che i browser e le tecnologie per l’accessibilità possano accedere e sfruttare le informazioni.
AEM facilita la creazione di pagine web utilizzando gli elementi HTML appropriati. Apri i contenuti della pagina nell’editor Rich Text (un componente testo) e usa il menu Formato paragrafo (simbolo di paragrafo) per specificare l’elemento strutturale appropriato (ad esempio paragrafo, intestazione e così via).
L’immagine seguente mostra il testo che è stato formattato come testo paragrafo.
È possibile assicurarsi che alle pagine web sia associata la struttura corretta:
Utilizzando i titoli:
Se le funzioni di accessibilità dell’editor Rich Text sono abilitate (consulta AEM e accessibilità), AEM offre 3 livelli di intestazione di pagina. Puoi utilizzarli per identificare sezioni e sottosezioni di contenuto. Titolo 1 rappresenta il livello di intestazione più alto, Titolo 3 quello più basso. L’amministratore di sistema può configurare il sistema per consentire l’utilizzo di più livelli di intestazione.
L’immagine seguente illustra un esempio dei diversi tipi di intestazioni.
Testo con enfasi:
Utilizza l’elemento o per indicare l’enfasi. Non utilizzare le intestazioni per evidenziare il testo all’interno dei paragrafi.
L’editor Rich Text in un’installazione standard di AEM è configurato per utilizzare:
Sono effettivamente uguali, ma e sono preferibili in quanto rappresentano un html corretto dal punto di vista semantico. Il team di sviluppo può configurare l’editor Rich Text in modo che utilizzi e (anziché e ) durante lo sviluppo dell’istanza di progetto.
Utilizzare gli elenchi: è possibile utilizzare l’HTML per specificare tre diversi tipi di elenchi:
La <ul>
viene utilizzato per non ordinato elenchi (puntati). Le singole voci dell’elenco sono identificate dall’elemento <li>
.
nell’editor Rich Text, utilizza Elenco puntato icona.
L’elemento <ol>
viene utilizzato per gli elenchi numerati. Le singole voci dell’elenco sono identificate dall’elemento <li>
.
Nell’editor Rich Text, utilizza l’icona Elenco numerato.
Per modificare il contenuto esistente in un tipo di elenco specifico, evidenzia il testo appropriato e seleziona il tipo di elenco pertinente. Come nell’esempio precedente che mostra come inserire il testo paragrafo, gli elementi elenco appropriati vengono aggiunti automaticamente all’HTML.
In modalità a tutto schermo, sono visibili le singole icone Elenco puntato ed Elenco numerato. Se non è attiva la modalità a tutto schermo, le due opzioni sono disponibili dietro la singola icona Elenchi.
<dl>
non è supportato dall’editor Rich Text.
Utilizzare le tabelle:
Le tabelle di dati devono essere identificate utilizzando gli elementi della tabella di HTML:
<table>
<tr>
per ogni riga della tabella<th>
per ogni intestazione di riga e colonna<td>
per ogni cella di datiNell’interfaccia classica, le tabelle devono essere create con l’ Tabella componente.
In aggiunta, le tabelle accessibili fanno uso dei seguenti elementi e attributi:
<caption>
viene utilizzato per fornire una didascalia visibile per la tabella. Per impostazione predefinita, le didascalie vengono visualizzate centrate sopra la tabella, ma possono essere posizionate in modo appropriato utilizzando gli stili CSS. La didascalia è associata alla tabella a livello di programmazione, pertanto è un metodo utile per fornire un’introduzione al contenuto.<summary>
aiuta gli utenti non vedenti a comprendere più facilmente le informazioni presentate all’interno di una tabella, fornendo una sintesi di ciò che un utente vedente può vedere. Risulta particolarmente utile quando si utilizzano layout di tabella complessi o non convenzionali (l’attributo non viene visualizzato nel browser, ma viene letto solo alle tecnologie per l’accessibilità).scope
dell’elemento <th>
viene utilizzato per indicare se una cella rappresenta un’intestazione per una particolare riga o colonna. Un approccio simile consiste nell’utilizzare gli attributi header e id in tabelle complesse, dove le celle di dati possono essere associate a una o più intestazioni.Per impostazione predefinita questi elementi e attributi non sono direttamente disponibili, anche se l’amministratore di sistema può aggiungere supporto per questi valori nella finestra di dialogo Proprietà tabella (consulta Aggiunta di supporto per elementi e attributi HTML aggiuntivi).
Quando si aggiunge una Tabella è possibile configurare Proprietà tabella mediante la finestra di dialogo .
È quindi possibile utilizzare la Proprietà cella per scegliere se la cella è una cella di dati o di intestazione e, se si tratta di una cella di intestazione, se si tratta di una riga o di una colonna o entrambe:
Tabelle dati complesse:
In alcuni casi, in presenza di tabelle complesse con due o più livelli di intestazioni, le proprietà della tabella di base potrebbero non essere sufficienti a fornire tutte le informazioni strutturali necessarie. Per questo tipo di tabelle complesse, è necessario creare relazioni dirette tra le intestazioni e le celle correlate mediante gli attributi header e id. Ad esempio, nella tabella seguente le intestazioni e gli ID vengono abbinati per creare un’associazione programmatica per gli utenti di tecnologie per l’accessibilità.
L’attributo id non è disponibile in un’installazione standard. Può essere attivato configurando regole HTML e il serializzatore nell’editor Rich Text.
Nell’interfaccia classica, le tabelle devono essere create con la Tabella componente.
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
Per ottenere questo risultato in AEM è necessario aggiungere il markup direttamente utilizzando la modalità di modifica sorgente.
Questa funzionalità non è immediatamente disponibile in un’installazione standard. Richiede la configurazione dell’editor RTF, delle regole HTML e del serializzatore.
Nel presentare le informazioni, i designer spesso si concentrano sulle caratteristiche di progettazione visiva come il colore, la forma, lo stile del testo o la posizione assoluta o relativa di un elemento di contenuto. Queste possono essere tecniche di progettazione molto potenti per veicolare le informazioni, ma le persone non vedenti o ipovedenti potrebbero non essere in grado di accedere alle informazioni che richiedono l’identificazione visiva di attributi quali posizione, colore o forma.
Allo stesso modo, le informazioni che richiedono di distinguere tra suoni diversi (ad esempio, contenuti parlati da uomini o donne) presenteranno barriere di accessibilità per le persone con disabilità uditive, se non sono incluse in un testo alternativo per il contenuto audio.
Per i requisiti relativi alle alternative al colore, consulta Uso del colore.
Assicurati che anche tutte le informazioni che si basano sulle caratteristiche visive del contenuto della pagina siano presentate in un formato alternativo.
L’utilizzo di termini descrittivi sarà accettabile se questi hanno un significato in un contesto non visivo. Ad esempio, utilizzando sopra e di seguito è generalmente accettabile, in quanto si riferiscono rispettivamente al contenuto prima e dopo un particolare contenuto; questo avrebbe ancora senso quando il contenuto viene parlato ad alta voce.
Questo criterio di successo riguarda in particolare la percezione del colore. Altre forme di percezione sono trattate in Adattabilità (1.3), incluso l’accesso programmatico al colore e ad altre codifiche di presentazione visiva.
Il colore è un modo ovviamente efficace per migliorare il fascino estetico delle pagine web ed è anche utile per trasmettere informazioni. Tuttavia, ci sono una serie di disabilità visive, dalla cecità alla mancanza di visione del colore, che significa che alcune persone non sono in grado di distinguere tra determinati colori. Questo rende la codifica a colori un metodo inaffidabile per fornire informazioni.
Ad esempio, una persona con deficit di visione del colore rosso-verde non sarà in grado di distinguere tra sfumature di verde e tonalità di rosso. Possono vedere entrambi i colori come un terzo colore (ad esempio, marrone), nel qual caso non saranno in grado di distinguere tra rosso, verde e marrone.
Inoltre, il colore non può essere percepito dagli utenti che utilizzano browser di sola lettura, dispositivi di visualizzazione monocromatici o una stampa in bianco e nero della pagina.
Qualunque colore sia utilizzato per trasmettere le informazioni, accertati che queste siano disponibili senza che sia necessario vedere il colore stesso.
Ad esempio, accertati che le informazioni fornite dal colore siano presenti in modo esplicito anche nel testo. L'illustrazione seguente mostra come colore e testo indicano sia la disponibilità di posti a sedere per una performance:
Prestazioni |
Disponibilità |
Martedì 16 marzoth |
POSTI DISPONIBILI |
Mercoledì 17 marzo |
POSTI DISPONIBILI |
Giovedì 18 marzoth |
VENDUTO |
Se il colore viene usato come spunto per fornire informazioni, è necessario dare un ulteriore segnale visivo, ad esempio la modifica dello stile (grassetto, corsivo) o del font. Tutto questo favorisce l’identificazione delle informazioni da parte delle persone con problemi di vista o affette da daltonismo. Tuttavia, non può essere interamente basato su di esso, in quanto non aiuterà le persone che non possono vedere affatto la pagina.
Criterio di successo 1.4.3
Livello AA
Contrasto (minimo): la presentazione visiva di testo e immagini di testo ha un rapporto di contrasto di almeno 4,5:1, fatta eccezione per quanto segue:
Le persone con determinate disabilità visive possono non essere in grado di distinguere tra alcune coppie di colori a basso contrasto. Queste persone possono riscontrare problemi di accessibilità se:
Il testo utilizzato esclusivamente a scopo decorativo è escluso da questo criterio di successo.
Assicurati che il testo contrasti a sufficienza con il relativo sfondo. I rapporti di contrasto dipendono dalle dimensioni e dallo stile del testo:
Per controllare i rapporti di contrasto, utilizza uno strumento di contrasto del colore, come ad esempio Paciello Group Color Contrast Analyser o l’utilità di controllo del contrasto di colore di WebAIM. Questi strumenti consentono di controllare le coppie di colori ed evidenziano eventuali problemi di contrasto.
In alternativa, se non sei preoccupato di specificare l’aspetto della pagina, puoi scegliere di non specificare i colori di sfondo e di testo in primo piano. Non è necessario alcun controllo del contrasto, in quanto il browser dell’utente determinerà i colori del testo e dello sfondo.
Se non è possibile soddisfare i livelli di contrasto consigliati, è necessario fornire un collegamento a una versione alternativa ed equivalente della pagina (che non ha problemi di contrasto del colore) o consentire all’utente di regolare il contrasto della combinazione di colori della pagina in base alle proprie esigenze.
Criterio di successo 1.4.5
Livello AA
Immagini di testo: se le tecnologie utilizzate consentono la presentazione visiva, per trasmettere informazioni viene utilizzato il testo, anziché le immagini di testo, con le seguenti eccezioni:
I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali.
Le immagini di testo vengono spesso utilizzate quando un particolare stile di testo è quello preferenziale (ad esempio un logo) o se il testo è stato generato da un’altra sorgente (ad esempio la scansione di un documento cartaceo). Tuttavia, rispetto al testo presentato in HTML e formattato mediante i CSS, le immagini di testo non hanno la flessibilità necessaria per modificarsi in dimensioni o aspetto nel modo che potrebbe essere necessario per le persone con disabilità visive o difficoltà di lettura.
Se è necessario utilizzare le immagini di testo, utilizza i CSS per sostituire le immagini di testo con testo equivalente in HTML, in modo che il testo sia disponibile in modo personalizzabile. Per visualizzare un esempio di come ottenere questo risultato, consulta C30: Utilizzare CSS per sostituire il testo con immagini di testo e fornire i comandi dell’interfaccia utente per effettuare il passaggio.
Principio 2: Utilizzabile - I componenti dell’interfaccia e la navigazione devono essere operabili.
Criterio di successo 2.2.2
Livello A
Pausa, stop, nascondi: per le informazioni in movimento, lampeggianti, scorrevoli o con aggiornamento automatico, vale quanto segue:
Elementi da sottolineare:
Per alcuni utenti i contenuti in movimento potrebbero essere fonte di distrazione e impedire di concentrarsi su altre parti della pagina. Inoltre, tali contenuti possono risultare di difficile lettura per chi abbia difficoltà a tenere il passo con il testo in movimento.
In base alla natura del contenuto, è possibile applicare uno o più dei seguenti suggerimenti durante la creazione di pagine web che includono contenuti in movimento, con effetti di sfarfallio o lampeggiamento:
Dal momento che qualsiasi contenuto che non soddisfi questo criterio di successo può interferire con la capacità di un utente di utilizzare l’intera pagina, tutto il contenuto della pagina web (utilizzato per soddisfare altri criteri di successo o meno) deve rispondere a questo criterio. Consulta Requisito di conformità 5: Non interferenza.
In alcuni casi i contenuti lampeggianti possono causare crisi epilettiche dovute a fotosensibilità. Questo criterio di successo consente agli utenti a rischio di accedere e utilizzare tutti i contenuti, senza preoccuparsi di eventuali contenuti lampeggianti.
È necessario adottare misure per assicurarsi che siano applicate le seguenti tecniche:
Questo criterio di successo consente a tutti gli utenti, indipendentemente da eventuali particolari disabilità, di identificare rapidamente il contenuto di una pagina web senza leggere la pagina completa. Questo è particolarmente utile quando più pagine web vengono aperte in altrettante schede del browser, in quanto il titolo della pagina è indicato nella scheda e quindi può essere individuato rapidamente.
Quando si crea una nuova pagina HTML in AEM, è possibile specificare il titolo della pagina. Assicurati che il titolo descriva adeguatamente il contenuto della pagina, in modo che i visitatori possano verificare velocemente se è effettivamente pertinente alle loro esigenze.
È inoltre possibile modificare il titolo della pagina quando la si modifica, attraverso: Informazioni pagina > Proprietà.
Per tutti gli utenti, indipendentemente da un’eventuale disabilità, indicare chiaramente la direzione di un collegamento tramite apposito testo è di vitale importanza. Questo aiuta gli utenti a decidere se vogliono effettivamente seguire un collegamento. Per i normovedenti, un testo di collegamento significativo è estremamente utile laddove in una pagina siano presenti più collegamenti (in particolare se la pagina è molto ricca di testo), in quanto fornisce un’indicazione più chiara delle funzionalità della pagina di destinazione. Gli utenti di tecnologie per l’accessibilità, in grado di generare un elenco di tutti i collegamenti su una sola pagina, dal canto loro potranno comprendere più facilmente il testo di collegamento fuori dal contesto.
Soprattutto, fai in modo che lo scopo di un collegamento sia chiaramente descritto all’interno del testo di collegamento.
Esempio di utilizzo non corretto:
Esempio di utilizzo corretto:
I collegamenti dovrebbero essere formulati in modo coerente tra le pagine, in particolare per le barre di navigazione. Ad esempio, se un collegamento a una pagina specifica è denominato Pubblicazioni in una pagina, utilizza lo stesso testo anche nelle altre pagine per garantire la coerenza.
Tuttavia, al momento in cui scriviamo, l'uso dei titoli presenta alcuni problemi:
Pertanto, anche se l’attributo title può essere utilizzato per fornire contesto aggiuntivo a un collegamento, è importante essere consapevoli dei suoi limiti e non utilizzarlo come alternativa al testo di collegamento appropriato.
Se il collegamento è costituito da un’immagine, accertati che il testo alternativo per l’immagine descriva la destinazione del collegamento. Ad esempio, se come collegamento alle pubblicazioni di un autore è impostata l’immagine di una libreria, il testo alternativo dovrebbe riportare Pubblicazioni di John Smith e non Libreria.
In alternativa, se l’ancoraggio del collegamento contiene testo che descrive lo scopo del collegamento in aggiunta all’elemento immagine (e quindi il testo viene visualizzato accanto all’immagine), utilizza un attributo alt vuoto per l’immagine:
<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>
Lo snippet di cui sopra è un'illustrazione, si consiglia di utilizzare il componente Immagine.
Mentre è opportuno fornire un testo di collegamento che identifichi lo scopo del collegamento senza necessità di ulteriore contesto, questo effettivamente non è sempre possibile. I collegamenti senza contesto possono essere utilizzati nei casi seguenti, esempi HTML dei quali sono reperibili in Come soddisfare il criterio di successo 2.4.4.
In alcuni casi, se in una pagina sono presenti diversi collegamenti (ciascuno dei quali fornisce la direzione di un collegamento con dettagli complessi ma necessari), può essere opportuno fornire una versione alternativa della pagina web che visualizzi esattamente lo stesso contenuto ma in cui il testo del collegamento non è così dettagliato.
In alternativa, puoi utilizzare script in modo da fornire una quantità minima di testo nel collegamento, ma consentendo, all’attivazione di un controllo adeguato posizionato nella parte superiore della pagina, l’espansione del testo di collegamento per specificare maggiori dettagli. Un approccio simile consiste nell’utilizzare i CSS per nascondere il collegamento completo agli utenti normovedenti, ma mostrarlo agli utenti di utilità di lettura dello schermo. Questo esula dallo scopo di questo documento, ma ulteriori informazioni su come ottenere questo risultato sono reperibili nella sezione Ulteriori informazioni - Scopo del collegamento (nel contesto) (2.4.4).
Linea guida 3.1 - Leggibile: rendere il testo leggibile e comprensibile.
Lo scopo di questo criterio è fare in modo che il testo e gli altri contenuti linguistici siano resi correttamente. Per gli utenti di utilità di lettura dello schermo, questo garantisce che la pronuncia sia corretta, mentre i browser visivi saranno più propensi a visualizzare certi set di caratteri correttamente.
Per soddisfare questo criterio di successo, la lingua predefinita di una pagina web può essere identificata mediante l’attributo lang
all’interno dell’elemento <html>
nella parte superiore della pagina. Esempio:
Se una pagina è scritta in inglese britannico, l’elemento <html>
dovrebbe riportare: <html lang = “en-gb”>
Una pagina che deve essere resa in inglese americano dovrebbe invece adottare il seguente standard: <html lang = “en-us”>
In AEM, la lingua predefinita della pagina è impostata durante la creazione, ma può anche essere modificata quando apporti cambiamenti alla pagina. Questa funzione è accessibile dal percorso barra laterale > scheda Pagina > Proprietà pagina > scheda Avanzate.
Lo scopo di questo criterio di successo è simile al criterio di successo Lingua della pagina, tranne per le pagine web che contengono contenuti in più lingue su una singola pagina (ad esempio, a causa di citazioni o prestiti lessicali non comuni).
Le pagine in cui viene applicato questo criterio di successo consentono quanto segue:
L’attributo lang
può essere utilizzato per identificare le modifiche nella lingua del contenuto. Ad esempio, una citazione in tedesco (codice ISO 639-1 “de”) può essere mostrata come segue:
<blockquote cite = "John F. Kennedy" lang = "de">
<p>Ich bin ein Berliner</p>
</blockquote>
Gli elementi blockquote non sono supportati in un’istanza standard. Un componente personalizzato può essere sviluppato per supportare la funzione.
Analogamente, il browser può rappresentare correttamente un prestito lessicale non comune o una frase se l’elemento span
viene utilizzato come segue:
<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</span>.</p>
Non è necessario seguire questo criterio di successo per nomi o città in lingue diverse, o quando si utilizzano prestiti lessicali o frasi diventati comuni nella lingua predefinita (come schadenfreude in inglese).
Per aggiungere l’elemento span con una lingua appropriata, è possibile modificare manualmente il codice HTML nella modalità di modifica sorgente dell’editor Rich Text, affinché venga letto come sopra indicato. In alternativa, l’attributo lang
può essere incluso nell’editor Rich Text da un amministratore di sistema (consulta Aggiunta di supporto per elementi e attributi HTML aggiuntivi).
Linea guida 3.3 - Assistenza nell’inserimento: aiutare gli utenti a evitare e correggere gli errori.
Fornire istruzioni per facilitare la compilazione dei moduli è una parte fondamentale delle buone pratiche nell’ambito dell’usabilità dell’interfaccia. Questo è particolarmente utile per le persone con disabilità visive o cognitive, che altrimenti potrebbero avere difficoltà nel comprendere il layout di un modulo e il tipo di dati da fornire in un particolare campo.
In AEM viene aggiunta un’etichetta predefinita quando si aggiunge un componente modulo, ad esempio Campo di testo alla pagina . Questo titolo predefinito dipende dal tipo di componente. È possibile aggiungere un titolo personalizzato nelle schede per titolo e testo della finestra di dialogo di modifica per tale campo. È importante assicurarsi che le etichette aiutino gli utenti a comprendere i dati associati a ciascun componente del modulo.
Il campo Titolo deve essere utilizzato per gli elementi di campo in quanto fornisce un’etichetta che è disponibile per la tecnologia per l’accessibilità. Scrivere semplicemente un’etichetta di testo accanto al campo non è sufficiente.
Per alcuni componenti di modulo è anche possibile nascondere visivamente le etichette utilizzando la casella di selezione Nascondi titolo. Le etichette nascoste in questo modo sono ancora disponibili per le tecnologie per l’accessibilità, ma non vengono visualizzate sullo schermo. Questo può essere un buon approccio in alcune situazioni, ma solitamente è meglio includere un’etichetta visiva ove possibile, in quanto alcuni utenti potrebbero stare guardando una sezione molto piccola dello schermo (un campo alla volta) e necessitare delle etichette per identificare il campo in modo corretto.
Se utilizzi i pulsanti immagine (ad esempio, il componente Pulsante immagine), il campo Titolo nella scheda Titolo e testo della finestra di dialogo di modifica fornisce effettivamente il testo alt per l’immagine, anziché l’etichetta. Nell’esempio seguente, l’immagine con il testo Submit
presenta il testo alt Submit
, aggiunto dal campo Titolo della finestra di dialogo di modifica.
Dove è presente un gruppo di controlli correlati, come un Gruppo pulsanti di scelta, per il gruppo così come per i singoli controlli può essere necessario un titolo. Quando si aggiunge una serie di pulsanti di scelta in AEM, il campo Titolo fornisce questo titolo per il gruppo, mentre i singoli titoli sono specificati alla creazione dei pulsanti di scelta (Elementi).
Tuttavia, non esiste alcuna associazione programmatica tra il titolo del gruppo e i pulsanti di scelta. Per creare tale associazione, gli editor di modelli dovranno eseguire il wrapping del titolo tra i tag necessari fieldset
e legend
, semplicemente modificando il codice sorgente della pagina. In alternativa, un amministratore di sistema può aggiungere il supporto di questi elementi affinché vengano visualizzati nella finestra di dialogo Proprietà campo (consulta Aggiunta di supporto per elementi e attributi HTML aggiuntivi).
Se i dati devono essere immessi in un formato specifico, specificalo chiaramente nel testo dell’etichetta. Ad esempio, se una data deve essere inserita nel formato DD-MM-YYYY
, indicala chiaramente come parte dell’etichetta. Ciò significa che, quando chi usa un’utilità di lettura dello schermo arriva al campo, l’etichetta viene annunciata automaticamente, insieme alle informazioni aggiuntive relative al formato.
Se l’input di un campo modulo è obbligatorio, specificalo integrando la parola “obbligatorio” nell’etichetta. AEM aggiunge un asterisco quando un campo è obbligatorio, ma sarebbe ideale includere la parola required
nell’etichetta stessa (nel campo Titolo della finestra di dialogo di modifica).
Il posizionamento delle etichette è importante anche in quanto aiuta a individuare campi appropriati. Questo è di particolare importanza quando l’utente si trova di fronte a un modulo complesso. Segui la convenzione qui di seguito:
Nei moduli semplici con funzionalità molto limitata, l’etichettatura appropriata di un pulsante Submit
può fungere da etichetta per il campo adiacente (ad esempio Search
). Ciò è utile in situazioni in cui potrebbe risultare difficile trovare spazio per il testo dell’etichetta.