Visualizzazione del contenuto dell'aiuto per la versione :

WCAG 2.0 è costituito da un insieme di linee guida tecnologiche indipendenti e di criteri di successo per contribuire a rendere i contenuti Web accessibili e utilizzabili da persone con disabilità.

Il contenuto viene classificato in base a tre livelli di conformità: Livello A (il più basso), livello AA e livello AAA (il più alto). Brevemente, i livelli sono definiti come segue:

  • Livello A: il sito presenta un livello minimo, basilare, di accessibilità. Per ottenere questo livello, tutti i criteri di successo di livello A devono essere soddisfatti.
  • Livello AA: si tratta di un livello di accessibilità ideale al quale tendere, in cui il sito presenta un livello massimo di accessibilità che lo rende fruibile dal maggior numero di persone nella maggioranza delle situazioni utilizzando la maggior parte delle tecnologie. Per ottenere questo livello, devono essere soddisfatti tutti i criteri di successo dei livelli A e AA.
  • Livello AAA: il sito presenta un livello di accessibilità molto elevato. Per ottenere questo livello, devono essere soddisfatti. tutti i criteri di successo dei livelli A, AA e AAA

Quando si crea il 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.

Nota:

Poiché non è possibile soddisfare tutti i criteri di successo di livello AAA per alcuni tipi di contenuti, non è consigliabile prevedere questo livello di conformità come policy generale.

Nota:

In questo documento stiamo utilizzando:

Principio 1: Percepibilità

Alternative testuali (1.1)

Contenuto non testuale (1.1.1)

  • Criterio di successo 1.1.1
  • Livello A
  • Contenuto non testuale: tutto il contenuto non testuale presentato all'utente dispone di un'alternativa testuale che svolge la finalità equivalente, fatta eccezione per le situazioni elencate di seguito.

Finalità - Contenuto non testuale (1.1.1)

Le informazioni su una pagina Web possono essere fornite in diversi formati non testuali, ad esempio immagini, video, animazioni, tabelle e grafici. Le persone non vedenti o con gravi problemi visivi non sono in grado di vedere il contenuto non testuale, ma possono accedere ai contenuti testuali letti mediante un'utilità per la lettura dello schermo, o presentati in forma tattile da un dispositivo Braille. Così, grazie alla disponibilità di alternative testuali al contenuto in formato grafico, i non vedenti possono accedere a una versione equivalente delle informazioni veicolate.

Un ulteriore vantaggio è rappresentato dal fatto che le alternative testuali consentono l'indicizzazione dei contenuti non testuali da parte dei motori di ricerca.

Come soddisfare il criterio - Contenuto non testuale (1.1.1)

Per gli elementi grafici statici, il requisito fondamentale consiste nel fornire un'alternativa testuale equivalente. Questo può essere fatto nel campo Testo Alt:

Nota:

