Corsi on-line

CSS Hiding accessibile

Per nascondere un elemento di una pagina, magari perché utilizzato all’interno di componenti Ajax, è possibile utilizzare regole di stile CSS basate su “display: none;” o “visibility: hidden“, questo tipo di approccio presenta però alcuni aspetti negativi, rende infatti non accessibili determinati contenuti, mettendo in difficoltà gli screen readers, e non è SEO Friendly, con controindicazioni per l’ottimizzazione e il posizionamento sui motori di ricerca.

Un’alternativa potrebbe essere la seguente:

#testo { position: absolute; left: -9999px; }

In questo modo un elemento verrà semplicemente “spostato” in un punto non visibile della schermata del browser ma continuerà a far parte del flusso di contenuti, divenendo così accessibile e potenzialmente ottimizzato; questa tecnica deve però essere utilizzata con attenzione e cautela.

E’ infatti per esempio possibile impiegarla per nascondere un semplice componente per la navigazione, ma non adottatela per nascondere “div” strapieni di keywords o heading tag (ad esempio un “h1”), perché Google si accorgerebbe facilmente del “trucco” e spingerebbe il vostro sito Web molto lontano dalle prime posizioni della SERP.

Post correlati
I più letti del mese
Tematiche