Una delle accuse che in genere viene mossa a Javascript è quella di minare, spesso, l'accessibilità di una pagina. Può infatti capitare che in certe condizioni (browser obsoleti o speciali) i contenuti veicolati con questo sistema non siano fruibili da certi gruppi di utenti. Che fare? Rinunciare all'implementazione di caratteristiche avanzate o tentare un compromesso? Ha scelto questa via WebSemantics, una compagnia inglese che si distingue da tempo per l'attenzione a questi aspetti del web design. Nello specifico, offrendo una versione accessibile di un classico del Javascript dinamico: un text-scroller.
Lo script è anche esemplare da un altro punto di vista. Mantiene la promessa rispetto ad uno dei cardini del 'nuovo' Javascript: la separazione tra contenuto, presentazione e interattività.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
A riprova di quanto detto, basta dare un'occhiata al codice dell'esempio allegato. Dimentichiamoci di lunghe porzioni di codice, dimentichiamoci di richiami che vanno a rovinare e pasticciare il markup HTML. Si inizia includendo nella sezione <head></head> i due file fondamentali:
<script type="text/javascript" src="scroller.js"></script>
<style type="text/css" media="screen">@import
"scroller.css";</style>
Il primo è il file .js che gestisce l'intera applicazione; il secondo un foglio di stile destinato alla gestione degli aspetti grafici e di presentazione. In questo modo, sappiamo dove mettere mano in caso di modifiche o personalizzazione, e tutto rimane separato dal resto.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
All'interno della parte HTML abbiamo lasciato intatto, per correttezza, il codice fornito dagli autori. Si osservi la pulizia del tutto:
<div id="scroller">
<p id="tag">Ever needed a horizontal text scroller but couldn't use one for accessibility
reasons? This scroller is, as far as I'm aware, completely accessible.</p>
</div>
<p id="controls"></p>
Basta un div con id="scroller" che racchiude un paragrafo con id="tag": esso conterrà il testo scorrevole. Chiuso il div, segue un paragrafo con id="controls", vuoto apparentemente, ma che in realtà, sui browser con supporto di Javascript e DOM, inserirà i controlli per gestire l'animazione del testo.
Modifiche e interventi di personalizzazione sono possibili. Utili indicazioni si trovano sulla pagina che ospita lo script originale: http://www.websemantics.co.uk/tutorials/accessible_scroller/