Alcuni componenti forniti con il prodotto, come Carosello e Presentazione, non offrono la possibilità di aggiungere descrizioni testuali alternative alle immagini. Nell'implementare versioni di questi componenti per l'istanza AEM, il team di sviluppo dovrà configurarli perché supportino l'attributo alt, in modo che gli autori possano aggiungerlo al contenuto (consultateAggiunta di supporto per elementi e attributi HTML aggiuntivi).

  • Interfaccia touch:

    Il campo Testo Alt è disponibile nella finestra di dialogo del componente Immagine:

    Finestra di dialogo di modifica del componente Immagine nell'interfaccia touch, con il campo Testo Alt.

    Oppure come campo Testo alternativo nella finestra di dialogo del componente Immagine - HTL:

    Finestra di dialogo di modifica del componente Immagine nell'interfaccia touch, con il campo Testo Alt.

    AEM aggiunge un Testo Alt alle immagini per impostazione predefinita. Per l’interfaccia touch (componenti HTL), se Testo Alt non è specificato, viene utilizzato il Titolo.

  • Interfaccia classica:

    Il campo Testo Alt è disponibile nella scheda delle proprietà dell'immagine Avanzate della finestra di dialogo del componente Immagine:

    Finestra di dialogo di modifica del componente Immagine nell'interfaccia classica, con il campo Testo Alt.

    AEM aggiunge un Testo Alt alle immagini per impostazione predefinita. Per l'interfaccia classica possono verificarsi due scenari diversi rispetto alla modalità di creazione dell'attributo predefinito (anche se il valore predefinito può non essere sufficiente come alternativa, e molto probabilmente dovrà essere modificato nella scheda delle proprietà Avanzate dell'immagine):

    • File:
      Un’immagine viene caricata dal disco rigido dell’utente. Se aggiungete un componente immagine a una pagina e quindi scegliete un’immagine dal disco rigido, o da un’altra fonte, il valore predefinito per Test Alt è file. Questo valore deve essere modificato nella scheda delle proprietà immagine Avanzate. Ancora una volta, questo valore non viene visualizzato nel campo Testo Alt ma, quando il valore viene modificato, il nuovo valore è visualizzato.
    • Risorsa:
      Un’immagine viene aggiunta dall’archivio delle risorse digitali. Se trascinate un’immagine dall’archivio delle risorse digitali in una pagina Web, i valori Titolo e Testo Alt per quell’immagine saranno derivati dai metadati dell’immagine.

    Nota:

    In entrambi gli scenari di cui sopra, il valore Testo Alt predefinito non è visibile nella scheda Proprietà immagine avanzate. Per modificare il valore predefinito, è sufficiente inserire un nuovo valore nel campo Testo Alt.

    Nota:

    Se l'immagine è puramente decorativa (consultate Creazione di buone alternative di testo), è possibile inserire uno spazio nel campo Testo Alt utilizzando la barra spaziatrice. Questo creerà un attributo alt vuoto, e l'immagine verrà ignorata dalle utilità di lettura dello schermo.

    Nota:

    I componenti utilizzati per l’interfaccia touch, ma originariamente sviluppati per l’interfaccia classica (JSP, non HTL) utilizzano i metodi indicati sopra per impostare i valori predefiniti.

Creazione di buone alternative di testo

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:

  • Le alternative testuali dovrebbero essere sintetiche ma veicolare chiaramente le informazioni essenziali fornite dal contenuto non testuale.
  • È bene evitare descrizioni eccessivamente lunghe (oltre 100 caratteri). Se un testo alternativo richiede una descrizione più dettagliata:
    • fornite una breve descrizione nel testo alternativo
    • e includete una descrizione più lunga in un altro elemento di testo, nella stessa pagina o in una pagina Web separata. Inserite un collegamento a questa descrizione separata rendendo l'immagine un collegamento, o inserendo un collegamento di testo accanto all'immagine.
  • Il testo alternativo non dovrebbe replicare il contenuto fornito sotto forma di testo nella stessa pagina. Ricordate che molte immagini sono illustrazioni di punti già trattati nel testo di una pagina, di conseguenza un'alternativa testuale dettagliata potrebbe già esistere.
  • Se il contenuto non testuale è un collegamento a un'altra pagina o un altro documento e non esiste altro testo che faccia parte dello stesso collegamento, il testo alternativo per l'immagine non dovrà descrivere l'immagine ma dovrà invece indicare la destinazione del collegamento.
  • Se il contenuto non testuale è incluso in un elemento pulsante e non esiste testo che faccia parte dello stesso pulsante, il testo alternativo per l'immagine non dovrà descrivere l'immagine, ma dovrà piuttosto indicare la funzionalità del pulsante.
  • È perfettamente accettabile associare a un'immagine un testo alternativo vuoto (null), ma solo se essa 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.

Il documento Bozza W3C: Tecniche di HTML5 per fornire alternative testuali utili include maggiori dettagli ed esempi di testi alternativi adeguati ai diversi tipi di immagini.

Tipi specifici di contenuto non testuale che richiedono alternative testuali potrebbero includere:

  • Foto illustrative:
    Immagini di persone, oggetti o luoghi. Pensate al ruolo della fotografia nella pagina; un equivalente testuale adeguato sarà probabilmente Foto di [oggetto], ma questo può variare in base al 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, fornite anche una descrizione più dettagliata nel testo utilizzando il campo Descrizione nella scheda delle proprietà Avanzate dell’immagine. In aggiunta, è possibile fornire i dati di origine in formato tabellare altrove nella pagina o nel sito.

    Esempio di grafico. Qui di seguito viene esemplificato l'approccio migliore per fornire un'alternativa.

    Per fornire un'alternativa per questo grafico di esempio, aggiungete all'immagine un testo alt sintetico, e inserirete un testo alternativo completo dopo l’immagine stessa.

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

    Nota:

    Il frammento di codice sopra viene utilizzato solo per illustrare l'ordine. Si consiglia di utilizzare il componente Immagine (anziché il riferimento img src utilizzato sopra).

    In AEM questo può essere fatto utilizzando una combinazione dei campi Alt Text e Descrizione nella finestra di configurazione dell'immagine, come in How to Meet - 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), assicuratevi 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:
    CAPTCHA è l’acronimo di “Completely Automated Public Turing test to tell Computers and Humans Apart” (test di Turing completamente automatizzato per distinguere macchine e persone). Viene utilizzato come controllo di sicurezza nelle pagine Web per distinguere esseri umani da software dannosi, ma che può rappresentare un ostacolo all’accessibilità. Si tratta di immagini che richiedono agli utenti di descrivere ciò che vedono, al fine di superare un test di sicurezza. Fornire un testo alternativo per l’immagine non è ovviamente possibile, quindi sarà necessario prendere in considerazione soluzioni alternative non grafiche.
    Il W3C fornisce una serie di suggerimenti (ciascuno dei quali presenta vantaggi e svantaggi), ad esempio:

    • Puzzle logici
    • L'impiego di output audio anziché di immagini
    • Account a utilizzo limitato e filtri anti-spam.
  • Immagini di sfondo:
    Sono ottenute utilizzando Cascading Style Sheets (CSS), anziché HTML, e non è quindi possibile specificare un valore di testo alternativo. Pertanto le immagini di sfondo non dovrebbero includere informazioni testuali importanti, a meno che non siano incluse anche nel testo della pagina.
    Tuttavia, è importante utilizzare uno sfondo alternativo per i casi in cui l’immagine non possa essere visualizzata.

    Nota:

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

Ulteriori informazioni - Contenuto non testuale (1.1.1)

Elementi multimediali temporizzati (1.2)

L'argomento riguarda i contenuti Web temporizzati. Questi comprendono i contenuti che l'utente può riprodurre (come video, audio e contenuti animati), e che possono essere preregistrati o in streaming.

Solo audio e solo video (preregistrato) (1.2.1)

  • Criterio di successo 1.2.1
  • Livello A
  • Solo audio e solo video (preregistrato): 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:
    • Solo audio preregistrato: viene fornita un’alternativa per gli elementi multimediali temporizzati che presenti le informazioni equivalenti ai contenuti solo audio preregistrati.
    • Solo video preregistrato: viene fornita un’alternativa per gli elementi multimediali temporizzati o una traccia audio che presenti le informazioni equivalenti ai contenuti solo video preregistrati.

Finalità - Solo audio e solo video (preregistrato) (1.2.1)

Problemi di accessibilità per video e audio possono essere riscontrati da:

  • Persone con problemi visivi in assenza di colonna sonora, o quando la colonna sonora non sia sufficiente a informarli di ciò che sta accadendo nel video o nell'animazione;
  • Persone con disabilità uditive o non udenti, non in grado di sentire la colonna sonora;
  • Persone che possono sentire la colonna sonora, ma non comprendono i dialoghi (ad esempio, perché si svolgono in una lingua che non conoscono).

Video o audio possono anche essere non disponibili a persone che utilizzano browser o dispositivi che non supportano la riproduzione di contenuti in formati multimediali specifici, come Adobe Flash.

Fornire queste informazioni in un formato diverso, ad esempio testo (o audio per i video senza audio) può renderle accessibili alle persone impossibilitate ad accedere al contenuto originale.

Come soddisfare il criterio - Solo audio e solo video (preregistrato) (1.2.1)

  • Se il contenuto è una traccia audio preregistrata senza video (come un podcast):
    • Fornite un collegamento immediatamente prima o dopo il contenuto, che rimandi a una trascrizione in formato testo del contenuto audio.
      La trascrizione dovrebbe essere una pagina HTML con un equivalente testuale di tutti i contenuti parlati e non parlati rilevanti, 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:
    • Fornite un collegamento immediatamente prima o dopo il contenuto, che rimandi a una descrizione testuale equivalente delle informazioni fornite nel video.
    • Oppure fornite una descrizione audio equivalente in un formato audio comunemente utilizzato, come MP3.

Nota:

Se il contenuto audio o video è fornito come alternativa a 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, non richiede un'alternativa in quanto le istruzioni testuali già fungono da alternativa al video.

L'inserimento di elementi multimediali, in particolare contenuti Flash, nelle pagine Web AEM è simile a quello 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.

Nota:

Quando si utilizzano elementi multimediali con contenuti informativi, è necessario creare anche collegamenti a contenuti alternativi. Ad esempio, per includere una trascrizione testuale, create una pagina HTML per visualizzare la trascrizione e quindi aggiungete un collegamento accanto o sotto al contenuto audio.

Ulteriori informazioni - Solo audio e solo video (preregistrato) (1.2.1)

Sottotitoli (preregistrati) (1.2.2)

  • Criterio di successo 1.2.2
  • Livello A
  • Sottotitoli (preregistrati) (1.2.2): i sottotitoli vengono forniti per tutti i contenuti audio preregistrati negli elementi multimediali sincronizzati, fatta eccezione per il caso in cui l’elemento multimediale sia alternativo al testo, e chiaramente indicato come tale.

Finalità - Sottotitoli (preregistrati) (1.2.2)

Le persone non udenti o ipoudenti non saranno in grado di 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 nel corso del video. Essi consentono a chi non può udire l'audio di comprendere cosa sta succedendo.

Nota:

I sottotitoli non sono richiesti quando testo o equivalenti non testuali adeguati (che forniscano informazioni direttamente equivalenti) siano disponibili sulla stessa pagina del video o delle animazioni.

Come soddisfare il criterio - Sottotitoli (preregistrati) (1.2.2)

I sottotitoli possono essere:

  • Sottotitoli non codificati: sempre visibili durante la riproduzione del video
  • Sottotitoli codificati: possono essere attivati o disattivati dall'utente

Se possibile, utilizzate i sottotitoli codificati, per 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)). Assicuratevi di includere una nota per indicare agli utenti che per il video sono disponibili sottotitoli.

