CSS: soluzioni accessibili per nascondere gli elementi

Short link

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);
}