Nascondere correttamente il contenuto
Rendere il contenuto invisibile (nascosto visivamente)
Se un elemento nella pagina:
- è un elemento interattivo ma deve essere reso invisibile per poter essere tematizzato (ad esempio un link, una casella di controllo, un pulsante di opzione o un controllo di modulo con stili personalizzati),
- è un’intestazione o un’etichetta per qualcosa la cui funzione è già chiara (e quindi l’intestazione/l’etichetta non deve essere mostrata agli utenti vedenti; per esempio, l’etichetta di una sezione o di un campo di modulo),
- non deve essere visibile agli utenti vedenti, ma deve essere accessibile agli utenti di screen reader,
... allora dovresti renderlo invisibile (nascosto visivamente).
Puoi farlo:
assegnando all’elemento la classe visually-hidden,
in Drupal 8 impostando i campi nella pagina di gestione della visualizzazione dei sottotipi di entità (ad esempio il campo “Tag” nel tipo di contenuto Articolo) in modo che l’etichetta del campo sia “- Visually Hidden -”,
utilizzando CSS per posizionarlo fuori dall’area visibile della pagina, oppure
usando il seguente CSS:
position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; word-wrap: normal;
Esempio:
Nascondere l’intestazione dei messaggi di errore, avviso e stato.
Motivazione:
Nella maggior parte dei temi, i messaggi di stato vengono mostrati in modo evidente con un riquadro colorato, quindi attirano l’attenzione degli utenti vedenti. Tuttavia, secondo la sezione 1.3.3 delle WCAG 2.0, la comprensione e l’uso dei contenuti non devono basarsi solo su caratteristiche sensoriali come forma, dimensione, disposizione visiva o orientamento.
Senza un’intestazione che indichi di che tipo di messaggio si tratta, gli utenti di screen reader potrebbero confondersi.
La maggior parte degli screen reader può navigare una pagina attraverso le intestazioni. Aggiungere un’intestazione ai messaggi li rende più facilmente individuabili.
Rendere il contenuto invisibile finché non riceve il focus tramite tastiera
Se un elemento nella pagina:
- è un link per aiutare gli utenti a passare direttamente al contenuto principale o alla navigazione principale,
- è un’alternativa ad altri elementi utilizzabili solo con il mouse, oppure
- non dovrebbe essere visibile agli utenti vedenti, a meno che non stiano navigando la pagina con la tastiera,
... allora dovresti renderlo invisibile finché non riceve il focus tramite tastiera.
Puoi farlo:
- assegnando all’elemento le classi visually-hidden e focusable, oppure
- utilizzando questo CSS:
css_selector_for_my_element {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
width: auto;
}
Dove css_selector_for_my_element è il selettore dell’elemento che vuoi rendere invisibile finché non riceve il focus tramite tastiera.
Esempio:
Il link “Salta al contenuto principale” nella parte superiore di ogni pagina nei temi di base.
Motivazione:
Gli utenti che usano solo la tastiera o uno screen reader vogliono poter raggiungere rapidamente il contenuto principale della pagina.
Per rispettare lo standard WCAG 2.0 sezione 2.4.1, devi fornire un modo per saltare blocchi di contenuto che si ripetono su piĂą pagine.
Nascondere completamente il contenuto per tutti gli utenti
Se un elemento nella pagina:
- non deve essere mostrato finché un evento JavaScript non lo rende visibile,
- non è rilevante per utenti vedenti o utenti di screen reader nel contesto,
- contiene valori letti/scritti da JavaScript ma non deve mai essere mostrato direttamente, oppure
- in generale non deve essere visibile né agli utenti vedenti né agli utenti di screen reader,
... allora dovresti nasconderlo completamente a tutti gli utenti.
Puoi farlo:
- assegnando all’elemento la classe hidden (in D8),
- se è un campo in un sottotipo di entità , impostando il suo formato su “- Nascosto -” nella pagina di gestione della visualizzazione di quel sottotipo,
- se è un’etichetta di campo in un sottotipo di entità , impostando la visualizzazione dell’etichetta su “- Nascosto -” nella pagina di gestione della visualizzazione di quel sottotipo, oppure
- usando CSS con display: none;
Esempio:
Nascondere l’area di anteprima del modulo colore finché non viene avviato JavaScript:
/* color.css (Drupal 7 e 8) */
#preview {
display: none;
}
Motivazione:
L’anteprima non funziona se JavaScript è disattivato, quindi non serve mostrarla.
Uso improprio
Un errore comune con “display:none” è rimuovere un’etichetta o un’intestazione di modulo per modificare l’aspetto della pagina. Tuttavia, questo rende l’elemento del modulo inutilizzabile per gli utenti di screen reader!
Ad esempio, se rimuovi un’etichetta di campo modulo con “display:none”, un utente di screen reader potrebbe sentire: “Ho un campo di testo obbligatorio, ma non so a cosa serve”. In questa situazione è più appropriato rendere il contenuto invisibile (nascosto visivamente).
Rendere il contenuto invisibile agli screen reader
Se un elemento nella pagina:
- risulta confuso se letto da solo, oppure
- deve essere visibile solo agli utenti vedenti,
... allora dovresti renderlo invisibile agli screen reader.
Puoi farlo:
- aggiungendo all’elemento l’attributo aria-hidden="true"
Esempio:
Un controllo per rimuovere un filtro di ricerca mostra “x” solo agli utenti vedenti E fornisce istruzioni testuali nascoste visivamente per gli utenti di screen reader:
Currently filtering by: <a href="...">Modulo <span class="visually-hidden">Clicca per rimuovere questo filtro.</span> <span aria-hidden="true">x</span></a>
Motivazione:
Esiste giĂ un testo alternativo accessibile.
Sentire la “x” dopo aver ascoltato il testo alternativo può confondere gli utenti di screen reader.
Uso improprio
Creare contenuti invisibili agli screen reader significa che gli utenti che li utilizzano non potranno percepirli o interagirvi. Per rispettare la sezione 1.1 delle WCAG 2.0, devi fornire contenuti alternativi accessibili, altrimenti gli utenti di tecnologie assistive non potranno utilizzarli.