Se è necessario utilizzare sottotitoli non codificati, inserite il testo nella traccia video. A questo scopo è possibile utilizzare applicazioni di editing video che consentono di sovrapporre i sottotitoli al video.

Ulteriori informazioni - Sottotitoli (preregistrati) (1.2.2)

Descrizione audio o elemento multimediale alternativo (preregistrato) (1.2.3)

  • Criterio di successo 1.2.3
  • Livello A
  • Descrizione audio o elemento multimediale alternativo (preregistrato): viene fornita un’alternativa per gli elementi multimediali temporizzati, o una descrizione audio del contenuto video preregistrato, per gli elementi multimediali sincronizzati, fatta eccezione per il caso in cui l’elemento multimediale sia alternativo al testo, e chiaramente indicato come tale.

Finalità - Descrizione audio o file multimediale alternativo (preregistrato) (1.2.3)

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 la colonna sonora non fornisce informazioni sufficienti per consentire la comprensione di ciò che sta accadendo.

Come soddisfare il criterio - Descrizione audio o elemento multimediale alternativo (preregistrato) (1.2.3)

Gli approcci che è possibile adottare per soddisfare questo criterio di successo sono due. È possibile:

  1. Includere una descrizione audio aggiuntiva per il contenuto video. Questo può essere ottenuto in tre modi:

    • In corrispondenza delle pause nel dialogo, fornite informazioni sui cambiamenti della scena che non sono inclusi nella traccia audio esistente;
    • Includete una nuova traccia audio, aggiuntiva e facoltativa, contenente la colonna sonora originale, ma anche informazioni audio ulteriori sui cambiamenti della scena.
      • Questo consente agli utenti di passare dalla traccia audio esistente (che non contiene una descrizione audio) alla nuova traccia audio (che contiene una descrizione audio), e viceversa.
      • In questo modo si evitano interruzioni per gli utenti che non necessitano della descrizione aggiuntiva.
    • Create una seconda versione del contenuto video per consentire descrizioni audio estese. Questo riduce le difficoltà connesse con la fornitura di descrizioni audio dettagliate all'interno delle pause nel dialogo esistente, interrompendo temporaneamente audio e video nel momenti adeguati. Come risultato, è possibile fornire una descrizione audio molto più lunga prima che l'azione riprenda. Come nell'esempio precedente, l'ideale, in questo caso, è includere una traccia audio facoltativa per evitare interruzioni agli utenti che non necessitano della descrizione aggiuntiva.
  2. Fornite una trascrizione testuale che rappresenti un equivalente testuale adatto degli elementi sonori e visivi del video o animazione. Questi dovrebbero includere, a seconda del caso, l'indicazione di chi sta parlando, una descrizione dell'ambientazione, espressioni vocali. A seconda della lunghezza, è possibile inserire la trascrizione nella stessa pagina del video o dell'animazione, o in una pagina separata; se scegliete la seconda opzione, includete un collegamento alla trascrizione accanto al video o all’animazione.

La procedura specifica di creazione di video con descrizione audio va oltre lo scopo di questa guida. La creazione di video e descrizioni audio può richiedere molto tempo, ma esistono altri prodotti Adobe che possono facilitare l'esecuzione di queste attività. Se il contenuto viene creato in Adobe Flash Professional, dovreste creare anche uno script per richiedere all'utente di scaricare il plug-in adeguato, e fornire un testo alternativo attraverso l'elemento <noscript>.

Ulteriori informazioni - Descrizione audio o elemento multimediale alternativo (preregistrato) (1.2.3)

Sottotitoli (dal vivo) (1.2.4)

  • Criterio di successo 1.2.4
  • Livello AA
  • Sottotitoli (dal vivo): i sottotitoli vengono forniti per tutti i contenuti audio live negli elementi multimediali sincronizzati.

Finalità - Sottotitoli (dal vivo) (1.2.4)

Questo criterio di successo è identico a Sottotitoli (preregistrati), in quanto riguarda la rimozione degli ostacoli di accessibilità per persone non udenti o ipoudenti, fatto salvo il fatto che questo criterio di successo è relativo a presentazioni dal vivo, come i webcast.

Come soddisfare il criterio - Sottotitoli (dal vivo) (1.2.4)

Seguite le indicazioni fornite sopra per Sottotitoli (preregistrati). Dato che l'elemento multimediale è live, tuttavia, i sottotitoli dovranno essere creati il più rapidamente possibile e in modo reattivo. Pertanto, dovreste 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:

Ulteriori informazioni - Sottotitoli (dal vivo) (1.2.4)

Descrizione audio (preregistrato) (1.2.3)

  • Criterio di successo 1.2.5
  • Livello AA
  • Descrizione audio (preregistrato): una descrizione audio viene fornita per tutti i contenuti video preregistrati negli elementi multimediali sincronizzati.

Finalità - Descrizione audio (preregistrato) (1.2.3)

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.

