CSS: come nascondere gli elementi in modo accessibile per le tecnologie assistive

In questo articolo vedremo come è possibile nascondere gli elementi in modo accessibile con i CSS.

Non possiamo modificare proprietà come display o visibility in quanto tali modifiche influenzerebbero in modo negativo la lettura della pagina da parte delle tecnologie assistive.

Dobbiamo pertanto rimuovere l'elemento dallo schermo spostandolo fuori dall'area visibile e azzerando le sue dimensioni.

.hidden {
    position: absolute;
    top: -9999em;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Così facendo i contenuti degli elementi restando accessibili ai lettori di schermo.