Vai direttamente ai contenuti
sezioneparole chiave !Abracadabra per accedere al digitale

XS2ANIMATION: MAKE ANIMATION ACCESSIBLE

XS2Animation è un laboratorio di ricerca e prototipazione Inclusive Design che offre un kit di indicazioni e soluzioni tecniche - alcune già note, altre sperimentali - per rendere le animazioni digitali quanto più accessibili possibile relativamente alle esigenze di svariate personas quali non vedenti, sordi, daltonici, epilettici, disabili cognitivi e dislessici sottolineando l’importanza di una corretta implementazione dei linguaggi aperti e standard e della necessità di Interfacce Utente (UI) e Storytelling adattivi a seconda dello specifico target a cui si fa riferimento. Gli autori Enrico Bisenzi ed Alessandro Carducci rendono disponibile un esempio di questa proposta stilistica su https://cardeisart.com/projects/xs2animation mentre su questa stessa pagina sono giustificate tecnicamente le scelte fatte a livello di User Interface per un'ottimale User Experience.

CRITICITÀ VISUALI

Il video è stato realizzato in maniera tale che non venga assegnata informazione significativa in maniera esclusiva al colore per non mettere in difficoltà persone che soffrono di daltonismo (possiamo parlare anche di colore con i 'pallini blu' ma questo non inficia la corretta fruizione e comprensione dell'animazione...). Inoltre, nella costruzione dell'animazione è stata posta attenzione a non realizzare intermittenze pericolose per chi soffre di epilessia (passaggi repentini da chiaro a scuro con frequenza uguale o superiore a tre battiti al secondo). Infine, per alcune soluzioni di UI è stato adottato il font ad alta leggibilità Atkinson Hyperlegible Font realizzato dal Braille Institute of America ed "available for free to everyone".

Queste soluzioni di user interface e user experiences sono a vantaggio delle persone ipovedenti e daltoniche, persone che soffrono di epilessia, persono dislessiche nonché persone che si trovano temporaneamente in condizioni di ipovisione per incidenti, pur in fase di risoluzione, all’apparato visivo.

CONTENUTI TESTUALI

Una descrizione testuale opportunamente formattata tramite appositi marcatori HTML e dichiarazioni di stile CSS e corredata di corretta punteggiatura rappresenta un ausilio per la lettura e comprensione utile a chiunque voglia avvalersi della interpretazione audio (o percezione tattile braille) di un testo scritto tramite l'interpretazione di uno screen-reader (un minimo di ritmo narrativo ed enfasi è garantito appunto da punteggiatura e marcatura ipertestuale).

La scelta stilistica adottata a livello di storytelling è stata quella di cercare di trasmettere con lo storytelling testuale non solo una descrizione dell’animazione in termini di storia ma anche di empatia. Il cagnolino si definisce simpatico perché così appare dall’animazione, si usano vezzeggiativi, si prova a dare un ritmo anche alla narrazione in maniera tale che, grazie anche ad una corretta punteggiatura e marcatura ipertestuale, si riproduca quanto più possibile l’esperienza utente di chi può percepire l’animazione grazie allo storytelling testuale dell’audio-video corrispondente.

Trascrizione testuale "Dagghy incontra XS2"

Accompagnata dalla divertente musica di Lorenzo Zambelli, è la storia di un simpatico cagnolino di nome Dagghy che fa un incontro speciale con XS2: una stellina speciale il cui nome XS2 in inglese si pronuncia come access to ovvero accedere a qualcosa.

XS2 è infatti una specie di creatura magica capace di aiutare chiunque voglia comprendere un’animazione e magari ha qualche difficoltà ad ascoltare un audio o a vedere le immagini.

Dagghy è un cagnolino dalle grandi orecchie e dal nasino pronunciato, un cagnolino speciale, antropomorfo, in grado di sedersi ad un tavolo e curiosare su Internet e proprio sul Web… incontra "Oh!?!" casualmente XS2! L’incontro è letteralmente scintillante perché è grazie ad un bagliore che XS2 si presenta "Ciao!" nella sua forma di stellina magica che un po’ ricorda il simbolo del PLAY che si usa quando si vuole attivare un video oppure un audio.

Uscendo dallo schermo del computer, XS2 saluta e si presenta sorridente con i suoi occhini dalle lunghe ciglia e aiuta Dagghy a comprendere meglio l’animazione anche grazie al secondo schermo laterale in cui sono contenute le descrizioni testuali "E sono qui per aiutarti a comprendere meglio questa animazione".

Il cagnolino Dagghy è stupito "Oooh!" ed incredulo ed incuriosito dallo schermo di aiuto accanto... lo tocca e magicamente diventa a pallini blu "Sono diventato a pallini blu!"

La stellina XS2 lo rassicura "Ci penso io!" e dà una dimostrazione dei suoi poteri riportandolo ai suoi colori originali.

Dagghy ringrazia XS2 "Grazie!" e così nasce fra loro una splendida amicizia.

LINGUA DEI SEGNI

Grazie a Federico D’Andrea ed Aurora Pavesi abbiamo potuto implementare una specifica UI (User Interface)) utilizzando un secondo schermo laterale per descrivere l'animazione con la Lingua dei Segni Italiana (decisamente preferita da molte persone sorde alla lingua scritta).