Come soddisfare il criterio - Descrizione audio (preregistrato) (1.2.5)

Ulteriori informazioni - Descrizione audio (preregistrato) (1.2.5)

Adattabilità (1.3)

Questa linea guida riguarda i requisiti necessari per supportare le persone che:

  • potrebbero non essere in grado di accedere alle informazioni come presentate da un autore in un layout standard di pagina Web colorato, bidimensionale, a più colonne
  • potrebbero utilizzare una visualizzazione solo audio, o alternativa, ad esempio testo di grandi dimensioni e a contrasto elevato.

Informazioni e correlazioni (1.3.1)

  • Criterio di successo 1.3.1
  • Livello A
  • Informazioni e correlazioni: informazioni, struttura e relazioni veicolate attraverso la presentazione possono essere determinate programmaticamente o sono disponibili in formato testo.

Finalità - Informazioni e correlazioni (1.3.1)

Molte tecnologie per l'accessibilità utilizzate da persone con disabilità si basano su informazioni strutturali per visualizzare o rappresentare i 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 fare in modo 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.

Come soddisfare il criterio - Informazioni e correlazioni (1.3.1)

AEM facilita la creazione di pagine Web mediante gli elementi HTML adeguati. Aprite il contenuto della pagina nell'editor Rich Text (un componente di testo), e utilizzate il menu Formato per specificare l'elemento strutturale adeguato (ad esempio il paragrafo, l'intestazione e così via).

L'immagine seguente mostra il testo che è stato formattato come testo di paragrafo; la vista codice sorgente utilizzata indica che sono presenti i tag di apertura e chiusura <p> e </p> corretti.

Un esempio dell'elemento Paragrafo visualizzato in modalità di modifica del sorgente (interfaccia classica).

È possibile assicurarsi che alle pagine Web sia associata la struttura corretta:

  • Utilizzando i titoli:

    Purché siano abilitate le caratteristiche di accessibilità dell'editor Rich Text (consultateAEM e accessibilità), AEM offre 3 livelli di titoli (o intestazioni) per le pagine. È possibile utilizzarli per identificare le sezioni e le sottosezioni dei contenuti. Intestazione 1 è il livello di titolo più elevato e Intestazione 3 quello più basso. L'amministratore di sistema può configurare il sistema per consentire l'uso di più livelli di intestazione.

    L'immagine seguente illustra un esempio dei diversi tipi di titolo.

    Titoli da H1 a H3 visualizzati nel selettore a discesa (UI classica).
  • Testo con enfasi:

    Utilizzate l'elemento <strong> o <em> per indicare l'enfasi. Non utilizzate i titoli per evidenziare il testo all'interno di paragrafi.

    • Evidenziate il testo che desiderate mettere in evidenza.
    • Fate clic sull'icona B (per <strong>) oppure I (per <em>) nel pannello Proprietà (assicuratevi che sia selezionato HTML).

    Nota:

    L'editor Rich Text in un'installazione standard di AEM è configurato per utilizzare:

    • <b> per <strong>
    • <i> per <em>

    Si tratta a tutti gli effetti della stessa cosa, ma <strong> e <em> sono preferibili in quanto tag HTML semanticamente corretti. Il team di sviluppo può configurare l'editor Rich Text per utilizzare <strong> e <em> anziché <b> e <i>) nello sviluppo dell'istanza di progetto.

  • Utilizzare gli elenchi: è possibile utilizzare l’HTML per specificare tre diversi tipi di elenchi:

    • L’elemento <ul> viene utilizzato per gli elenchi non ordinati (puntati). Le singole voci dell’elenco sono identificate dall’elemento <li>.
      Nell’editor Rich Text, utilizzate l’icona Elenco puntato.
    • L’elemento <ol> viene utilizzato per gli elenchi numerati. Le singole voci di elenco sono identificate dall’elemento <li>.
      Nell’editor Rich Text utilizzate l’icona Elenco numerato.

    Se desiderate convertire contenuti esistenti in un determinato tipo di elenco, evidenziate il testo desiderato e selezionate il tipo di elenco. Come nel precedente esempio, che mostra come inserire un testo di paragrafo, gli elementi elenco adeguati verranno aggiunti automaticamente al codice HTML; è tuttavia possibile visualizzarli nella vista modifica sorgente.

    Nota:

    <dl> non è supportato dall'editor Rich Text.  

  • Utilizzare le tabelle:

    Le tabelle di dati devono essere identificate utilizzando gli elementi di tabella HTML:

    • un elemento <table>
    • un elemento <tr> per ogni riga della tabella
    • un elemento <th> per ogni intestazione di riga e colonna
    • un elemento <td> per ogni cella di dati

    Nota:

    Le tabelle devono essere realizzate utilizzando il componente Tabella. Le tabelle possono essere create nel componente Testo dell'interfaccia classica; questo componente non è tuttavia disponibile nell’interfaccia touch.

    In aggiunta, le tabelle accessibili fanno uso dei seguenti elementi e attributi:

    • L'elemento <caption> è 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 tramite CSS. La didascalia è associata alla tabella a livello di programmazione, quindi rappresenta un metodo utile per fornire un'introduzione ai contenuti.
    • L'elemento <summary> aiuta i 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. Questo è particolarmente utile quando si utilizzano layout di tabella complessi o non convenzionali (questo attributo non viene visualizzato nel browser, ma viene letto esclusivamente dalle tecnologie per l'accessibilità).
    • L'attributo scope dell'elemento <th> è utilizzato per indicare se una cella rappresenta un'intestazione per una particolare riga o per una particolare 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.

    Nota:

    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 (consultate Aggiunta di supporto per elementi e attributi HTML aggiuntivi).

    Quando si aggiunge una Tabella è possibile configurarne le proprietà utilizzando la finestra di dialogo.

    • Specificate una Didascalia adeguata.
    • È consigliabile rimuovere eventuali valori predefiniti per Larghezza, Altezza, Bordo, Margine celle, Spaziatura celle, in quanto queste proprietà possono essere impostate in un foglio di stile globale.
    La finestra di dialogo Proprietà tabella.

    È quindi possibile utilizzare Proprietà cella per scegliere se la cella è di dati o di intestazione e, in quest'ultimo caso, se si tratta di una riga o di una colonna o entrambe:

    Finestra di dialogo Proprietà cella; impostazione di una riga (generalmente la prima) come riga di intestazione.
  • Tabelle di dati complesse:

    In alcuni casi, in presenza di tabelle complesse con due o più livelli di intestazioni, le proprietà tabella di base potrebbero non essere sufficienti a fornire tutte le informazioni strutturali necessarie. Per questi tipi di tabelle complesse, è necessario creare rapporti diretti tra le intestazioni e le celle collegate, utilizzando gli attributi header e id. Ad esempio, nella tabella che segue questi attributi vengono associati per creare un'associazione programmatica per gli utenti di tecnologie per l'accessibilità.

    Nota:

    L'attributo id non è disponibile in un'installazione standard. Può essere attivato configurando regole HTML e il serializzatore nell'editor Rich Text.

    Nota:

    Le tabelle devono essere realizzate utilizzando il componente Tabella. Le tabelle possono essere create nel componente Testo dell'interfaccia classica; questo componente non è tuttavia disponibile nell’interfaccia touch.

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

    A questo scopo, in AEM è necessario aggiungere il codice direttamente utilizzando la modalità di modifica sorgente.

    Nota:

    Questa funzionalità non è immediatamente disponibile in un'installazione standard. Essa richiede la configurazione dell'editor Rich Text, di regole HTML e del serializzatore.

