{"id":165,"date":"2011-05-10T12:09:36","date_gmt":"2011-05-10T10:09:36","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/adesso-mi-vedi\/"},"modified":"2011-05-10T12:09:36","modified_gmt":"2011-05-10T10:09:36","slug":"adesso-mi-vedi","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/adesso-mi-vedi\/","title":{"rendered":"Adesso mi vedi"},"content":{"rendered":"

Nota dell’editore: siamo lieti di presentarvi un estratto dal nuovo libro di Aaron Adaptive Web Design<\/em>.<\/em><\/p>\n

Probabilmente il pattern ripetuto pi\u00f9 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\u00e9 e per s\u00e9, questo pattern non \u00e8 una cosa cattiva, ma poche persone realizzano quanto profondamente la vostra scelta del meccanismo dell’occultamento possa influenzare l’accessibilit\u00e0 del vostro contenuto alle tecnologie assistive come gli screen reader.<\/p>\n

Quando realizzate dei widget basati su JavaScript, \u00e8 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 \u00e8 tipicamente dettato dalla libreria, lasciandovi poco controllo sull’accessibilit\u00e0 del vostro contenuto. E questo \u00e8 un problema.<\/p>\n

\n

Cuc\u00f9!<\/h2>\n

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:<\/p>\n\n\n\n\n\n\n\n\n
Meccanismi per Nascondere il Contenuto<\/caption>\n
Regole CSS<\/span> <\/th>\nEffetto a Video <\/th>\nEffetto sull’Accessibilit\u00e0 <\/th>\n<\/tr>\n
visibility: hidden;<\/code><\/td>\nL’elemento \u00e8 nascosto dalla vista ma non \u00e8 rimosso dal flusso normale (ossia, riempie ancora lo spazio che occuperebbe normalmente)<\/td>\nIl contenuto viene ignorato dagli screen reader<\/td>\n<\/tr>\n
display: none;<\/code><\/td>\nL’elemento viene rimosso dal flusso normale e viene nascosto; lo spazio che prima occupava viene ora condensato<\/td>\nIl contenuto viene ignorato dagli screen reader<\/td>\n<\/tr>\n
height: 0; width: 0; overflow: hidden;<\/code><\/td>\nL’elemento viene collassato ed il contenuto nascosto<\/td>\nIl contenuto viene ignorato dagli screen reader<\/td>\n<\/tr>\n
text-indent: -999em;<\/code><\/td>\nI 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<\/td>\nGli screen reader hanno accesso al contenuto, ma il contenuto \u00e8 limitato al testo e agli elementi inline<\/td>\n<\/tr>\n
position: absolute; left: -999em;<\/code><\/td>\nIl contenuto \u00e8 rimosso dal flusso normale ed \u00e8 spostato sul lato sinistro; lo spazio che occupava viene ridotto<\/td>\nGli screen reader hanno accesso al contenuto<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

I primi due meccanismi sono probabilmente i pi\u00f9 popolari, con display: none;<\/code> come opzione \u201cgo to\u201d implementata praticamente da tutte le librerie JavaScript sul pianeta e dalle widget gi\u00e0 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) \u00e8 la strada da percorrere.<\/p>\n

Nota: il posizionamento off-screen si assume per una pagina la cui lingua sia scritta da sinistra verso destra; sostituite offset left<\/code> con offset right<\/code>.<\/em><\/p>\n<\/div>\n

\n

Hollaback* scripts<\/h2>\n

* Significato di hollaback su Urban Dictionary<\/a><\/p>\n

Se vi create la vostra libreria JavaScript, \u00e8 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\u00f9 difficile da portare a termine perch\u00e9 fare questo cambiamento richiede la sovrascrittura o in alternativa la modifica di ci\u00f2 che sta dentro la libreria. A meno che, ovviamente, non siate molto bravi nel fare ci\u00f2.<\/p>\n

La maggior parte delle librerie include, come parte della loro suite di animazione, un meccanismo per includere quelle che solitamente vengono definite \u201ccallback function\u201d. Una callback function \u00e8 una funzione che passate ad un’altra funzione (o ad un metodo di un oggetto) cos\u00ec che possa essere chiamata in un momento predeterminato. Probabilmente questo concetto vi sar\u00e0 familiare se avete gi\u00e0 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.<\/p>\n

