3° Workshop "Accessibilità: primi passi per un mondo fruibile da tutti" Alessandro Olivi Modellazione di pagine WEB e accessibilità

Presentazione sul tema: "3° Workshop "Accessibilità: primi passi per un mondo fruibile da tutti" Alessandro Olivi Modellazione di pagine WEB e accessibilità"— Transcript della presentazione:

1 3° Workshop "Accessibilità: primi passi per un mondo fruibile da tutti" Alessandro Olivi Modellazione di pagine WEB e accessibilità

2 Sommario Evoluzione delle web page, in tre step –Obiettivo: micro-sito accessibile Case History di un progetto ASP.NET 1.1

3 Prendiamo per assunto Legge Stanca e i 22 requisiti –http://www.pubbliaccesso.gov.it/http://www.pubbliaccesso.gov.it/ Specifiche internazionali alle quali si è ispirata la legge Stanca –W3C –WCAG –Section 508

4 Sito Conforme alla legge Stanca e tecnologie Asp.Net Obiettivi: –Un flash sulla modellazione di pagine web –Costruire una pagine Asp.Net accessibile 3 step per descrivere levoluzione nella creazione di pagine web –1) Layout tabellare –1b) Layout assistito da Visual Studio –2) Pagine strutturate –3) Pagine accessibili Prima del 2004Pagine accessibile

5 Step 1 Realizzazione di una pagina HTML 3.02 –Utilizzo dei TAG di tabulazione per definire la struttura della pagina –Demo: Step1 realizzato manualmente –Il drag and drop di VS2005 tenta di arrivare da solo allo Step2 …

6 Strumenti Visuali Gli strumenti visuali usati per realizzare pagine HTML/PHP/ASP/ASP.NET … agiscono sulla formattazione modificando: –i TAG ed i loro attributi –Aggiungendo stili ai TAG –Demo: Step1b

7 Step 2 DOCTYPE: Document Type Declaration –Indica la conformità del DTD A cosa serve: Informa il browser della tipologia del documento che sta caricando –Sintassi utilizzata e Tag ammessi –Aumenta la velocità di caricamento –Aumenta indirettamente il PageRank di un sito Nota –Step 1: Le formattazioni sono attributi dei TAG –Step 2: Utilizzo degli stili

8 HTML 4 e CSS Obiettivo: separare il contenuto della pagina dalla sua presentazione grafica Vantaggio: la grafica di un sito può cambiare nel tempo, utilizzando i tag con gli attributi di formattazione si complica il mantenimento del sito

9 Pagina strutturata La pagina non è ancora accessibile Non è una nuova tecnologia da imparare, ma e una vecchia tecnologia usata secondo specifiche diverse (imposte dalla legge e del buon senso)

10 Requisiti principali per la conformità alla legge Stanca Tipologie dei requisiti –Strutturali –Di navigazione Come verificare cosa stiamo facendo ? Rispettiamo i 22 requisiti? –Webaccessibile.org –Toolbar Microsoft –I Validatori di VS2005

11 I validatori di VS2005 La legge Stanca fa riferimenti a WCAG e Section 508

12 DOCTYPE inserito da VS 2005 In VS 2003 le nuove pagine non erano create in XHTML In VS 2005 di default

13 XHTML Strict Per far si che il rendering dei controlli sia Strict Web.Config Si possono modificare i Template di Visual Studio [C:\Programmi\Microsoft Visual Studio 8\Common7\IDE\ItemTemplates\Web\CSharp\1033]

14 XHTML È la mappatura di HTML su XML, con le sematiche xml viene formalizzato lhtml Demo Step 3 : pagina accessibile

15 Controlli ASP.NET e TAG HTML Nellesempio useremo: Master Page& Contentplaceholder HyperLink SiteMapPath Button Literal I tag HTML ed un esempio script

16 Struttura della pagina Le tabelle non vengono usate per definire la struttura della pagina, la struttura grafica è demandata al CSS Le tabelle non vanno più usate?

17 LINK Devono avere descrizioni interpretabile da qualsiasi device –Obiettivo: informare lutente sulla navigazione Cè un link che collega a una certa pagina Devono avere un tasto di accesso rapido associato [AccessKey] –I.E. Alt+Lettera Non è presente lattributo TARGET

18 Script è pagine accessibili Rif. Art. 15 legge Stanca Script per lapertura di una pagina –Si deve informate lutente che lapertura sarà in unaltra finestra –Se il browser non permette lapertura della pagina in pop-up, la pagina deve essere comunque visibile

19 Apertura di un pop-up Apertura di una pagina in pop-up con il target Rif:http://webdesign.html.it/articoli/leggi/304/costruire-popup-accessibili Demo: Step3 pagina B

20 Storia di un progetto … Progetto A9 Sintesi dei requisiti: –Portale web con banner pubblicitari –Gestione di un mercatino localizzato a livello territoriale –Autenticazione mediante smart card –Infrastruttura di sicurezza firewall, posta elettronica e gestione in datacenter

21 … che divenne (accessibile) Logica funzionale: realizzata in.NET 1.1 –Logiche di caricamento dei banner –Accesso controllato e logging –Back-office e gestione del DB Grafica e CSS –[realizzato da una società che ha curato il layout grafico]

22 Impatto della legge Stanca Tipologia del cliente che ha commissionato il lavoro: Grande azienda di telecomunicazioni Il cliente finale: Una società a partecipazione pubblica Dovevano essere garantiti i requisiti definiti dalla Legge Stanca

23 Front-Office Cosa era necessario: DataList multi colonna accessibili Cosa non si è potuto usare: –Nessun controllo asp.net ad eccezione dei link e literal Come si è risolto: realizzando controlli basati sul Repeater e Literal ma che generassero codice html accessibile con riferimenti a classi del CSS

24 Analisi dei costi Vantaggi nellusare un ambiente RAD Drag and drop costo 0 Realizzazione di un componente x giorni Costi aggiuntivi: un componente che ha un render corretto non è detto che sia accessibile costi di debugging Stima del fattore di costo in giornate uomo: X 5

25 Grazie