Ulteriori informazioni - Informazioni e correlazioni (1.3.1)

Caratteristiche sensoriali (1.3.3)

  • Criterio di successo 1.3.3
  • Livello A
  • Caratteristiche sensoriali: le istruzioni fornite per comprendere e intervenire sui contenuti non si basano unicamente su caratteristiche sensoriali dei componenti quali forma, dimensione, ubicazione visiva, orientamento o audio.

Finalità - Caratteristiche sensoriali (1.3.3)

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, nel presentare le informazioni. Anche se queste possono essere tecniche di progettazione molto potenti per veicolare le informazioni, le persone non vedenti o ipovedenti potrebbero non essere in grado di accedere alle informazioni che richiedono l'identificazione visiva di attributi come la posizione, il colore o la forma.

Allo stesso modo, le informazioni che richiedono di distinguere tra suoni diversi (ad esempio, contenuti parlati da voci di sesso maschile o femminile) presenteranno problemi di accessibilità alle persone con disabilità uditive, se non vengono incluse in un testo alternativo per il contenuto audio.

Nota:

Per i requisiti collegati alle alternative ai colori, consultate Utilizzo del colore.

Come soddisfare il criterio - Caratteristiche sensoriali (1.3.3)

Assicuratevi che tutte le informazioni che si basano su caratteristiche visive del contenuto di pagina siano presentate anche in un formato alternativo.

  • Non fate affidamento sulla posizione visiva per fornire informazioni. Ad esempio, se desiderate indirizzare gli utenti a un menu sul lato destro della pagina per l'accesso alle informazioni, non fate riferimento al menu a destra, ma denominate il menu (ad esempio attraverso un'intestazione) e fate riferimento al nome nel testo.
  • Non fate affidamento allo stile del testo (ad esempio, testo in grassetto o in corsivo) come unico modo per trasmettere le informazioni.

Nota:

L'utilizzo di termini descrittivi sarà accettabile se questi hanno un significato in un contesto non visivo. Ad esempio, l'utilizzo dei termini sopra e sotto sarà generalmente accettabile, in quanto si riferiscono rispettivamente al contenuto prima e dopo un particolare elemento di contenuto; questa indicazione continuerà ad avere senso quando il contenuto è parlato.

Ulteriori informazioni - Caratteristiche sensoriali (1.3.3)

Distinguibilità (1.4)

Utilizzo del colore (1.4.1)

  • Criterio di successo 1.4.1
  • Livello A
  • Utilizzo del colore: il colore non è utilizzato come unica modalità visiva per rappresentare le informazioni, indicare un’azione, richiedere una risposta o distinguere un elemento visivo.

Nota:

Questo criterio di successo riguarda in particolare la percezione del colore. Altre forme di percezione sono illustrate in Adattabilità (1.3); compreso l'accesso programmatico al colore e ad altre codifiche presentazione visiva.

Finalità - Utilizzo del colore (1.4.1)

Il colore è un modo efficace per valorizzare l'estetica delle pagine Web ed è anche utile per trasmettere informazioni. Tuttavia, esistono una serie di problemi visivi, dalla cecità al daltonismo, che rendono alcune persone incapaci di distinguere tra alcuni colori. Questo rende la codifica tramite colori un modo inaffidabile per fornire informazioni.

Ad esempio, un soggetto con un deficit della visione dei colori rosso-verde non sarà in grado di distinguere tra sfumature di verde e di rosso. Potrà percepire entrambi i colori come un terzo (ad esempio, marrone), nel qual caso non sarà in grado di distinguere tra rosso, verde e marrone.

Inoltre, il colore non può essere percepito da persone che utilizzano browser di solo testo, dispositivi di visualizzazione in bianco e nero o una stampa in bianco e nero della pagina.

Come soddisfare il criterio - Utilizzo del colore (1.4.1)

Qualunque colore sia utilizzato per trasmettere le informazioni, accertatevi che queste siano disponibili senza che sia necessario vedere il colore stesso.

Ad esempio, assicuratevi che le informazioni fornite in base al colore sia anche comunicate esplicitamente nel testo. L'illustrazione seguente mostra in che modo colore e testo indicano entrambi la disponibilità di posti a sedere per uno spettacolo:

Spettacolo

Disponibilità

Martedì 16 marzo

POSTI DISPONIBILI

Mercoledì 17 marzo

POSTI DISPONIBILI

Giovedì 18 marzo

ESAURITI

Se il colore è usato come mezzo per fornire informazioni, è necessario includere un'indicazione visiva aggiuntiva, ad esempio la modifica dello stile (grassetto, corsivo) o del carattere. Questo aiuta le persone con problemi di vista o daltonismo a identificare le informazioni. Non è un metodo completamente affidabile, tuttavia, in quanto non aiuterà chi non può visualizzare del tutto la pagina.

Ulteriori informazioni - Utilizzo del colore (1.4.1)

Contrasto (minimo) (1.4.3)

  • Criterio di successo 1.4.3
  • Livello AA
  • Contrasto (minimo): la rappresentazione visiva di testo e immagini di testo ha un rapporto di contrasto pari ad almeno 4,5:1, fatta eccezione per i seguenti elementi:
    • Testo di grandi dimensioni: testo di grandi dimensioni e immagini di testo di grandi dimensioni hanno un rapporto di contrasto di almeno 3:1.
    • Incidentale: per il testo o per le immagini di testo che fanno parte di un componente dell'interfaccia inattivo, che sono puramente decorative, non visibili, oppure che fanno parte di un'immagine che contiene altri contenuti visuali significativi, non è previsto alcun requisito di contrasto.
    • Logotipi: per il testo che fa parte di un logo o di un marchio non è previsto alcun requisito minimo di contrasto.

