esempi pratici
DESCRIPTION
Verrà illustrato un caso pratico di modifica di un sito web, su tecnologia ASP.NET 1.1, completo ma non accessibile: obiettivo del tutorial è quello di ottenere in tempi brevi una versione accessibile dello stesso sito.TRANSCRIPT
3° Workshop "Accessibilità: primi passi
per un mondo fruibile da tutti"
Alessandro Olivi
Modellazione di pagine WEB e accessibilità
Sommario
• Evoluzione delle web page, in tre step– Obiettivo: micro-sito accessibile
• Case History di un progetto ASP.NET 1.1
Prendiamo per assunto
• Legge Stanca e i 22 requisiti – http://www.pubbliaccesso.gov.it/
• Specifiche internazionali alle quali si è ispirata la legge Stanca– W3C – WCAG– Section 508
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 l’evoluzione nella creazione di pagine web
– 1) Layout tabellare– 1b) Layout “assistito” da Visual Studio – 2) Pagine strutturate– 3) Pagine accessibili
Prima del 2004 Pagine accessibile
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 …
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”
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
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
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)
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
I validatori di VS2005
• La legge Stanca fa riferimenti a WCAG e Section 508
DOCTYPE inserito da VS 2005
• In VS 2003 le nuove pagine non erano create in XHTML
• In VS 2005 di default<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Strict
Per far si che il rendering dei controlli sia Strict• Web.Config
<xhtmlConformance mode="Strict" />
Si possono modificare i Template di Visual Studio[C:\Programmi\Microsoft Visual Studio 8\Common7\IDE\ItemTemplates\Web\CSharp\1033]
XHTML
• È la mappatura di HTML su XML, con le sematiche xml viene formalizzato l’html
• Demo Step 3 : “pagina accessibile”
Controlli ASP.NET e TAG HTML
Nell’esempio useremo:• Master Page & Contentplaceholder• HyperLink• SiteMapPath• Button• Literal
I tag HTML ed un esempio script
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?
LINK• Devono avere descrizioni interpretabile da qualsiasi device
– Obiettivo: informare l’utente 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 l’attributo TARGET
Script è pagine accessibili • Rif. Art. 15 legge Stanca
Script per l’apertura di una pagina – Si deve informate l’utente che l’apertura sarà in un’altra finestra
– Se il browser non permette l’apertura della pagina in pop-up, la pagina deve essere comunque visibile
Apertura di un pop-up
<a href=" info.html " target="_blank">
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
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
… 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]
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
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
Analisi dei costiVantaggi nell’usare 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
Grazie