Questa opportunità di applicazione di una forma d'ausilio per le persone sorde ha dimostrato come qualsiasi soluzioni di interfaccia utente e di storytelling diversificate, adattive in senso inclusivo, sono occasioni preziose per arricchire e valorizzare l’animazione di partenza con ulteriori potenzialità espressive, così come dimostrato dall’interpretazione di Federico ed Aurora dell’audio contenuto nell’animazione a favore delle persone sorde segnanti.

SOTTOTITOLI CLOSED CAPTION (CC)

Abbiamo scelto WebVTT (Web Video Text Tracks) come formato per i Closed Caption (CC)) perché è uno standard di sotto-titolazione del World Wide Web Consortium (W3C) e perché è implementabile nella quasi totalità delle piattaforme di condivisione video.

Le descrizioni testuali realizzate in maniera indipendente dall’animazione stessa ma con essa in sincrono dette anche CC Closed Caption sono una tipologia di sottotitolazione offerta in modalità testuale (non grafica) in grado di riprodurre tramite testo tutto ciò che normalmente sarebbe percepito tramite audio (ad esempio conversazioni ma anche rumori, suoni, eccetera). Risultano particolarmente utili per descrivere ancor più chiaramente ciò che avviene a livello di comunicazione visuale ma soprattutto per poter garantire un livello minimo di comprensione narrativa a chi è impossibilitato a percepire l’audio. Le CC (Closed Caption) sono ampiamente utilizzate in tutti quei contesti di offerta multimediale ospitabile tramite i linguaggi del Web (ma non solo basti pensare a piattaforme popolarissime come Netflix) e rappresentano un ottimo ausilio per molte tipologie di disabilità legate al cognitivo o alla percezione audio.