Finalità - Contrasto (minimo) (1.4.3)

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 contrasta poco con il relativo colore di sfondo.
  • La codifica di colore del testo (come testo del collegamento e testo non di collegamento) è importante per distinguere le informazioni.

Nota:

Il testo utilizzato esclusivamente per scopi decorativi è escluso da questo criterio di successo.

Come soddisfare il criterio - Contrasto (minimo) (1.4.3)

Assicuratevi che il testo contrasti a sufficienza con il relativo sfondo. I rapporti di contrasto dipendono dalle dimensioni e dallo stile del testo:

  • Per il testo con dimensioni inferiori a 18 punti (o 14 se in grassetto), il rapporto di contrasto tra testo/immagini di testo e sfondo deve essere pari ad almeno 4,5:1.
  • Per il testo con dimensioni almeno pari a 18 punti (o 14 se in grassetto), il rapporto di contrasto deve essere pari ad almeno 3:1.
  • Se lo sfondo include una texture, lo sfondo intorno al testo dovrà essere ombreggiato in modo da mantenere il rapporto di 4,5:1 o 3:1.

Per controllare i rapporti di contrasto, utilizzate 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 la specificazione dell'aspetto della pagina non è un problema, è possibile scegliere di non specificare colori di sfondo e del testo in primo piano. In questo caso non sarà necessario alcun controllo del contrasto, in quanto sarà il browser dell'utente a determinare i colori del testo e dello sfondo.

Se non è possibile rispettare i livelli di contrasto raccomandati, sarà necessario fornire un collegamento a una versione alternativa ed equivalente della pagina (senza problemi di contrasto di colore), o consentire all'utente di regolare il contrasto dello schema di colore della pagina in base alle proprie esigenze.

Ulteriori informazioni - Contrasto (minimo) (1.4.3)

Immagini di testo (1.4.5)

  • 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:
    • Personalizzabile: l’immagine di testo può essere personalizzata visivamente in base alle esigenze dell’utente;
    • Essenziale: una particolare presentazione del testo è essenziale per il tipo di informazioni veicolate.

Nota:

I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali.

Finalità - Immagini di testo (1.4.5)

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 modificarne dimensioni o aspetto nel modo che potrebbe essere necessario per le persone con disabilità visive o difficoltà di lettura.

Come soddisfare il criterio - Immagini di testo (1.4.5)

Se è necessario utilizzare le immagini di testo, utilizzate i CSS per sostituire le immagini di testo con testo equivalente in HTML, in modo che il testo sia disponibile in un modo personalizzabile. Per un esempio di come ottenere questo risultato, fate riferimento a C30: Utilizzo di CSS per sostituire testo con immagini di testo e fornitura di controlli di interfaccia per eseguire il passaggio.

Ulteriori informazioni - Immagini di testo (1.4.5)

Principio 2: Operabilità

Sospendi, Arresta, Nascondi (2.2.2)

  • Criterio di successo 2.2.2
  • Livello A
  • Sospendi, Arresta, Nascondi: per le informazioni in movimento, lampeggianti, scorrevoli o con aggiornamento automatico, vale quanto segue:
    • Spostamento, lampeggiamento, scorrimento: per qualsiasi informazioni in movimento, lampeggiante o scorrevole che (a) parta automaticamente, (b) duri più di cinque secondi, e (c) sia rappresentata in parallelo con altro contenuto, esiste un meccanismo che consente all’utente di mettere in pausa, interrompere o nascondere l’effetto, a meno che esso sia parte di un’attività per la quale sia essenziale;
    • Aggiornamento automatico: per qualsiasi informazione con aggiornamento automatico che (a) parta automaticamente, e (b) sia rappresentata in parallelo con altro contenuto, esiste un meccanismo che consente all’utente di mettere in pausa, interrompere o nascondere il contenuto, oppure controllare la frequenza dell’aggiornamento, a meno che esso sia parte di un’attività per la quale sia essenziale;

Elementi da sottolineare:

  1. Per i requisiti relativi a contenuti che sfarfallano o lampeggiano, consultate Non progettare contenuti con modalità che possano causare attacchi epilettici (2.3).
  2. 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. Consultate Requisito di conformità 5: Non interferenza.
  3. I contenuti aggiornati periodicamente dal software o trasmessi in streaming all'agente dell'utente non sono tenuti a conservare o presentare le informazioni generate o ricevute tra l'inizio della pausa e la ripresa della presentazione, in quanto questo potrebbe non essere tecnicamente possibile e, in molte situazioni, fuorviante.
  4. Un'animazione che si verifica come parte di una fase di precaricamento, o situazione similare, può essere considerata essenziale se l'interazione non può verificarsi durante quella fase per tutti gli utenti e se la mancata indicazione dell'avanzamento potrebbe confondere gli utenti o far loro pensare che il contenuto sia bloccato o guasto.

Finalità - Sospendi, Arresta, Nascondi (2.2.2)

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.

Come soddisfare il criterio - Sospendi, Arresta, Nascondi (2.2.2)

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:

  • Fornite un mezzo per mettere in pausa lo scorrimento dei contenuti, in modo che gli utenti abbiano il tempo di leggerli. Ad esempio, un componente tipo telescrivente, o testo con aggiornamento automatico.
  • Assicuratevi che il contenuto smetta di lampeggiare dopo cinque secondi.
  • Utilizzate tecnologie appropriate per visualizzare contenuto lampeggiante che possa essere disabilitato dal browser. Ad esempio, file Graphics Interchange Format (GIF) o Animated Portable Network Graphics (APNG).
  • Includete un controllo di modulo nella pagina Web per consentire all'utente di disattivare tutti i contenuti lampeggianti nella pagina.
  • Se nessuno degli accorgimenti di cui sopra sia praticabile, fornite un collegamento a una pagina contenente tutti i contenuti, ma senza effetti di lampeggiamento.

Ulteriori informazioni - Sospendi, Arresta, Nascondi (2.2.2)

Attacchi epilettici (2.3)

Tre lampeggiamenti o sotto la soglia (2.3.1)

  • Criterio di successo 2.3.1
  • Livello A
  • Tre lampeggiamenti o sotto la soglia: le pagine Web non devono contenere alcun elemento che lampeggi per più di tre volte al secondo, oppure il lampeggiamento deve essere inferiore alle soglie di lampeggiamento generale e rosso.

