Adesso mi vedi

Cucù!#section1

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:

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#section2

* 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.