Nella maggior parte dei casi, le librerie JavaScript offrono solo una callback function che viene eseguita al termine di una data attivit\u00e0, 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, \u00e8 possibile creare delle operazioni pi\u00f9 accessibili per mostrare o nascondere del contenuto. Prendiamo ad esempio in considerazione la seguente snippet basata su jQuery:<\/p>\n

(function(){\n  var $button = $('#myButton'),\n      $text   = $('#myText'),\n      visible = true;\n  $button.click(function(){\n    if ( visible ) {\n      $text.slideUp('fast');\n    } else {\n      $text.slideDown('fast');\n    }\n    visible = ! visible;\n  });\n})();<\/pre>\n
Questo script cerca due elementi (#myButton<\/code> e #myText<\/code>), li assegna a due variabili locali (rispettivamente $button<\/code> e $text<\/code>) prima di impostare una terza variabile locale (visible<\/code>) per tracciare lo stato corrente delle cose. Prosegue poi assegnando l’event handler onclick<\/code> a #myButton<\/code> attiva o disattiva la visibilit\u00e0 di #myText<\/code> aggiustandone l’altezza. Piuttosto lineare, no?<\/p>\n
Questo script funziona esattamente come vi aspettereste, ma jQuery attualmente utilizza display: none<\/code> quando chiamate slideUp()<\/code>, pertanto #myText<\/code> 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<\/code> che noi controlliamo che fornisca dei modi pi\u00f9 accessibili per nascondere il contenuto:<\/p>\n
(function(){\n  var $button = $('#myButton'),\n      $text   = $('#myText'),\n      visible = true;\n  $button.click(function(){\n    if ( visible ) {\n      $text.slideUp('fast',function(){\n        $text.addClass('accessibly-hidden')\n             .slideDown(0);\n      });\n    } else {\n      $text.slideUp(0,function(){\n        $text.removeClass('accessibly-hidden')\n             .slideDown('fast');\n      });\n    }\n    visible = ! visible;\n  });\n})();<\/pre>\n
Questo script \u00e8 molto simile al precedente, nel senso che quando si nasconde il contenuto, alla libreria \u00e8 permesso gestire l’animazione, ma poi lo script sostituisce lo stato di completamento di default con la nostra class<\/code> \u201caccessibly-hidden\u201d personalizzata, mantenendo cos\u00ec 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<\/code> sia rimossa e che l’effettiva animazione venga eseguita.<\/p>\n
Il beneficio aggiunto di questo approccio \u00e8 che si ha il pieno controllo del metodo per nascondere il contenuto, piuttosto che lasciarlo completamente alla libreria JavaScript. Ci\u00f2 significa che potete aggiornare la vostra \u201caccessibly-hidden\u201d perch\u00e9 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).<\/p>\n
JavaScript \u00e8 uno strumento potente per creare delle ricche interazioni online. Sappiamo gi\u00e0 che quando lo usiamo dobbiamo essere  unobtrusive<\/a> e creare il behavior layer seguendo il progressive enhancement<\/a>, ma a volte non ci si pu\u00f2 spingere oltre. Fortunatamente, tuttavia, con una piccola riflessione, possiamo far fare ai nostri script quello step in pi\u00f9 e rendere le nostre pagine appena pi\u00f9 accessibili.<\/p>\n<\/div>\n
\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
E’ un pattern di sviluppo comune utilizzare lemanipolazioni di pagina basate su JavaScript per le interfacce a tab, per gli elementi collassabili e per le widget accordion per mostrare e nascondere del contenuto. Cerchiamo di capire come la scelta del meccanismo di occultamento del contenuto possa influenzare l’accessibilit\u00e0 al contenuto da parte delle tecnologie assistive come gli screen reader in un estratto da citeAdaptive Web Design\/cite.<\/p>\n","protected":false},"author":818,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[271,42],"tags":[],"coauthors":[301],"class_list":["post-165","article","type-article","status-publish","hentry","category-javascript","category-numero-28-10-maggio-2011"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=165"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=165"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}