Nota:

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. Consultate Requisito di conformità 5: Non interferenza.

Finalità - Tre lampeggiamenti o sotto la soglia (2.3.1)

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.

Come soddisfare il criterio - Tre lampeggiamenti o sotto la soglia (2.3.1)

È consigliabile adottare misure per assicurare che siano applicate le seguenti tecniche:

  • Assicuratevi che i componenti non lampeggino per più di tre volte al secondo;
  • Se la condizione di cui sopra non può essere soddisfatta, visualizzate il contenuto lampeggiante all'interno di una piccola area di sicurezza in pixel sullo schermo. Quest'area è calcolata utilizzando una formula complessa, illustrata in G176: Mantenere l'area lampeggiante sufficientemente piccola, di conseguenza questa tecnica dovrebbe essere applicata solo se il contenuto lampeggiante è assolutamente necessario.

Ulteriori informazioni - Tre lampeggiamenti o sotto la soglia (2.3.1)

Pagina con titolo (2.4.2)

  • Criterio di successo 2.4.2
  • Livello A
  • Pagina con titolo: alle pagine Web sono associati titoli che ne descrivono argomento o finalità.

Finalità - Pagina con titolo (2.4.2)

Questo criterio di successo aiuta tutti gli utenti, indipendentemente da eventuali particolari disabilità, a 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.

Come soddisfare il criterio - Pagina con titolo (2.4.2)

Quando si crea una nuova pagina HTML in AEM, è possibile specificare il titolo della pagina. Assicuratevi 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:

  • Interfaccia touch
    • Informazioni pagina - Proprietà
  • Interfaccia classica
    • Barra laterale - scheda Pagina - Proprietà pagina...

Ulteriori informazioni - Pagina con titolo (2.4.2)

Scopo del collegamento (nel contesto) (2.4.4)

  • Criterio di successo 2.4.4
  • Livello A
  • Scopo del collegamento (nel contesto): lo scopo di ogni collegamento può essere determinato esclusivamente dal testo del collegamento, oppure dal testo del collegamento insieme al suo contesto, determinato a livello di programmazione, a meno che lo scopo del collegamento possa risultare ambiguo per gli utenti in generale.

Finalità - Scopo del collegamento (nel contesto) (2.4.4)

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 del 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 del collegamento fuori dal contesto.

Come soddisfare il criterio - Scopo del collegamento (nel contesto) (2.4.4)

Soprattutto, fate in modo che lo scopo di un collegamento sia chiaramente descritto all'interno del testo del collegamento.

  • Esempio di utilizzo non corretto:
    • Testo: per i dettagli sui nostri corsi serali per l’autunno 2010, fare clic qui.
    • Motivo: non indica in modo chiaro e senza ambiguità la destinazione.
  • Esempio di utilizzo corretto:
    • Testo: I nostri corsi serali per l'autunno 2010 - Dettagli.
    • Motivo: modificando leggermente il testo e la posizione dell’elemento di collegamento è possibile migliorare il testo del collegamento:

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, utilizzate lo stesso testo anche nelle altre pagine, per garantire la coerenza.

Al momento in cui scriviamo, tuttavia, l'uso dei titoli pone alcuni problemi:

  • Il testo contenuto all'interno dell'attributo title è generalmente disponibile solo a chi utilizza un mouse, sotto forma di pop-up con la descrizione comando, e non è accessibile utilizzando la tastiera.
  • Le utilità di lettura dello schermo possono leggere gli attributi title, ma questa funzionalità potrebbe non essere abilitata per impostazione predefinita; è quindi possibile che gli utenti non siano a conoscenza dell'esistenza di un attributo title.
  • È difficile modificare l'aspetto del testo del titolo, il che significa che leggerlo può risultare difficile o impossibile per alcuni utenti.

Così, mentre l'attributo title può essere utilizzato per fornire contesto aggiuntivo per un collegamento, è importante essere consapevoli dei suoi limiti e non utilizzarlo come alternativa a un testo collegamento adeguato.

Se il collegamento è costituito da un'immagine, accertatevi 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 nell'ancoraggio del collegamento è incluso testo che descrive lo scopo del collegamento in aggiunta all'elemento immagine (e, quindi, il testo viene visualizzato a fianco dell'immagine), utilizzate un attributo alt vuoto per l'immagine:

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>

Nota:

Il frammento di codice sopra ha esclusivamente scopo illustrativo; si consiglia di utilizzare il componente Immagine.

Mentre è opportuno fornire un testo del 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.

  • Qualora il testo del collegamento sia parte di un elenco di collegamenti strettamente correlati e la voce di elenco che racchiude il collegamento fornisca contesto sufficiente.
  • Laddove lo scopo di un collegamento possa essere chiaramente identificato dal testo di paragrafo che lo precede (non che lo segue).
  • Se il collegamento è contenuto all'interno di una tabella di dati, e quindi la finalità può essere chiaramente identificata a partire dalle intestazioni associate.
  • Se un elenco di collegamenti è contenuto all'interno di un insieme di intestazioni e l'intestazione fornisce il contesto adatto.
  • Se un elenco di collegamenti è contenuto all'interno di un collegamento nidificato e la voce dell'elenco principale rispetto al collegamento nidificato fornisce il contesto adatto.

In alcuni casi, laddove in una pagina siano presenti diversi collegamenti (ciascuno dei quali fornisca la direzione di un collegamento con dettagli complessi ma necessari), può essere opportuno prevedere una versione alternativa della pagina Web che mostri lo stesso contenuto, ma in cui il testo dei collegamenti non sia così dettagliato.

In alternativa, potete 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 del 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 dalla portata 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).

Ulteriori informazioni - Scopo del collegamento (nel contesto) (2.4.4)

Principio 3: Comprensibilità

Rendere il testo leggibile e comprensibile (3.1)

Lingua della pagina (3.1.1)

  • Criterio di successo 3.1.1
  • Livello A
  • Lingua della pagina: la lingua predefinita di ogni pagina Web può essere determinata a livello di programmazione.

Finalità - Lingua della pagina (3.1.1)

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.

Come soddisfare il criterio - Lingua della pagina (3.1.1)

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. Ad esempio:

  • Se una pagina è scritta in inglese britannico, l’elemento <html> dovrebbe riportare:
        <html lang = "en-gb">
  • Mentre una pagina che deve essere resa in inglese americano dovrebbe adottare il seguente standard:
        <html lang = "en-us">

