Accessibilità web:
Mostrare e nascondere elementi
Solo su Screen Reader

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 45

Data di pubblicazione: 31 Gennaio 2023

Cosa sono sr-only e aria-hidden?

Sono 2 metodi pratici per migliorare l’usabilità e quindi l’accessibilità per quante più persone possibili. Sono utili soprattutto per chi usa lo Screen Reader (link di approfondimento nei commenti).

Perché usarli?

Non sempre è possibile progettare un sistema che possa andare bene per chiunque: ci sono icone o maggiori spiegazioni da fornire che hanno bisogno di soluzioni alternative.

Metodo 1: classe css sr-only

sr-only è una classe CSS che:

  • mostra un elemento SOLO su Screen Reader;
  • quindi non è visibile agli occhi.

Si può usare in questi casi:

  • per rispettare la sequenza dei titoli H;
  • per migliorare la qualità dei link (ad esempio nelle card con link automatici).

Gli elementi sono nel DOM

Esempio di utilizzo della classe sr-only

Nelle slide sono visibili le proprietà della classe css (rimando anche al link https://lnkd.in/dDTHYJpf) e anche l’esempio pratico di un titolo H2 all’inizio del footer.

Metodo 2: aria-hidden=”true”

aria-hidden=”true” è un tag ARIA che:

  • nasconde un elemento SOLO su Screen Reader;
  • quindi è visibile agli occhi.

Si può usare in questi casi:

  • per togliere il rumore dallo Screen Reader, cioè annunci e ripetizioni che rovinano l’usabilità (ad esempio per le icone);
  • per migliorare la qualità dei link (ad esempio nelle card con link automatici).

Gli elementi sono nel DOM

Esempio di utilizzo del tag aria-hidden

Nelle slide è visibile l’esempio pratico di un’icona SVG che viene nascosta allo Screen Reader, così viene annunciato solo il testo interno.

Metodo 3: combinazione dei 2 metodi

Unendo i vantaggi di sr-only e aria-hidden si possono migliorare alcune soluzioni fornendo un’ottima esperienza utente.

Esempio di combinazione

Nella slide è visibile l’esempio di un bottone avanti/indietro, con freccia e testo di spiegazione. Nel frontend voglio vedere solo la freccia che però è incomprensibile allo Screen Reader. Basta fare così:

  • freccia con aria-hidden=”true”
  • testo con classe css sr-only