La video-animazione è corredata da Closed Caption che sono insolitamente posizionate sulla sinistra (in uno speciale ‘secondo schermo’) invece che sulla parte bassa del video al fine di poter dare maggiore risalto e dignità alla componente testuale particolarmente utile per utenza non udente. La nostra scelta stilistica consiste nell’introdurre le CC in un apposito schermo a sinistra (per chi guarda) occupando e sovrapponendosi comunque ad una porzione dell’animazione, così attraendo grande attenzione e dando risalto ed importanza alle ‘sottotitolazioni’ rispetto a come vengono ‘normalmente’ utilizzate (in sovrimpressione, di solito sulla parte inferiore del video). La video-animazione è corredata da Closed Caption che sono insolitamente posizionati sulla sinistra (in uno speciale ‘secondo schermo’) invece che sulla parte bassa del video al fine di poter dare maggiore risalto e dignità alla componente testuale particolarmente utile per utenza non udente. Ricordiamo comunque che questo tipo di soluzioni può essere utile anche alle persone che si trovano temporaneamente nelle condizioni di disabilità di cui sopra per incidenti, pur in fase di risoluzione, ad esempio all’apparato uditivo o che si trovano in particolari contesti ambientali (ad esempio come trovarsi in un ambiente molto rumoroso) oppure comunicativi (le statistiche di dicono che l'85% degli utenti di Facebook visionino i video senza audio).

AUDIO-DESCRIZIONI

Le audio-descrizioni sono importanti da un punto di vista comunicativo perché consentono non solo di rendere comprensibile il visuale a chi non lo può percepire ma l’intero storytelling diventa maggiormente empatico e coinvolgente prevedendo l’utilizzo ragionato e professionale di voci recitate e suoni-rumori predeterminabili.

Per l’audio-descrizione è stato fatto un lavoro di sincronizzazione dialoghi ed audio editing utilizzando quindi come base la trascrizione testuale ma omettendo le parti musicali ed audio che vengono inserite in sincrono nel file audio finale così composto di seguito riportato...

COMUNICAZIONE ALTERNATIVA AUMENTATIVA (CCA)

dia cca di dagghy che scopre con xs2 le magie di questa storia

Abbiamo utilizzato alcuni screenshot del video per realizzare una versione di Comunicazione Alternativa Aumentativa detta anche CCA. Approfittando del secondo schermo utilizzato anche per le Closed Caption abbiamo realizzato una trasposizione adattiva dello storytelling con diapositive che riportavano testo maggiormente comprensibile per disabili cognitivi ed autistici, un esempio implementativo che potrebbe essere ulteriormente diversificato e/o semplificato a seconda della specifico target di riferimento e ‘grado’ di autismo delle persone a cui è indirizzata la comunicazione alternativa aumentativa.

La Comunicazione Alternativa Aumentativa (CCA) è un classico esempio di comunicazione semplificata molto apprezzata da chi soffre di autismo. Da notare, a proposito della necessità di realizzare storytelling adattive da noi più volte sottolineata, la diversa narrazione presente sulle Closed Caption del video, sulle immagini CCA e sugli attributi ALT (Alternativa Testuale) e LONGDESC (Long Descritpion) del codice HTML utilizzato per integrare le dia-immagini CCA (in inglese si definiscono AAC ovvero Alternative Augmentive Communication) stesse e che riportiamo a titolo di esempio implementativo di seguito.

<img src="inizio-storia-amici-speciali.png" width="100%" alt="il cagnolino dagghy cerca al computer">

<img src="dagghy-incontra-xs2.png" width="100%" alt="appare la scritta xs2 sullo schermo">

<img src="click.png" width="100%" alt="dagghy clicca su xs2">

<img src="oh.png" width="1920" alt="dagghy rimane sorpreso">

<img src="xs2-ciao.png" width="100%" alt="xs2 appare sorridente fuori dallo schermo ed offre la sua amicizia">

<img src="xs2-offre-amicizia.png" width="100%" alt="xs2 offre la sua amicizia">

<img src="alla-scoperta.png" width="100%" alt="xs2 invita dagghy a scoprire le magie dell'animazione digitale">

<img src="pallini-blu.png" width="100%" alt="Dagghy tocca una parte dell'animazione e diventa a pallini">

<img src="flash.png" width="100%" alt="XS2 fa una magia e con un flash ...">

<img src="grazie-siamo-amici.png" width="100%" alt="toglie i pallini a Dagghy che felice ringrazia la sua nuova amica">

NOTE DI SVILUPPO

logo xs2animation make animation accessible

Perché le animazioni? Le animazioni (digitali) possono essere realizzate con minor sforzo economico rispetto ai ‘video ‘per i quali sono necessari maggiori risorse tecniche ed anche professionali per la loro realizzazione. L’animazione digitale è ‘determinabile’ in ogni suo piccolo dettaglio e momento narrativo potendo definire con precisione l’innesto di procedure di storytelling alternative grazie all’adozione di meccanismi di ‘ausilio’ di varia tipologia. Le animazioni digitali sono particolarmente gradite a fasce di utenze come bambini ma in certi casi anche a disabili cognitivi. Con l’animazione tutto è possibile, tutto è reversibile. La natura dell’animazione va oltre le leggi della fisica; la sua forza espressiva ed il suo linguaggio di comunicazione universale sono intramontabili, le sue forme artistiche e tecniche sono sempre attuali. Essa si adatta a qualsiasi categoria e target. L’animazione è l’arte della comunicazione.

Il processo produttivo ci ha consentito, di volta in volta, di adottare le scelte e le soluzioni più adatte per arrivare ad un risultato il più inclusivo possibile lavorando su tutti gli elementi del progetto: naming e logo, sceneggiatura, disegni, storyboard doppiaggio, musica, trascrizione testuale, audiodescrizione, animatic, animazione sincronizzazione dialoghi, lineart, colori, ombreggiature, video editing, esportazione e ottimizzazione video per il web, CC in WebVTT, traduzione nella lingua dei segni italiana.

Naming e logo

Prove di logo XS2Animation coinvolgendo i simboli di porte aperte, cerchi, simbolo di play attivazione video

Abbiamo fatto dell’attività di brainstorming e prototipazione sul naming e sul logo verificando anche che non ci fossero sovrapposizioni con brand posizionati sullo stesso argomento arrivando a delle scelte considerate da noi efficaci. Alla fine abbiamo scelto per il logo di XS2 (access to) animation - make animation accessible un triangolo che si sviluppa in orizzontale, tipico della funzione attiva video oppure audio.

Sceneggiatura bozze grafiche storyboard

Ci siamo subito confrontati su quale potesse essere una breve animazione da poter essere di esempio in termini di inclusione digitale orientandosi verso una proposta semplice e giocosa capace di far capire i vantaggi della soluzione stilistica XS2Animation – make animation accessible. Si è partiti da una sceneggiatura semplice accompagnata da uno storyboard riportante le azioni, le interazioni e i dialoghi dei personaggi tramite disegni abbozzati che poi sono stati rifiniti.

Storyboard con schizzi di disegno che rappresentano lo storytelling dell'animazione dettagliata nella trascrizione testuale

Animatic

Come da consueto processo produttivo di un’animazione è stata realizzato un animatic (stoyboard animato) che ci ha permesso di delineare meglio una bozza di testo utile per un’interpretazione da parte degli screen-reader ma anche per arrivare ad una corretta interpretazione da parte dei doppiatori per la realizzazione dell’audio-descrizione. Lo storyboard animato è essenziale per avere un’idea complessiva delle tempistiche dell’animazione delle azioni e delle varie scene,ed è a tutti gli effetti un’anteprima del video con suoni e immagini, ma senza l’animazione vera e propria.

in questo esempio di animatic XS2 illustra a Dagghy lo schermo di ausilio per le descrizioni testuali

Animazione

Si è passati poi all’animazione partendo dall’elaborazione dei fotogrammi in tecnica tradizionale 2D digitale a risoluzione 4K tramite Wacom Cintiq (tavola grafica a schermo con penna elettrografica). Sono stati prima realizzati i fotogrammi chiave partendo dai disegni dello storyboard per poi procedere con la realizzazione dei fotogrammi “Pose to pose” (ovvero da posa a posa). Il processo di animazione è stato concluso con la sincronizzazione dei dialoghi dei personaggi. Il movimento del labiale realizzato in animazione si basa sulla versione inglese del doppiaggio.

Concluso il processo di animazione si è passati alla pulizia, la colorazione e ombreggiatura di tutti i disegni. Dopo aver esportato le scene animate queste ultime sono state importate in software di montaggio ed utilizzate per sostituire le immagini statiche precedentemente usate per l’animatic. Completata la fase di video editing è stata effettuata l’esportazione del video e la compressione di quest’ultimo per il web mantenendone comunque la qualità visiva.

PROBLEMI DI INTEROPERABILITÀ TECNOLOGICA

Purtroppo il browser Chrome non rispetta l’attributo di impostazione position e quindi si è reso necessario implementare più righe di descrizione testuale nella importante fase di implementazione dei sotto-titoli nella forma dei closed-caption. La scorretta implementazione di position ha implicato l'impossibilità di utilizzare testo significativamente lungo che potesse andare a capo in automatico così come riesce a fare il browser Firefox costringendoci a fare del lavoro supplementare per avere frasi corte su righe distanziate, in questa maniera correttamente interpretate anche dal browser Chrome

CONCLUSIONI

SECONDO SCHERMO COME UI ADATTIVA

La nostra proposta, abbastanza originale ed inconsueta, di secondo schermo accessorio da utilizzare in posizione adiacente all'animazione vuole essere di ispirazione a sviluppatori ed autori nel prendere in considerazione l'opportunità di avere soluzioni di interfaccia utente che possono offrire contenuti alternativi all'insegna della massima inclusività possibile, come nel nostro caso, di closed caption, comunicazione alternativa aumentativa e linguaggio dei segni.

STORYTELLING ADATTIVI

Ogni target di riferimento necessita di specifiche procedure di storytelling alternative: quale realizzare dipende dal target di riferimento preso in considerazione ed in ogni caso è necessario sviluppare delle capacità di storytelling specifiche per ogni specifico target di riferimento preso in esame. Il solo testo dovrà includere tutto ciò che è rappresentato come visuale ed audio, le semplici dia di comunicazione alternativa aumentativa dovranno tenere di conto del livello di capacità cognitiva dei giovanissimi autistici a cui è rivolta l'animazione e via dicendo.

INTEROPERABILITÀ TECNOLOGICA

Le condizioni di interoperabilità tecnologica sono presupposto indispensabile per poter progettare interfacce utente e storytelling capaci di garantire un'ottima esperienza utente (UX) tramite qualsiasi browser, su dispositivi desktop oppure mobile, con un rendering omogeneo dei linguaggi da interpretare in un'ottica di rispetto degli standard e delle soluzioni tecniche e tecnologiche Open Source.

La nostra ‘soluzione’ proposta non è certamente risolutiva al 100% e ci impegniamo ad aggiornare prototipo e documento di ricerca anche sulla base dei suggerimenti e segnalazioni che potranno provenire dagli esperti e dalle comunità di disabili: è sicuramente deficitaria per alcune criticità che era impossibile per noi prendere in considerazione come quella di soddisfare le esigenze di sordociechi e pluriminorati psicosensorialii.

Sicuramente l’avvento dell’Intelligenza Artificiale risolverà in futuro molti aspetti di interpretazione facilitata dell’informazione digitale ad uso e consumo di ausili e persone disabili ma ciò non toglie che l’intervento artistico ed umano potrà sempre apportare plus-valore a qualsiasi tipologia di realizzazione artistica e comunicativa soprattutto se supportato da accorgimenti ed ausili informativi. Siamo a conoscenza delle capacità interpretative del visuale da parte dei sistemi di intelligenza artificiale di social network e motori di ricerca nonché di alcune sperimentazioni di traduzione automatica in lingua dei segni della parola scritta ma per ora le risultanze ottenute da questi strumenti ed automatismi sono inferiori rispetto a possibili interventi manuali.

Secondo la Direttiva Unione Europea su accessibilità dei prodotti e dei servizi dal 2025 tutti i siti Web sia del settore pubblico che di quello privato dovranno rispettare requisiti tecnici di accessibilità: nel frattempo qualsiasi sviluppatore di buona volontà può aggiornarsi sulle tecniche necessarie per realizzare prodotti multimediali accessibili in un'ottica di inclusive design e questo kit intende agevolare ed ispirare sperimentazioni prototipali in materia di accessibilità del digitale ed in particolare in ambito artistico e creativo.

CREDITS

Enrico Bisenzi

Docente dell’Accademia di Belle Arti di Roma settore Graphic Design, all'inizio della sua attività lavorativa e professionale si concentra sull'organizzazione ed indicizzazione dei documenti elettronici collaborando fino agli anni '90 con il CNR di Firenze. Ben presto la sua attenzione si sposta sulla comunicazione digitale e quindi sulle possibilità espressive collaborando con moltissime aziende private (fra le prime Feltrinelli) ed enti di ricerca (Indire ed Università di Firenze e Bergamo). Accessibilità ed usabilità dell'informazione, delle interfacce digitali e delle relative esperienze utente sono il focus del suo approccio professionale lavorando a progetti come olimpiadi invernali, compagnie assicurative, ospedali e comuni. Può essere contattato all’email e.bisenzi@abaroma.it

Alessandro Carducci

Artist, Animator and Video Creator si è laureato in Nuove Tecnologie per l’Arte presso l’Accademia Carrara di Belle Arti di Bergamo e si è specializzato in Net Art e Culture Digitali presso l’Accademia di Belle Arti di Carrara (MS). Si è, inoltre, specializzato con un Master in Filmmaking, Videomaking. Dal 2014 è partner di Channel Frederator Network e crea contenuti di animazione e video per il Web. Ha anche lavorato come Video Producer, Animator e Graphic Designer presso alcune aziende private. È autore di progetti attualmente in Work in Progress come Cardeis Cartoons e Water Project.

Siamo particolarmente grati a Mirella Castigli per aver fornito la sua voce per l'audio-descrizione in lingua italiana e per essere la voce della versione italiana di XS2, a Federico D’Andrea ed Aurora Pavesi per averci fornito la traduzione nella Lingua dei Segni Italiana. Siamo grati anche a Jeremy A. Freed voce ufficiale di Dagghy the Dog e a Megan Konrad per essere la voce della versione inglese di XS2 e la voce dell’audiodescrizione in lingua inglese. Musica di Lorenzo Zambelli, sottotitolazioni ed alternative testuali a cura di Enrico Bisenzi, Cardeis Art Logo Music a cura di Lorenzo Zambelli, personaggi XS2 e Dagghy creati ed animati da Alessandro Carducci per il brand Cardeis Art (marchio registrato e copyright – tutti i diritti riservati).