Esempi pratici

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

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
Prima del 2004 Pagine 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

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:ProgrammiMicrosoft Visual Studio 8Common7IDEItemTemplatesWebCSharp1033]

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
Apertura di una pagina in pop-up con il target
<a href=" info.html " target="_blank">
Demo: “Step3” pagina B
Rif:http://webdesign.html.it/articoli/leggi/304/costruire-popup-accessibili

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 costi
Vantaggi 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

Esempi pratici

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Esempi pratici

Similar to Esempi pratici (20)

More from DotNetMarche

More from DotNetMarche (20)

Esempi pratici