Con i CSS possiamo nascondere gli elementi in modo accessibile.
Sostanzialmente si tratta di evitare di usare le proprietà display e visibility in quanto creano problemi di lettura negli screen reader. Anche se tecnicamente sugli elementi possiamo usare gli attributi WAI-ARIA, non ci è dato di sapere se un utente usi un lettore di schermo obsoleto che non supporta correttamente questo standard.
La prima soluzione, retrocompatibile, consiste nel posizionare l'elemento fuori dalla viewport:
.hidden {
position: absolute;
top: -9999em;
}
Quindi per rendere nuovamente visibile l'elemento avremo:
.visible {
position: static;
}
La seconda soluzione consiste nell'azzerare le dimensioni dell'elemento:
.hidden {
width: 0px;
height: 0px;
overflow: hidden;
}
Quindi per rendere nuovamente visibile l'elemento avremo:
.visible {
width: auto;
height: auto;
}
Una variante più moderna di quest'ultima soluzione è la seguente:
.hidden {
transform: scale(0);
overflow: hidden;
}
Quindi avremo:
.visible {
transform: scale(1);
}