JavaScript e il tag noscript

Esempi di utilizzo corretto del tag noscript, e le possibili alternative per una pagina accessibile.

Il tag HTML noscript è spesso considerato uno dei migliori metodi per fornire contenuti alternativi al JavaScript di una pagina web. In realtà nella maggior parte dei casi questo tag viene ancora oggi utilizzato per messaggi imbarazzanti come:

il tuo browser non ha i requisiti necessari per visualizzare questo contenuto

Questo testo però è decisamente poco interessante per l’utente, ed ancora meno utile dal punto di vista dell’accessibilità.

Utilizzare noscript

Il modo migliore per sfruttare questo tag è inserire al suo interno un contenuto realmente alternativo.

Nel caso di una mappa interattiva con dei punti di interesse, all’interno del noscript sarebbe sufficiente elencare questi punti senza troppe complicazioni:

<script type="text/javascript">
// mappa interattiva
[...]
</script>
<noscript>
<ul>
   <li><a href="...">Punto di interesse 1</a></li>
   <li><a href="...">Punto di interesse 2</a></li>
   [...]
</ul>
</noscript>

evitando messaggi come:

<noscript>Il tuo browser non supporta JavaScript!</noscript>

Progressive enhancement

C’è però un’alternativa migliore al tag noscript, ed è l’utilizzo del progressive enhancement. Fornire un contenuto alternativo può essere una soluzione valida intervenendo su un sito esistente, ma se state realizzando un progetto da zero, è molto più utile pensare fin da subito a certe problematiche.

E’ necessario pensare ad HTML e JavaScript come due livelli distinti, da tenere ben separati. Il procedimento migliore è infatti inserire tutti i contenuti HTML, e solo successivamente usare JavaScript per aggiungere effetti grafici e animazioni.

In questo modo anche con JavaScript non disponibile i contenuti resteranno accessibili, e soprattutto non dovrete preoccuparvi di realizzare delle versioni alternative.

Sulla separazione di HTML e Javascript c’è un interessante articolo di A List Apart del 2006: Behavioral Separation, scritto da Jeremy Keith.

Ha ancora senso usare noscript?

Se utilizzate JavaScript in maniera non intrusiva potete benissimo dimenticarvi di noscript. Il tag però rimane ancora valido (ed è riconosciuto anche in HTML5) per garantire la retrocompatibilità.

Ci sono poi situazioni in cui l’utilizzo del noscript è insostituibile: basti pensare a tutti i casi in cui il codice JavaScript viene fornito da un sito esterno e non è modificabile.

E voi cosa ne pensate? Nel panorama italiano parlare di progressive enhancement è ancora un’utopia?

Vuoi far crescere il tuo progetto online?

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.