Mostrare e nascondere elementi solo su Screen Reader

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

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.

È 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:
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.

È 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
Nelle slide è visibile l’esempio pratico di un’icona SVG che viene nascosta allo Screen Reader, così viene annunciato solo il testo interno.

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

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

Ci sono altri metodi e soluzioni, però penso che questi siano pratici e comodi da aggiungere in fase di sviluppo.