Categorie
Articolo

Nascondere contenuto per l’accessibilità con i lettori di schermo (screen reader)

Se state progettando di rendere un sito accessibile anche per chi fa utilizzo di lettori di schermo (screen reader in inglese) può essere necessario aggiunge del testo per descrivere alcune funzioni senza che però venga visualizzato normalmente nello schermo, renderlo quindi accessibile solamente per uno screen reader.

Soluzioni che funzionano

ARIA Labels

Gli aria-label sono utilizzati per aggiungere un contenuto descrittivo non visibile nello schermo ad un elemento, proprio come l’attributo alt aggiunge una descrizione alle immagini che subentra nel caso l’immagine non sia disponibile. La differenza è che aria-label può essere utilizzato anche su elementi che non sono immagini.

<div aria-label="Questo contenuto viene letto da uno screen reader">
  <p aria-hidden="true">Questo non viene letto da uno screen reader</p>
</div>

Aggiunge l’attributo aria-hidden nasconde il testo da un lettore di schermo.

Position + Clip + Collapse

.screen-reader {
  position: absolute !important; /* Fuori dal flusso DOM */
  height: 1px; width: 1px; /* Quasi completamente collassato */
  overflow: hidden; /* L'overflow è nascosto */
  clip: rect(1px 1px 1px 1px); /* Per Internet Explorer non devono esserci virgole */
  clip: rect(1px, 1px, 1px, 1px); /* Tutti gli altri browsers */
}

Utilizzando il posizionamento assoluto, togliamo l’elemento dal flow della pagina in modo che non comprometta il layout. Con l’altezza di 1 pixel, l’elemento sarà ancora visibile ai lettori di schermo. La regola clip rimuove ogni traccia visibile dell’elemento dalla pagina.

Ci sono classi CSS ancora più robuste utilizzate per ottenere questo risultato, come quella in uso da WordPress, che prende in considerazione anche il caso in cui l’elemento fosse messo a fuoco (focus).

E’ consigliato utilizzare !important quando si usa una classe per nascondere qualcosa, non si può mai sapere che stile abbia l’elemento che stiamo cercando di nascondere e non ha nemmeno senso pensarci.

Posizione

.screen-reader {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Questa è un’alternativa meno potente rispetto a quella che abbiamo appena visto dato che sfrutta solamente la posizione.

Indentazione

.screen-reader {
    text-indent: -9999px;
}

Questa classe indenterà il testo di 9999px a sinistra, ma il valore non è importante, basta che sia fuori dal layout della vostra pagina.

Questa soluzione può funzionare per blocchi di testo ma non funziona per lingue scritte da destra a sinistra o semplicemente per altri testi che hanno un text-indent già specificato.

Cosa non funziona

Visibility e Display

Utilizzare visibility: hidden e/o display: none nasconderà il testo da tutti gli utenti. Il testo è rimosso dal flow della pagina e ignorato dai lettori di schermo. Non usare questo CSS se vuoi che il testo sia accessibile da uno screen reader.

Altezza e Larghezza

Un elemento senza altezza e larghezza è rimosso dal flow della pagina e ignorato dalla maggior parte di screen reader. Impostare gli attributi height e width dall’HTML potrebbe portare allo stesso risultato. Non impostare le dimensioni dei componenti a 0 pixel se vuoi siano accessibili da uno screen reader.

Alternativa JavaScript

Tutto quello che abbiamo appena visto è applicabile solamente se abbiamo il controllo delle classi, ma la situazione si complica quando alcune librerie JavaScript applicano le loro classi.

Per esempio jQuery, dopo aver eseguito .slideUp(), aggiunge la regola display: none al CSS in linea.

Una soluzione può essere quella di aggiungere la classe accessibile dopo che jQuery ha eseguito lo sliding per poi rimuoverla.

var $bottone = $('#bottone');
var $testo = $('#testo');
var visibile = true;

$bottone.click(function() {
  if (visibile) {
    $testo.slideUp('fast',function() {
      $testo.addClass('screen-reader').slideDown(0);
    });
  } else {
    $testo.slideUp(0,function() {
      $testo.removeClass('screen-reader').slideDown('fast');
    });
  }
  visibile = !visibile;
});

Non usare il ‘display: none;’ dove non dovresti

Labels

Potrebbe venirvi l’idea di rimpiazzare un’etichetta (<label>) con un placeholder, ma non rimuovete o impostate display:none sull’etichetta! Questo potrebbe impedire ad alcune persone di utilizzare il form. Se avete intenzione di usare un placeholder per rimpiazzare un’etichetta, fatelo in modo accessibile, aggiungendo classi appropriate all’etichetta.

media query

Se qualcuno sta utilizzando uno screen reader in una pagina e quella pagina ha delle media query per gestire le varie dimensioni dello schermo. Se queste media query utilizzano display: none per nascondere alcuni elementi, questo potrebbe essere un problema! A meno che non siano cose solamente estetiche o non rilevanti, dovresti assicurarti che siano sempre accessibili.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *