Presentazione Antonio Giovanni Schiavone

Transcript

HTML5 e Accessibilità
Antonio Giovanni Schiavone, ISTI-CNR
[email protected]
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
HTML5 e Accessibilità – Handimatica 2014, 28 Novembre 2014
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
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
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

Presentazione Antonio Giovanni Schiavone

Transcript

Documenti analoghi

pubcoder annuncia la nuova esportazione in html5 per gli utenti

LINGUAGGI DI PROGRAMMAZIONE - HTML5 E CSS3 - Forma-re-te

Web Designer e Comunicazione Multimediale

advertising guide - E

Roberto Chiaveri

1 I. T. S. O. S. “A. S ” Motori ricerca: principi funzionamento, spider e

Sviluppatore/ analista • Esperienza di sviluppo APP con tecnologia

Presentazione di Maria Claudia Buzzi, Marina Buzzi

FAI TRIS CON IL TUO PC: WORLD, EXCEL ED INTERNET