Applicazioni Ajax Accessibili

Applicazioni AJAX accessibili

URL: http://diegolamonica.info/smau-2008/ Autore: Diego La Monica

Page 1 of 19Applicazioni AJAX Accessibili - SMAU 2008 - Diego La Monica

19/10/2008http://diegolamonica.info/smau-2008/

IWA/HWG è un’Associazione professionale no profit riconosciuta leader mondiale nella fornitura dei principi e delle certificazioni di formazione per i professionisti della Rete Internet; è presente in 100 paesi, con 130 sedi ufficiali in rappresentanza di più di 165.000 associati. La sua missione.

� Fornire programmi formativi di qualità;

� Fornire agli associati supporto e collaborazione a livello regionale, nazionale e internazionale,

nonché un marchio di affiliazione riconosciuto a livello mondiale;

� Promuovere i principi universali di etica e di pratica professionale per tutti i professionisti della

Rete Internet;

� Fornire supporto per la definizione e lo studio di normative nei Paesi in cui è presente

Cos’è IWA/HWG ( 1 di 2 )



Partecipazioni e attività

Network:

http://www.iwa.it - http://webaccessibile.org - http://www.itlists.org - http://blog.iwa.it - http://www.skillprofiles.eu

Contatti

[email protected]

Cos’è IWA/HWG ( 2 di 2 )



...Dio creò il cielo e la terra. La terra era informe e deserta e le tenebre ricoprivano l'abisso e lo spirito di Dio aleggiava sulle acque. Dio disse: «Sia la luce!». E la luce fu. Dio vide che la luce era cosa buona e separò la luce dalle tenebre.

(Genesi 1. Versi 1-4)

Uh... Forse ho sbagliato il testo!

In principio...



... Tim Berners Lee pensò al World Wide Web, una rete capace di far condividere documentazione scientifica indipendente dalla piattaforma utilizzata.

Sono passati ben 17 anni da allora e le cose si sono evolute...

Si è partiti da un web informativo

per giungere ad un web partecipativo

poi a un web collaborativo

per sfociare in un web sociale

In principio...



La nuova tendenza è il web applicativo.

Evolvendosi, il web, ha fatto sì che i siti si siano trasformati in vere e proprie applicazioni.

Grazie ad un massivo uso di JavaScript, si è trasportato nel web quelle che tipicamente erano pensate come applicazioni desktop.

Alcuni esempi di applicazioni desktop sul web

Queste applicazioni sono AJAX oriented.

...In fine

Google Apps

Google Mail

Google Calendar



Ajax è il nome di un'ottimo

� detersivo,

� sgrassatore,

� lavapavimenti

che ha raggiunto l'apice delle vendite in Italia alla fine degli anni '80.

La sua confezione era una bottiglia con un dosatore spray particolarmente comodo e maneggevole.

Credo che dobbiate scusarmi. È l'emozione che mi fa confondere...

Cos'è Ajax?



AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo web per creare applicazioni web interattive. L'intento di tale tecnica è quello di ottenere pagine web che rispondono in maniera più rapida, grazie allo scambio in background di piccoli pacchetti di dati con il server, così che l'intera pagina web non debba essere ricaricata ogni volta che l'utente effettua una modifica.

Questa tecnica riesce, quindi, a migliorare l'interattività, la velocità e l'usabilità di una pagina web.

Cosa vuol dire AJAX? (tratto da wikipedia)



AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente.

Col tempo AJAX ha assunto un significato (impropriamente) più esteso: è AJAX tutto ciò che modifica il DOM.

Quando si parla di AJAX

immaginiamo:

� Caricamento di frammenti di pagina

� Animazione di oggetti sulla pagina

� Applicazione e modifica dello stile degli elementi sul documento

Ma l'accessibilità è garantita?

No!

...



Le tecnologie assistive non sono in grado di verificare quello che succede nella pagina, perchè per ciascun cambiamento che noi percepiamo a video, è cambiato qualcosa nel Document Object Model.

Mantenere traccia di tutti i cambiamenti potrebbe portare ad una confusione totale delle tecnologie assistive che potrebbero quindi leggere le informazioni in modo disordinato e senza alcun criterio.

Perchè no?



Leggi il testo che segue

capirò disordinato non questo leggo in nulla modo testo Se!

Chiaro?

Se leggo questo testo in modo disordinato non capirò nulla!

Ma allora non si può far nulla?

È comunque possibile fare qualcosa per assicurare l'accessibilità delle applicazioni Web!

Un pratico esempio



Il gruppo di lavoro Protocols & Formats istituito dal W3C, sta lavorando ad una serie di documenti nel quale vengono definite delle specifiche che (se utilizzate nel modo corretto) possono consentire al miglioramento dell'accessibilità delle applicazioni Web. Il documeto principale prende il nome di: Accessible Rich Internet Applications (WAI-ARIA) Version 1.0. È inoltre corredato dei seguenti documenti:

� ARIA Primer: che indirizza gli sviluppatori ad una comprensione del problema nell'utilizzo di

tecnologie miste (DHTML + AJAX)

� ARIA Best Practice: che descrive come implementare ARIA per esempi;

� ARIA Roadmap: che definisce le stime dei tempi di redazione, pubblicazione e possibile

implementazione delle specifiche da parte dei vendor;