In AEM, la lingua predefinita della pagina viene impostata alla sua creazione, ma può anche essere modificata successivamente, tramite:

  • Interfaccia touch
    • Informazioni pagina - Proprietà - scheda Avanzate
  • Interfaccia classica
    • Barra laterale - scheda Pagina - Proprietà pagina... - scheda Avanzate

Ulteriori informazioni - Lingua della pagina (3.1.1)

Lingua delle parti (3.1.2)

  • Criterio di successo 3.1.2
  • Livello AA
  • Lingua delle parti: la lingua di ogni passaggio o frase nel contenuto può essere determinata a livello di programmazione, fatta eccezione per nomi propri, termini tecnici, parole in lingue indeterminate e parole o frasi che sono diventate parte del gergo del testo immediatamente circostante.

Finalità - Lingua delle parti (3.1.2)

Lo scopo di questo criterio di successo è simile a quello del criterio Lingua della pagina, ma si applica a pagine Web con contenuti multilingue all'interno di una singola pagina (ad esempio, a causa dei citazioni o prestiti lessicali non comuni).

Le pagine che applicano questo criterio di successo consentono:

  • Software di transizione Braille per inserire caratteri accentati.
  • Pronuncia corretta da parte dell'utilità di lettura dello schermo di quelle parole che non siano nella lingua predefinita.
  • Strumenti di traduzione come Google Translate per tradurre correttamente il contenuto da una lingua all'altra.

Come soddisfare il criterio - Lingua delle parti (3.1.2)

L'attributo lang può essere utilizzato per identificare i cambiamenti nella lingua dei contenuti. Ad esempio, una citazione in tedesco (codice ISO 639-1 "de") potrà essere indicata come segue:

<blockquote cite = "John F. Kennedy" lang = "de"> 
     <p>Ich bin ein Berliner</p>
 </blockquote>

Nota:

I blockquote non sono supportati in un'istanza out-of-the-box. Un componente personalizzato può essere sviluppato per supportare la funzione.

Analogamente, il browser può rappresentare correttamente un prestito lessicale non comune 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>

Nota:

Non è necessario seguire questo criterio per nomi o città in lingue diverse, o quando si utilizzano prestiti lessicali che sono diventati comuni nella lingua predefinita (come schadenfreude in inglese).

Per aggiungere l’elemento span, con una lingua appropriata, è possibile modificare manualmente il codice HTML in modalità di modifica sorgente nell’editor Rich Text, in modo che riporti quando indicato sopra. In alternativa, l’amministratore di sistema può includere l’attributo lang nell’editor Rich Text (consultate Aggiunta di supporto per elementi e attributi HTML aggiuntivi).

Ulteriori informazioni - Lingua delle parti (3.1.2)

Aiutare gli utenti a evitare e correggere gli errori (3.3)

Etichette o istruzioni (3.3.2)

  • Criterio di successo 3.3.2
  • Livello A
  • Etichette o istruzioni: etichette o istruzioni vengono fornite quando il contenuto richiede l’input dell’utente.

Finalità - Etichette o istruzioni (3.3.2)

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 un'etichetta predefinita viene aggiunta quando si aggiunge un componente di modulo, come ad esempio un Campo testo, alla pagina. Questo titolo predefinito dipende dal tipo di componente; è possibile aggiungere un titolo personalizzato nella scheda Titolo e testo della finestra di dialogo di modifica per quel campo. È importante fare in modo che le etichette consentano agli utenti di comprendere i dati associati a ciascun componente del modulo.

Scheda Titolo e testo (finestra di dialogo di modifica); è stato aggiunta la "Descrizione" del titolo.

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.

Pulsanti immagine

Se si utilizzano i pulsanti immagine (ad esempio, il componente Pulsante Immagine) il campo Titolo nella scheda Titolo e testo della finestra di dialogo di modifica fornisce in realtà il testo alternativo per l'immagine, piuttosto che l'etichetta. Così, nell'esempio qui sotto, l'immagine con il testo Invia ha come testo alternativo Invia, aggiunto utilizzando il campo Titolo nella finestra di dialogo di modifica.

Pulsante Immagine con il Testo Alt impostato nel campo Titolo (finestra di dialogo di modifica).

Gruppi di campi modulo

Dove è presente un gruppo di controlli correlati, come un Gruppo pulsanti di scelta, per il gruppo così come 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).

Aggiunta di elementi al gruppo pulsanti di scelta. Il titolo del gruppo è "Contatto tramite", definito nel campo Titolo.

Tuttavia, non esiste alcuna associazione a livello di programmazione tra il titolo del gruppo e i pulsanti di scelta. Gli editor modelli dovrebbero includere il titolo nei necessari tag fieldset e legend per creare questa associazione; e questo può avvenire solo modificando il codice sorgente della pagina. In alternativa, un amministratore di sistema può aggiungere il supporto per questi elementi in modo che siano visualizzati nella finestra di dialogo Proprietà campo (consultate Aggiunta di supporto per elementi e attributi HTML aggiuntivi).

Considerazioni aggiuntive relative ai moduli

Se i dati devono essere immessi in un formato specifico, indicatelo chiaramente nel testo dell'etichetta. Ad esempio, se una data deve essere inserita nel formato GG-MM-AAAA, indicatelo in modo specifico come parte dell'etichetta. Questo significa che, quando gli utenti di utilità di lettura del testo arrivano sul campo, l'etichetta viene letta automaticamente, insieme con le informazioni aggiuntive sul formato.

Se l'input per un campo di modulo è obbligatorio, specificatela utilizzando la parola "obbligatorio" come parte dell'etichetta. AEM aggiunge un asterisco quando un campo è obbligatorio, ma sarebbe ideale includere la parola obbligatorio nell'etichetta (nel campo Titolo nella finestra di modifica).

Aggiunta di informazioni ulteriori (la parola "obbligatorio") per gli utenti di utilità di lettura dello schermo, nel campo "Titolo".

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. Seguite la convenzione qui di seguito:

  • Caselle di selezione o pulsanti di scelta:
    Le etichette sono posizionate immediatamente a destra del campo.
  • Tutti gli altri componenti del modulo (ad esempio caselle di testo, caselle combinate):
    Le etichette sono posizionate immediatamente sopra o a sinistra del campo.

Nei moduli semplici, con funzionalità molto limitata, un'etichetta adeguata aggiunta a un pulsante Invia può fungere da etichetta per il campo adiacente (ad esempio Ricerca). Questo è utile in situazioni in cui trovare spazio per il testo dell'etichetta può essere difficoltoso.

Ulteriori informazioni - Etichette o istruzioni (3.3.2)

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online