No. 196

Titolo originale: Now You See Me

Pubblicato in: Javascript

Scritto da Aaron Gustafson

Nota dell'editore: siamo lieti di presentarvi un estratto dal nuovo libro di Aaron Adaptive Web Design.

Probabilmente il pattern ripetuto più di frequente nelle manipolazioni della pagina basate su JavaScript consiste nel mostrare e nel nascondere il contenuto. Le interfacce a tab. Gli elementi collassabili. Le widget accordion. Si presenta praticamente ovunque. In sé e per sé, questo pattern non è una cosa cattiva, ma poche persone realizzano quanto profondamente la vostra scelta del meccanismo dell'occultamento possa influenzare l'accessibilità del vostro contenuto alle tecnologie assistive come gli screen reader.

Quando realizzate dei widget basati su JavaScript, è piuttosto facile controllare completamente il meccanismo di occultamento, ma quanto cominciate a lavorare con le librerie di animazione come jQuery o Scriptaculous, il meccanismo di occultamento è tipicamente dettato dalla libreria, lasciandovi poco controllo sull'accessibilità del vostro contenuto. E questo è un problema.

Cucù!

Quando dobbiamo nascondere del contenuto, abbiamo a disposizione svariati meccanismi per farlo e ciascuno di questi influenza la pagina in maniera diversa, come sintetizzato nella seguente tabella:

Meccanismi per Nascondere il Contenuto
Regole CSS Effetto a Video Effetto sull'Accessibilità
visibility: hidden; L'elemento è nascosto dalla vista ma non è rimosso dal flusso normale (ossia, riempie ancora lo spazio che occuperebbe normalmente) Il contenuto viene ignorato dagli screen reader
display: none; L'elemento viene rimosso dal flusso normale e viene nascosto; lo spazio che prima occupava viene ora condensato Il contenuto viene ignorato dagli screen reader
height: 0; width: 0; overflow: hidden; L'elemento viene collassato ed il contenuto nascosto Il contenuto viene ignorato dagli screen reader
text-indent: -999em; I contenuti vengono spostati fuori dallo schermo e sono nascosti alla vista, ma i link possono avere il "focus" in maniera strana e l'indentazione negativa potrebbe non essere abbastanza lunga da nascondere completamente il contenuto Gli screen reader hanno accesso al contenuto, ma il contenuto è limitato al testo e agli elementi inline
position: absolute; left: -999em; Il contenuto è rimosso dal flusso normale ed è spostato sul lato sinistro; lo spazio che occupava viene ridotto Gli screen reader hanno accesso al contenuto