In quei documenti sono indicate le regole e le modalità con le quali è possibile sviluppare applicazioni web comprensibili dalle tecnologie assistive.

ARIA di cambiamento!



Robert De Niro in "Gli intoccabili" ha usato questa frase alla fine del film per offendere un giovanissimo Harison Ford.

ARIA è solo un piccolo ma importante passo per il conseguimento di un obiettivo più grande: la possibilità di avere un web realmente

utilizzabile da tutti!

"Non bisogna smettere di combattere... Qui finisce la lezione!".

Sei solo chiacchiere e distintivo, chiacchiere e distintivo!



Un paio di esempi pratici potrebbero chiarire lo scopo delle specifiche indicate dal gruppo di lavoro Protocols & Formats

Esempio Stazione meteo

Link: http://jastegg.it/tests/weather6/

Nell'esempio è stato impostato su ogni riga della tabella l'attributo aria-live="polite" così da segnalare eventuali variazioni. Infatti, l'attributo aria-live , consente di indicare ad una tecnologia assistiva eventuali cambiamenti nella struttura del documento comportandosi secondo quanto indicato in questo valore.

(Esempio tratto da un test di Gez Lemon )

Esempio Utenti online

Link: http://jastegg.it/tests/im-users/index.html

Oltre all'utilizzo dell'attributo aria-live in questo esempio è stato fatto uso dell' attributo aria-

relevant che in congiunzione con il precedente attributo consente di indicare in che modo interpretare il cambiamento (al nostro scopo è bastato "additions removals" )

Ma in pratica?



Fino ad oggi, per consentire alle tecnologie assistive di ottenere dei risultati quantomeno accettabili, sono state utilizzate delle soluzioni non troppo semplici da implementare, con una certa complessità nella manutenzione e un margine di successo abbastanza basso e vincoli progettuali abbastanza rigidi (che non sempre corrispondono alla realtà).

Un form di login

Link: http://soci.iwa.it/old.login.php

Questo form fa uso di AJAX per autenticare l'utente ovviamente degradando in caso di assenza di JavaScript. Il difetto di questo script è che per consentire allo screen reader di leggerne il contenuto è di dare il focus al messaggio di notifica.

Quanto è correta la cosa? Proviamo a vedere lo stesso form "ARIA Compliant"

Link: http://soci.iwa.it/

Ancora non siete soddisfatti?



La necessità di avere applicazioni accessibili, non pregiudica dall'avere caratteristiche avanzate. Molti Social Network attuali non supportano queste caratteristiche tagliando fuori un certo target di utenze.

Facciamone una questione economica!

Se questa utenza fosse solo il 5% del mercato internet, quanto traffico potrebbe generare?

Le statistiche pubblicate da Nielsen//NetRatings indicano come utenza globale 360.985.492 utenti al 31 Dicembre 2000.

� 18 milioni di persone circa sono il 5% dell'utenza internet mondiale

� 2,906 miliardi di euro è il fatturato italiano online del 2006 (fonte La Repubblica.it)

� 145,3 milioni di euro è il 5% del fatturato italiano on-line.

E se fosse solo l'1%?

Butteresti via una fetta di mercato che vale 1,45 milioni di euro?

Una piccola osservazione: il mercato elettronico italiano è tra quelli che in europa

fatturano di meno (la media europea è oltre il 3.5%) (Rapporto Assinform anno 2007)

In conclusione



Questa presentazione è stata ascoltata grazie all'utilizzo degli attributi definiti in ARIA. In alternativa lo screen reader sarebbe stato muto!

Per maggiori dettagli sulla modalità di costruzione di questa presentazione per il web consultare i link di approfondimento.

Ma chi supporta ARIA?

L'elenco degli strumenti software che già implementano ARIA e delle tecnologie assistive che supportano o sono prossime al suo supporto, è molto lungo.

� Firefox (dalla versione 3)

� Internet Explorer 8

� Jaws

� Opera (dalla versione 9.5)

� ...

Mozilla Developer Center presenta un elenco costantemente aggiornato

Non basta?



� Accessible Rich Internet Applications (WAI-ARIA) Version 1.0;

� La tecnologia AJAX;

� L'accessibilità di AJAX (webaccessibile)

� JAST A Slide: l'evoluzione delle diapositive on-line!

� AJAX (su Wikipedia)

Per approfondimenti sul tema.



� La presentazione appena letta e ascoltata è disponibile all'url: http://diegolamonica.info/smau-

2008/

� Questa presentazione è stata possibile grazie a JAST-A-Slide (http://jastegg.it/jastASlide/)

� Chiunque è libero di riutilizzare questo strumento per produrre presentazioni web che siano

supportate dalle tecnologie assistive.

� L'assenza delle presenti indicazioni alla fine della presentazione sarà ritenuta una violazione del

diritto d'autore e potrà essere perseguibile secondo le normative vigenti.

Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale-Non opere derivate 3.0 Unported. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-nc-nd/3.0/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. Diritti, marchi registrati e siti web riportati in immagini e url sono riservati e proprietà dei diretti interessati e relative aziende. IWA/HWG e l’associazione IWA Italy non sono direttamente o indirettamente responsabili dei contenuti riportati nel presente documento che sono ad esclusiva cura e responsabilità del relatore.

Termini e licenza del documento



Technology

Applicazioni Ajax Accessibili