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