I primi due meccanismi sono probabilmente i più popolari, con display: none; come opzione “go to” implementata praticamente da tutte le librerie JavaScript sul pianeta e dalle widget già pronte in JavaScript che fanno la parte del leone. Se non volete che il vostro contenuto nascosto venga letto da uno screen reader, tali default potrebbero funzionare per voi, ma se volete essere sicuri che gli utenti abbiano accesso al contenuto (anche se visivamente non appare nell'interfaccia attuale), l'ultima opzione (posizionare il contenuto fuori dallo schermo) è la strada da percorrere.

Nota: il posizionamento off-screen si assume per una pagina la cui lingua sia scritta da sinistra verso destra; sostituite offset left con offset right.

Hollaback* scripts

* Significato di hollaback su Urban Dictionary

Se vi create la vostra libreria JavaScript, è piuttosto semplice implementare il posizionamento del contenuto fuori dallo schermo. Se, tuttavia, state usando una libreria JavaScript di terze parti, come jQuery o Prototype, questo compito diventa sempre più difficile da portare a termine perché fare questo cambiamento richiede la sovrascrittura o in alternativa la modifica di ciò che sta dentro la libreria. A meno che, ovviamente, non siate molto bravi nel fare ciò.

La maggior parte delle librerie include, come parte della loro suite di animazione, un meccanismo per includere quelle che solitamente vengono definite “callback function”. Una callback function è una funzione che passate ad un'altra funzione (o ad un metodo di un oggetto) così che possa essere chiamata in un momento predeterminato. Probabilmente questo concetto vi sarà familiare se avete già usato JavaScript per caricare del contenuto con Ajax: le callback function sono utilizzate per fare qualcosa con i dati che vi sono stati inviati dal server.

Nella maggior parte dei casi, le librerie JavaScript offrono solo una callback function che viene eseguita al termine di una data attività, ma alcune librerie forniscono anche degli hook in diversi altri punti durante l'esecuzione di una data routine, come accade prima che la routine abbia inizio. Tuttavia, anche senza gli hook di callback aggiuntivi, è possibile creare delle operazioni più accessibili per mostrare o nascondere del contenuto. Prendiamo ad esempio in considerazione la seguente snippet basata su jQuery:

(function(){
  var $button = $('#myButton'),
      $text   = $('#myText'),
      visible = true;
  $button.click(function(){
    if ( visible ) {
      $text.slideUp('fast');
    } else {
      $text.slideDown('fast');
    }
    visible = ! visible;
  });
})();

Questo script cerca due elementi (#myButton e #myText), li assegna a due variabili locali (rispettivamente $button e $text) prima di impostare una terza variabile locale (visible) per tracciare lo stato corrente delle cose. Prosegue poi assegnando l'event handler onclick a #myButton attiva o disattiva la visibilità di #myText aggiustandone l'altezza. Piuttosto lineare, no?

Questo script funziona esattamente come vi aspettereste, ma jQuery attualmente utilizza display: none quando chiamate slideUp(), pertanto #myText viene nascosto da un metodo che impedisce al testo nascosto di essere letto da uno screen reader. Tuttavia, apportando una sottile modifica al codice, possiamo attivare l'aggiunta di una class che noi controlliamo che fornisca dei modi più accessibili per nascondere il contenuto:

(function(){
  var $button = $('#myButton'),
      $text   = $('#myText'),
      visible = true;
  $button.click(function(){
    if ( visible ) {
      $text.slideUp('fast',function(){
        $text.addClass('accessibly-hidden')
             .slideDown(0);
      });
    } else {
      $text.slideUp(0,function(){
        $text.removeClass('accessibly-hidden')
             .slideDown('fast');
      });
    }
    visible = ! visible;
  });
})();

Questo script è molto simile al precedente, nel senso che quando si nasconde il contenuto, alla libreria è permesso gestire l'animazione, ma poi lo script sostituisce lo stato di completamento di default con la nostra class “accessibly-hidden” personalizzata, mantenendo così il contenuto a disposizione dei dispositivi assistivi. Quando lo script mostra il contenuto, si invertono i passaggi, con il contenuto nascosto dallo script ancora prima che la class sia rimossa e che l'effettiva animazione venga eseguita.

Il beneficio aggiunto di questo approccio è che si ha il pieno controllo del metodo per nascondere il contenuto, piuttosto che lasciarlo completamente alla libreria JavaScript. Ciò significa che potete aggiornare la vostra “accessibly-hidden” perché utilizzi una tecnica diversa se salta fuori qualcosa di migliore e non dovete aspettare che la libreria aggiorni il suo meccanismo di occultamento (ammesso che lo faccia).

JavaScript è uno strumento potente per creare delle ricche interazioni online. Sappiamo già che quando lo usiamo dobbiamo essere unobtrusive e creare il behavior layer seguendo il progressive enhancement, ma a volte non ci si può spingere oltre. Fortunatamente, tuttavia, con una piccola riflessione, possiamo far fare ai nostri script quello step in più e rendere le nostre pagine appena più accessibili.

 

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Aaron Gustafson

Come ci si aspetterebbe da un ex manager del Web Standards Project, Aaron Gustafson è appassionato di web standards e accessibilità. Ha lavorato sul web per quasi due decenni e recentemente si è unito a Microsoft come web standards advocate per lavorare a stretto contatto con il loro browser team. Scrive di tutto quello che gli salta in mente su aaron-gustafson.com.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA