HTML5 e Accessibilità Antonio Giovanni Schiavone, ISTI-CNR schiavone@isti.cnr.it
Cos è l HTML? L'HyperText Markup Language (HTML) è il linguaggio di markup usato per la formattazione di documenti ipertestuali disponibili nel World Wide Web. In altri termini, è il linguaggio utilizzato per definire la struttura ed i contenuti di una pagina web. Nasce all inizio degli anni 90 da un idea di Timothy John Berners-Lee, a quei tempi ricercatore presso il CERN di Ginevra e attualmente Direttore del World Wide Web Consortium (W3C) Evoluzione dell HTML 1993 - HTML 1.0 1995 - HTML 2.0 1997 - HTML 3.2 1999 - HTML 4.01 2014 HTML 5 2
Novità dell HTML5 L HTML5 introduce importanti novità nel linguaggio HTML, derivanti sia dall evoluzione tecnologica dei dispositivi che utilizzano tale linguaggio (ad es. i dispositivi mobili), sia da una crescente attenzione alla richieste degli sviluppatori (maggiore semplicità e potenza espressiva), che dal lavoro svolto negli ultimi anni dai vari gruppi che compongono il W3C, focalizzandosi su argomenti specifici (ad es. accessibilità, usabilità, multimedia, grafica tridimensionale, grafica vettoriale, etc.). Principali innovazioni dell HTML5 Tag Semantici Multimedialità (Riproduzione audio e video) Migliore esperienza utente (Gestione dei Form, WebWorkers) Grafica vettoriale e tridimensionale Memorizzazione di dati e Applicazioni Off-line Funzionalità Device-aware (Geolocalizzazione, Acquisizione audio/video) 3
I nuovi tag semantici Un tag semantico è un elemento del linguaggio HTML che descrive in modo chiaro il suo significato e il suo ruolo all interno della pagina. L HTML5 introduce 6 nuovi tag semantici (<header>, <nav>, <article>, <section>, <aside>, <footer>): la definizione della maggior parte di essi trae direttamente spunto dai WAI-ARIA Roles. WAI-ARIA Roles HTML5 Semantic Tags 4
Multimedialità (1) Al fine di creare siti web sempre più coinvolgenti e ricchi di contenuti, negli ultimi anni gli sviluppatori hanno utilizzato varie tecnologie per includere all interno di pagine web elementi multimediali, quali tracce audio e contenuti video. Tali tecnologie, spesso molto diverse fra loro, presentavano vari problemi e svantaggi: Richiedevano l installazione di software aggiuntivi Non erano compatibili con i software usualmente utilizzati da persone con disabilità (ad es. gli screen reader). Non vi era uno standard nel definire i nomi e le funzionalità per gestire i vari parametri relativi alla riproduzione dei contenuti multimediali. Non erano fornite le funzionalità per gestire contenuti aggiuntivi, quali ad esempio sottotitoli e trascrizioni dei contenuti audio. 5
Multimedialità (2) L HTML5 introduce i nuovi tag <audio>e <video>, utilizzabili per includere rispettivamente tracce audio e filmati attraverso una modalità standard. In combinazione ad essi, è introdotto anche il tag <track>, utilizzabile per associare ai contenuti multimediali i sottotitoli e le trascrizioni realizzati attraverso il formato Web Video Text Tracks Format (WebVTT). 6
Gestione dei Form (1) Fin dalle prime versioni dell HTML è stata inclusa la possibilità di definire moduli elettronici per l inserimento di informazioni all interno di siti o applicazioni web. Sinora però erano stati previste solo poche tipologie di dati inseribili all interno di un form (campi testuali, file, password, bottoni, caselle di controllo, pulsante di opzione, selezione da un elenco di possibili scelte). 7
Gestione dei Form (2) Era frequente il caso in cui uno sviluppatore avesse necessità di utilizzare un tipo di dato più specifico (ad es. prevedere l inserimento di una data, di un indirizzo email, di un valore numerico all interno di un determinato intervallo). In tale situazione, era suo compito sviluppare tecniche volte a: Fornire una rappresentazione grafica del dato richiesto (ad es. visualizzare un calendario). Indicare se il dato era obbligatorio (e gestire eventuali segnalazioni di errore). Validare il dato inserito (e gestire eventuali segnalazioni di errore). Tradurlo in uno delle tipologie di dato previste dal linguaggio (tipicamente un campo testuale). Fra le varie tecniche utilizzate, molte avevano un comportamento differente in base al software utilizzato per elaborare la pagina web, e spesso alcune funzionalità erano totalmente inutilizzabili per alcune categorie di software. 8
Gestione dei Form (3) L HTML5 introduce tredici nuove tipologie di dato (color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week), oltre alla possibilità di indicare se un campo è obbligatorio (required), coprendo così le più comuni esigenze nella compilazione di un form. Questa soluzione presenta numerosi vantaggi: Si definisce uno standard per la gestione dei più comuni tipi di dato utilizzati nelle form. Si delega al software che elabora la pagina web la scelta del migliore modo per presentare all utente la richiesta di inserimento del dato. Si delega al software che elabora la pagina web la scelta del migliore modo per avvertire l utente delle presenza di un errore (ad es. mancato inserimento di un dato obbligatorio o dato inserito diverso dal tipo richiesto). Generale miglioramento dell esperienza utente. 9
HTML5 e WAI-ARIA D: Si possono utilizzare contemporaneamente l HTML5 e le WAI-ARIA? R: Si può, anzi SI DEVE! HTML5 e WAI-ARIA sono due tecnologie distinte e assolutamente compatibili e sovrapponibili. E calorosamente consigliato utilizzarle entrambe per almeno tre motivi: 1. Sebbene l HTML5 prenda ispirazione (anche) dalle WAI-ARIA e ne erediti parte dei criteri, non tutte le funzionalità di WAI-ARIA sono presenti in HTML5 2. Non è possibile ipotizzare a priori quale browser, screen reader o altro software l utente utilizzi per esaminare una pagina web. In generale quindi non è dato conoscere la compatibilità del software con l uno o l altro standard 3. Utilizzare entrambi gli standard implica soffermarsi a ragionare sulla struttura e sui contenuti della pagina web che si sta realizzando, sulla loro importanza e sul loro ruolo all interno del documento, potenzialmente garantendo un risultato finale migliore. 10
Problemi da risolvere: i canvas Rispetto alle precedenti versioni del linguaggio, l HTML5 ha compiuto notevoli passi aventi nella definizione di un web accessibile per tutti: tuttavia rimangono ancora aperti alcuni problemi da risolvere. Un tipico esempio è l introduzione del nuovo tag <canvas> (tela virtuale), che permette di definire, all interno di una pagina web, uno spazio in cui è possibile disegnare dinamicamente ed animare sia immagini bidimensionali che tridimensionali. Le possibili applicazioni dei canvas sono molteplici (ad es. videogiochi, fumetti animati, simulazioni scientifiche, software di disegno, grafici statistici in tempo reale), rendendo tale tag una delle innovazioni più interessanti dell HTML5. Dal punto di vista dell accessibilità i canvas rappresentano però una sorta di «scatola nera», da cui, allo stato attuale, non è possibile ottenere informazioni significative sul loro contenuto e quindi non è possibile comunicarle all utente con modalità diversa da quella visiva. La risoluzione di tale problema sarà una delle prossime sfide da affrontare nell ambito dell accessibilità del web. 11
Riferimenti utili (W3C) HTML5 Specification Unicorn - W3C's Unified Validator WebVTT: The Web Video Text Tracks Format Web Accessibility Initiative (WAI) Using WAI-ARIA in HTML 12
Domande? Grazie! 13