Si.Tra.
DEIT, Dipartimento di Elettronica Intelligenza Artificiale e Telecomunicazioni
Università Politecnica delle Marche, Ancona
Studio dell'accessibilità del portale
ASSAM - Si.Tra. Sistema Informatico
di Tracciabilità e Rintracciabilità dei
prodotti agroalimentari
Relatore prof. Aldo Franco Dragoni
Candidato Federico Trevisani
Corso di laurea in Ingegneria Informatica e dell’Automazione
Web Accessibility
Il web è ormai una risorsa
chiave per l’ acquisizione di
informazioni.
L’ impossibilità di accedere al
web potrebbe diventare un
ulteriore elemento di
emarginazione, invece di
un’occasione irripetibile per
favorire l’integrazione dei
disabili e degli anziani.
Beneficiari dell’accessibilità
La Web accessibility ha una valenza:
 sociale
 economica
 tecnologica
L’ accessibilità si basa su uno dei principi fondamentali del
Web: l’ Universal Access (accesso alle informazioni garantito a
persone con culture, tradizioni e strumenti diversi, e quindi
anche ai disabili).
Ma cos’è l’Accessibilità?
Accessibile è un contenuto web che può essere fruito
da un utente indipendentemente che esso sia affetto
da disabilità o limitazioni fisiche e/o cognitive,
occasionali o permanenti, e indipendentemente dal
tipo di tecnologia utilizzato per collegarsi alla Rete.
In definitiva rendere un contenuto accessibile significa
renderlo raggiungibile sia fisicamente (percepibile) che
mentalmente (comprensibile) da tutte le categorie di
utenti (disabili inclusi).
Legge Stanca
 L’Italia si è posta all’avanguardia rispetto alla maggior parte delle altre
nazioni, di uno strumento legislativo pensato per tutelare il diritto degli
utenti con disabilità a fruire degli strumenti informatici, e in particolare
di Internet, senza subire discriminazioni rispetto ai cosiddetti
“normodotati”. L’ accessibilità dei siti è quindi un elemento irrinunciabile
nella realizzazione di servizi forniti per via telematica.
 Il disegno di legge sull’Accessibilità delle applicazioni telematiche, è stato
approvato dal Senato e pubblicato sulla G.U. n°13 del 17/01/2004 come
legge 4/2004 intitolata: Disposizioni per favorire l’accesso dei soggetti
disabili agli strumenti informatici, nota anche come “legge Stanca” (dal
nome dell’allora ministro per l’innovazione e le tecnologie Lucio Stanca).
 Questo significa che tutti i siti della Pubblica Amministrazione italiana,
i siti che godono di finanziamento pubblico,aziende private
concessionarie di servizi pubblici, aziende municipalizzate regionali,
ecc… saranno obbligati al rispetto delle linee guida sull’Accessibilità.
 Tale normativa prevede responsabilità precise, anche a livello
dirigenziale, per l’ inosservanza del principio fondamentale di garantire l’
accesso all’ informazione a tutti.
WCAG 1.0
Il World Wide Web Consortium (o W3C),è un ente sovranazionale
senza scopo di lucro, che ha lo scopo di standardizzare i linguaggi e
le tecnologie per il Web.
La sezione che si occupa di accessibilità all’interno del W3C è la WAI
(Web Accessibility Initiative)
Le Web Content Accessibility Guidelines 1.0 (WCAG 1.0), W3C
Recommendation del 5 maggio 1999, sono ormai assunte come
standard de facto per la definizione dei criteri di accessibilità dei siti.
Il documento elenca 14 guideline (o principi per una progettazione
accessibile).
Gli esperti della WAI stanno lavorando da ormai diversi anni alle
WCAG 2.0.
WCAG 1.0
Ciascuna “Linea Guida” è approfondita da dei Punti di
Controllo (checkpoint) che analizzano le situazioni tipiche delle
pagine Web.
Ad ogni Punto di Controllo è assegnato un livello di priorità
basato sull'impatto che esso possiede sull'accessibilità.
Priorità 1 : obbligatorio per garantire l’accesso al contenuto.
Priorità 2 : difficoltà nell’accesso al contenuto per alcuni utenti.
Priorità 3 : facoltativo ma migliora l’accesso ai documenti web.
Tecnologie assistive
 Browser testuali: un programma utente che elimina
automaticamente tutti gli elementi grafici presenti in un documento
web, mostrando all’utente solo i testi in esso contenuti, comprese le
descrizioni testuali alternative. L’interazione con l’utente avviene
principalmente via tastiera.
 Screen readers: lettore di schermo, è un software che traduce i
contenuti presenti sul monitor di un computer in una forma differente da
quella grafica, di solito in parole pronunciate da una voce sintetica.
 Display Braille: tavoletta costituita da una riga di 40 /80 celle Braille,
fatta ognuna da 6/8 punti a rilievo: Grazie a meccanismi piezoelettrici, i
punti a rilievo si alzano e si abbassano di continuo, riproducendo sulla
barra le lettere alfabetiche che compongono le parole presenti sullo
schermo.
 Ingranditori di schermo: software che, usando varie modalità,
ingrandisce in tutto o in parte i contenuti del monitor.
 Sistemi operativi: strumenti per l’accessibilità incorporati.
Browsers utilizzati
 Internet Explorer
 Mozilla Firefox
 Safari
 Konqueror (linux)
 WebbIE (testuale)
 WinGuido (vocale)
Linea guida 1
Fornire contenuti che, quando
presentati all’utente, svolgono
essenzialmente la stessa funzione o
scopo dei contenuti uditivi o visivi.
Punto di controllo 1.1 (Priorità 1):
Fornire un equivalente testuale per ogni elemento
non di testo.
Punto di controllo 1.1
Motivazione
Requisito da soddisfare per garantire
l’accessibilità a livelli minimi.
Molti utenti utilizzano strumenti di navigazione
che si basano sui soli contenuti testuali (non
vedenti) è quindi necessario fornire equivalenti
testuali per immagini, rappresentazioni grafiche
di testo (compresi i simboli e loghi), ecc.
Problemi riscontrati
 Non tutte le immagini e loghi del sito avevano
testo alternativo per permetterne la
visualizzazione in caso di immagini
disabilitate.
N.B.
Questo punto di controllo è di priorità 1.
Soluzione adottata
 Inserimento all’interno dei tag <img> di tutte le pagine
del sito dell’attributo alt=“testo alternativo”
Esempio nella pagina iniziale:
<img src="img/filieraittica.gif"
alt="Filiera Ittica" class="pics" />
E nel logo dell’assam in alto a destra:
<img src="img/logoassamsmall.gif"
alt="Logo ASSAM" />
Linea guida 3
Marcare i documenti per mezzo degli
appropriati elementi strutturali.
Controllare la presentazione tramite i fogli di
stile piuttosto che tramite elementi e attributi
di presentazione.
Linea guida 3
 Punto di controllo 3.2 (Priorità 2):
Creare documenti che possano essere validati confrontandoli con una
grammatica formale pubblicata.
 Punto di controllo 3.3 (Priorità 2):
Usare i fogli di stile per controllare l’impaginazione e la presentazione.
 Punto di controllo 3.4, priorità 2
Usare unità di misura relative invece che assolute nei valori di attributo del
linguaggio di marcatura e nei valori di proprietà dei fogli di stile.
 Punto di controllo 3.5 (Priorità 2):
Usare elementi di intestazione per veicolare la struttura del
documento e usarli in modo conforme alle specifiche
 Punto di controllo 3.6 (Priorità 2):
Marcare le liste ed elencare le voci della lista in modo appropriato
 Punto di controllo 3.7 (Priorità 2):
Marcare le citazioni
Punto di controllo 3.3 (priorità 2)
Punto di controllo 6.1 (priorità 1)
 Usare i fogli di stile per controllare l’impaginazione e
la presentazione.
 Organizzare i documenti in modo che possano
essere letti senza i fogli di stile.
Linea guida 3
• Contenuto. È l’informazione fornita da un documento (testi,
immagini, tabelle, grafici, filmati …
• Presentazione. È il modo in cui i contenuti appaiono all’utente
ovvero l’insieme delle loro caratteristiche. L’insieme degli stili
applicati a un documento: i fogli di stile (CSS).
• Struttura. È l’insieme delle relazioni tra i contenuti di un
documento. I rapporti di subordinazione e di coordinazione tra i
contenuti sono l’ossatura, lo schema che rappresenta la struttura di
un documento. <tag>
Motivazioni
 3.3) Rende il documento più pulito, leggero e
ordinato in modo da garantire una fruizione
ottimale da parte di screen readers, browser
testuali.
 6.1)Garantire la fruibilità della pagina
disabilitando i fogli di stile in modo che un
utente possa comunque accedere ai
contenuti in un ordine di lettura
comprensibile.
Motivazioni
3.2) La creazione di contenuti web che non rispettano le grammatiche
formali pubbliche causano dei problemi di accesso ai contenuti da parte
di utenti che utilizzano browser o tecnologie assistive che non riescono
ad identificare elementi o attributi non standard.
3.4) Le unità di misura relative, quali em e , % consentono di impostare
testi ridimensionabili e layout liquidi, che hanno la proprietà di adattare i
contenuti, nei limiti del possibile, alla larghezza della finestra del browser.
• riduce il rischio di comparsa della barra di scorrimento
orizzontale,(fattore d’inaccessibilità grave per gli utenti
ipovedenti).
3.5) Gli elementi da H1 a H6 sono fondamentali per l’accessibilità.
Permettono infatti di stabilire la gerarchia reciproca dei contenuti di un
documento e sono utili soprattutto per chi naviga con un sintetizzatore
vocale.
3.6) Gli elenchi ordinati aiutano gli utenti non-visuali nella navigazione
Problemi riscontrati (1)
 Nel codice c’è un mix di contenuti, strutture e presentazioni
(tag soup).
 Il foglio css risulta scarno e la maggior parte degli elementi di
presentazione sono “inline” nella pagina (tag soup).
ESEMPIO (homepage):
<hr color =green size =2/><span style="color: #1267bc"> Pesce</span><a
href=filiera_ittica_rb.html><br />
<img src ="img/filieraittica.gif" alt="Filiera Ittica" style="width: 124px; height:
56px" /></a>
<hr color =green size =2/>
<a href=filiera_bovini_rb.html > Carne Bovina
<img src ="img/filierabovini.gif" alt="filiera bovini" style="width: 121px;
height: 66px" /></a> …
Soluzioni adottate (1)
 Eliminazione dal codice di marcatura gli elementi e gli
attributi di presentazione,sostituendoli con l’uso dei fogli
di stile per ottenere equivalenti effetti di formattazione.
 Inserimento di appositi elementi strutturali al posto
di quelli usati impropriamente.
CSS
 Rielaborazione e completamento del foglio di stile
 In questo modo ogni elemento strutturale
(img,div,body,p,H1, ecc.) ha la propria presentazione
nel foglio di stile foglia.css.
 L’ allineamento, i margini e il posizionamento degli
elementi nella presentazione di una pagina sono stati
gestiti anch’essi tramite il foglio di stile
Soluzioni adottate (1)
ESEMPIO (homepage):
<a href="filiera_latteAQ_rb.html" title="Filiera Latte"
class="grass">
Latte Alta Qualità</a> <div class="pi">
<a href="filiera_latteAQ_rb.html" class="pic" title="Filiera
Latte"><img src="img/filieralatteAQQM.gif" alt="Filiera
Latte" class="pics" /></a></div>
Eliminando del tutto la presentazione nel documento
html che viene affidata ai fogli di stile, gli elementi
essenziali della struttura rimangono visibili e
comprensibili per il lettore.
Problemi riscontrati (2)
 Togliendo la presentazione dalle pagine il sito
risulta poco accessibile
 Utilizzando alcuni browser i contenuti si
sovrapponevano rendendo alcune pagine poco
leggibili.
 Pagine non adatte per risoluzioni più basse
(comparsa barra scorrimento orizzontale)
ORIGINALE
Visione piatta
MODIFICATO
Visione con liste a più livelli
ORIGINALE
MODIFICATO
Soluzioni adottate (2)
 Ristrutturazione della pagina tramite i tag contenitori
<div> e posizionamento tramite l’attributo “float”.
 Dimensionato tutti i div, immagini e tabelle (height e
width) in unità relative (% ; em) nel foglio di stile. In
questo modo al ridimensionamento della pagina tutti
gli elementi si riducono a fisarmonica evitando cosi la
comparsa della barra orizzontale.
 Ottimizzazione del sito fino alla risoluzione 800*600
 Dimensione del testo in “em” e non piu in “pt” o “px”
per facilitarne l’ingrandimento a favore degli
ipovedenti che utilizzano gli ingranditori di schermo.
Originale
Modifica
RISOLUZIONE 800*600
Comparsa barra
orizzontale
Layout liquido:
Visione compatta al
ridimensionamento
della pagina
Problemi riscontrati / Soluzioni adottate
 Errori vari: mancate
chiusure di tag,
omissione di
virgolette per i valori
degli attributi,
attributi sconosciuti
ecc..
 Controllo della validità
del linguaggio di
marcatura per ogni
pagina del sito

controllo automatico della
sintassi (Markup Validation
Service)
http://validator.w3.org/ .
Problemi riscontrati (3)
 Il testo non racchiuso in
paragrafi ma “libero”
nella pagina
 Errori nelle liste
 menu mal strutturati
<h1>Si.Tra. - SIstema di
TRAcciabilità </h1>
Attualmente il sistema
agroalimentare è interessato
da una profonda rivisitazione
in termini di sicurezza…
Soluzioni adottate (3)
 Rispetto della gerarchia delle intestazioni e aggiunta dello stile
al livello h3 nel css.
 Rivisitazione di tutte le liste ordinate <ol>, non ordinate <ul> e di
definizione <dl> all’interno delle pagine e inserimento di lista
non ordinata per il menu di destra, modifica della struttura a lista
del menu di sinistra. (FAQ e Disciplinari)
 Divisione dei testi in paragrafi <p> per facilitare chi utilizza
screen readers o browsers testuali.
ESEMPIO: MENU DX SENZA CSS
ESEMPIO: MENU DX PAG Si.Tra.
Migliorare la leggibilità del sito
 Ingrandita la dimensione del testo nel css
 Intestazioni in grassetto per il menù di sinistra
 Applicazione javascript che rispetta le regole del DOM
(Document Object Model) che permette all’utente di
personalizzare la dimensione del testo della pagina a
piacimento
Linea guida 2
 Punto di controllo 2.1 (Priorità 2):
Garantire che tutte le informazioni veicolate con il
colore siano disponibili anche senza colore, per
esempio attraverso il contesto o il codice di
marcatura.
 Punto di controllo 2.2 (Priorità 2):
Garantire che le combinazioni di colore di primo
piano e sfondo abbiano un sufficiente contrasto
quando viste da qualcuno con deficit nella visione dei
colori o su un monitor in bianco e nero.
Motivazione
2) Un documento non può essere considerato
accessibile, se le informazioni in esso contenute non
sono leggibili, o meglio usabili, anche in assenza di
colore.
Persone che usano browser testuali o monitor che alterano i
colori:
non vedenti,Ipovedenti
chiunque abbia una percezione alterata del colore
(protanomalia, deuteranomalia)
assenza totale della percezione dei colori (b/n)
tra cui anche anziani.
Problemi riscontrati
 Link nella pagina e nel menu di destra



non distinguibili dal testo e dai link gia visitati
non sottolineati, quindi dipendenti esclusivamente dal colore
poco contrasto con lo sfondo
 Titoli verdi su sfondo verde
 Immagine di sfondo troppo scura e frastagliata che
non garantisce un sufficiente contrasto con il testo

Potrebbe generare confusione per utenti ipovedenti
Esempio menù di destra
Soluzioni adottate
Utilizzo della barra dell’accessibilità e di programmi appositi per
analizzare il contrasto e la luminosità tra primo piano e sfondo.
Colour Contrast Analyser :
simula la visione da parte di persone con
patologie della vista e tramite un algoritmo proposto dal W3C visualizza i
risultati per la percezione alterata del colore.
Per superare il requisito è necessario che:

La differenza di luminosità fra primo piano e sfondo deve avere come
valore di soglia 125

La differenza di colore fra primo piano e sfondo abbia come valore di
soglia 500
Colour Contrast Analyser
Soluzioni adottate
 Schiarito colore di background nel foglio di stile
 Eliminato provvisoriamente lo sfondo
 Utilizzato un verde leggermente piu scuro per i titoli
 Ridefinito il colore dei link visitati e non, per
soddisfare il requisito
 Modificata la tonalità di arancione dello sfondo delle
celle di intestazioni di tabella su testo nero
 Modificata leggermente la tonalità di colore dello
sfondo dei menu’
Soluzioni adottate
 LINK
 Sottolineatura dei link per renderli indipendenti dal
colore e soddisfare il punto di controllo
 Aggiunte le proprietà a:visited e a:focus nel css
 per notificare che il link è stato visitato (corsivo e
viola)
 per rendere visibile la selezione di un link per mezzo
dei sistemi di puntamento (mouse/tastiera) o
alternativi (contrasto invertito).
Css per i link
/* hyperlinks */
a:link {
text-decoration: underline;
font-style: normal;
/*blu*/
color: #0000FF /*#1267bc*/ ; /*Primo piano:#0000FF Sfondo:#F2EAC3*/
/*Differenza di colore:536 (limite 500) / Differenza di luminosità:202 (limite 125)*/
}
a:visited { text-decoration: underline;
font-style: italic;
color: #4A004A /*#660066*/;
/*Differenza di colore: 523 / Differenza di luminosità:201*/
}
a:focus a:hover {
text-decoration:none;
font-style: italic;
color: white;
/*contrasto invertito se puntato*/
background: black;
}
Soluzioni adottate
Linea guida 13
Fornire chiari e coerenti meccanismi di
navigazione:
informazioni di orientamento, barre di
navigazione, una mappa del sito ecc.
Per aumentare le probabilità che una
persona trovi ciò che sta cercando in un sito.
Linea guida 13
 Punto di controllo 13.1 (Priorità 2):
Identificare chiaramente la destinazione di ogni
collegamento.

La chiarezza della destinazione dei link è utile per tutte le categorie di
utenti ma in soprattutto per utenti con disabilità di tipo visivo e
cognitivo.
 Punto di controllo 13.2 (Priorità 2):
Fornire metadati per aggiungere informazioni semantiche a pagine
e siti.
 Punto di controllo 13.3 (Priorità 2):
Fornire informazioni sull’organizzazione generale di un sito
(per esempio una mappa del sito o un sommario dei
contenuti)

Chi sviluppa siti accessibili non dovrebbe mai dimenticare di includere
una mappa del sito, avendo cura di porre un collegamento ad essa,
ben visibile, in tutte le altre pagine.
Linea guida 13 / 14

Punto di controllo 13.4 ( Priorità 2): Usare i meccanismi di navigazione in
maniera coerente.


È incoerente, per esempio, se i menu di navigazione cambiano di aspetto e di
posizione da una pagina all’altra.
Punti di controllo 14.3 (Priorità 3) : Creare uno stile di presentazione coerente
per tutte le pagine.
 Stessa posizione elementi distintivi della pagina per evitare spaesamento degli utenti
(menù navigaz ecc)

Punto di controllo 13.5 (Priorità 2): Fornire barre di navigazione per
evidenziare i meccanismi di navigazione e dare ad essi accesso.


se ben realizzata, è uno strumento di questo tipo: un oggetto distinto dal contenuto
informativo di un documento, e tale da comunicare chiaramente all’utente la sua
funzione.
Punto di controllo 13.6 (Priorità 2): Raggruppare i collegamenti correlati,
identificare il gruppo, e, finché non lo faranno i programmi utente, fornire un
modo per saltare il gruppo.

Garantire la chiarezza del testo del collegamento ipertestuale e la possibilità di saltare i
link ripetitivi nelle pagine (l’intestazione della pagina o la barra di navigazione) a
diverse categorie di utenti che utilizzano tecnologie assistive o hanno problemi di
mobilità.
Linea guida 13 / 12
 Punto di controllo 13.8
(Priorità 2):
Posizionare le informazioni
distintive all’inizio di
intestazioni, paragrafi,
elenchi ecc
L’organizzazione per titoli e paragrafi è
importante innanzitutto per chi usa una
sintesi vocale: permette una rapida
panoramica dei contenuti, senza essere
costretti a leggere tutto il testo del
documento.
Ma è importante anche per l’utente
comune, perché non c’è nulla di meno
accessibile alla lettura e alla comprensione
che trovarsi di fronte a un muro compatto
di parole, mai interrotto da un titolo o da
un a capo.
 Punto di controllo 12.3
(Priorità 2):
Dividere grandi blocchi di
informazioni
in gruppi più gestibili.
Motivazione
• 13.4) Uno stile di presentazione coerente su ogni pagina
permette agli utenti di localizzare i meccanismi di
navigazione più facilmente, ma anche di saltarli più
facilmente se è ciò che desiderano .
• 13.5) Se, infatti, gli elementi costitutivi della pagina si
ripetono in modo costante attraverso un sito, l’utente può
formarsi una mappa mentale di quelle caratteristiche: se
invece navigando, non le ritrova più, potrebbe credere di
essere giunto in un altro sito.
• 14.3 ) Garantire una percezione chiara degli elementi che
caratterizzano l’identità del sito che si sta navigando
(loghi, testata, menu, struttura grafica ecc.)
Problemi riscontrati
 Destinazione collegamenti non indicata:
 Link interni al sito
 Al altre pagine del sito stesso
 A documenti PDF o Jpeg

Link esterni ad altri siti
 Completa inaccessibilità per la pagina “Contatti”
 Mancanza dell’attributo “title” in tutti i link della pagina
e dei menù
 Nessuna mappa o sommario del sito
 Non è stata riscontrata la possibilità di saltare gruppi
di collegamenti e menù
 Struttura del sito non uniforme e coerente in tutte le
pagine (menu, contenuto, liste e link)
Soluzioni adottate
 Inserimento dell’attributo “title” in tutti i
collegamenti.
 Indicazione della destinazione di tutti i
collegamenti esterni della pagina.
 Indicazione del tipo di documento e
dimensione nei link che si riferiscono a
documenti esterni.
 Nella pagina contatti : inseriti i collegamenti
per l’apertura di caselle mail.
Esempio Link esterno nella Homepage
Esempio MENU’ Disciplinare Filiera Ittica
Non è indicato ne il tipo di documento, ne tanto meno la dimensione: scaricare un pdf di
10 MB senza saperlo in anticipo potrebbe mettere in crisi qualunque utente.
Esempio pagina Contatti
Esempio nella Homepage
Soluzioni adottate





Inclusione di una mappa del sito con relativo
collegamento nel menù di navigazione.
Ristrutturazione della barra di navigazione sinistra
e destra per renderle uniformi e distinguibili rispetto
al contenuto del sito.
Ricostruzione grafica e sintattica della barra
“Briciole di Pane” che traccia il percorso dell’utente
nel sito
Inserita la possibilità di saltare menù e gruppi di link
Organizzazione del testo in titoli e paragrafi per
agevolare la “lettura per sfioramento”.
Lettura per sfioramento
Organizzazione del testo in titoli e paragrafi
Questo aiuterà sia le persone che “sfiorano” i testi
visivamente sia quelle che usano sintetizzatori vocali.
“Sfiorare” [skimming] con la sintesi vocale significa
permettere all’utente di saltare da un’intestazione
all’altra, o di paragrafo in paragrafo, ed ascoltare il
minimo indispensabile di parole per determinare se il
blocco d’informazione corrente (titolo, paragrafo, link
ecc.) gli interessa.
Se l’idea principale del paragrafo è nel mezzo o alla
fine, gli utenti vocali sono costretti ad ascoltare la
maggior parte del documento prima di poter trovare
ciò che desiderano.

MENU’ e Mappa del sito
Home

Si.Tra.





Consumatori
Mondo Agroalimentare
Mondo Internet
FAQ
Contatti
(Fine HOME)
 Le Filiere

Latte Alta Qualità




Ittica





Approfondimenti
Rintracciabilità Pesce
Scirocco36
Punti vendita Pesce Scirocco36
Il Disciplinare
Carni Bovine




Rintracciabilita Latte AQ
Il Disciplinare
Le Aziende Aderenti
Rintracciabilità Carne Bovina
Punti Vendita BovinMarche
Vai al sito BovinMarche
Cereali

Il Disciplinare
(Fine FILIERE)
 Servizio Si.Tra.



Per i consumatori
Per il mondo agro
Per il mondo IT
(Fine SERVIZIO Si.Tra.)
 Eventi
 Dicono di noi
 Links
MENU ORIGINALE
MENU MODIFICATO
















- Decrementa
+ Incrementa
* Resetta
Home
Si.Tra.
FAQ
Contatti
Le Filiere
Latte Alta Qualità
Ittica
Carni Bovine
Cereali
Il Servizio Si.Tra.
Per i consumatori
Per il mondo agroalimentare
Per il mondo IT
Eventi
Dicono di noi
Links

Home




Si.Tra.
FAQ
Contatti
Mappa
(Fine HOME)
 Le Filiere




Latte Alta Qualità
Ittica
Carni Bovine
Cereali
(Fine FILIERE)
 Il Servizio Si.Tra.



Per i consumatori
Per il mondo agroalimentare
Per il mondo IT
(Fine SERVIZIO Si.Tra.)
 Eventi
 Dicono di noi
 Links
Saltare gruppo di collegamenti
MENU’
CSS
<div id="side">
<map title="Menu di Navigazione“ id="MenuNav">
<div id="nasc" class="nasc"><br />
<a href="#contenuto"
title="Salta il Menu di Navigazione">
[Passa al Contenuto]</a></div>
<ul> <li>…</li> </ul>
<div class="finelista">
(Fine HOME)</div>
…
<div id="content">
<a id="contenuto"></a>
<div id="sitemap">
<div class="nasc"><a href="#ctl00_SiteMapPath1_SkipLink"
title="Salta">[Passa al contenuto]</a></div>
<p class="quote">ti trovi in: <span
class="grass">Home</span></p>
</div>
<a id="ctl00_SiteMapPath1_SkipLink"></a>
<div id="titolo">
…
.nasc
{
width: 0;
height: 0;
position: absolute;
overflow: hidden;
top: -200em;
}
.finelista {
width:0;
height:0;
overflow:hidden;
top:-210em;
}
Senza CSS
MENU DX MODIFICATO (lista link)
MENU DX ORIGINALE (link liberi)
Altre Info
 Filiera Ittica
 Approfondisci
 Rintracciabilità breve
 Punti vendita Scirocco36
 Il Disciplinare
Altre Info
Download
 Disciplinare Filiera Ittica
[pdf 10.5 MB]
Punti vendita Scirocco36
La filiera Ittica
Approfondimenti
Rintracciabilità breve
Il Disciplinare
Download
Disciplinare Filiera Ittica
Linea guida 5
Garantire che le tabelle abbiano la
necessaria marcatura per essere trasformate
da browser accessibili e da altri programmi
utente.
Linea guida 5
 Punto di controllo 5.1 (priorità 1)

Per le tabelle di dati, identificare le intestazioni di riga e colonna.
 Punto di controllo 5.2 (priorità 1)

Per le tabelle di dati che hanno due o più livelli logici di intestazioni di
riga o di colonna, usare la marcatura per associare celle di dati e celle
d’intestazione.
 Punto di controllo 5.3 (priorità 2)

Non usare le tabelle a scopo d’impaginazione, a meno che non
abbiano senso quando linearizzate. Altrimenti, se la tabella non ha
senso, fornire un’alternativa equivalente (che può essere una versione
linearizzata).
 Punto di controllo 5.4 ( priorità 2)

Se una tabella è usata a scopo d’impaginazione, non usare alcuna
marcatura strutturale per ottenere effetti di formattazione visuale.
 Punto di controllo 5.5 (priorità 3)

Fornire sommari per le tabelle.
 Punto di controllo 5.6 (priorità 3)

Fornire abbreviazioni per le etichette delle celle d’intestazione.
Motivazioni
 possibilità per gli utenti con deficit nella vista di
navigarne i contenuti consentendo di collegare una
determinata cella di dati alla relativa cella di
intestazione.
 Agevolare chi utilizza Screen Readers o Browsers
testuali che non possono comprendere bene una
struttura tabellare preferendone una versione lineare
 Gli utenti non vedenti, ricevendo informazioni
descrittive dei contenuti grazie all’attributo summary,
potranno così valutare se fruire il contenuto della
tabella o passare oltre.
Problemi riscontrati
 Tabelle dati con false intestazioni non
marcate con l’opportuno elemento <th>
 Anche se si tratta di tabelle semplici le celle di
intestazione non erano collegate con le
relative celle di dati.
 Mancanza dell’attrib “summary”
 Tabelle utilizzate impropriamente a scopo di
impaginazione con uso errato di elementi
<hr> (homepage)
Soluzioni adottate
 Uso dell’elem. <th>per le celle di intestazione
 Uso degli attributi “headers” e “id”
 Raggruppare le intestazioni e il corpo della tabella
per mezzo di <thead> <tbody> <colgroup>
 Uso dell’attributo “sumary” per chi legge le tabelle in
modalità non visuale (guida all’ utente sul contenuto
e sull’ organizzazione della tabella dati)
 Fornitura di una versione linearizzata per ogni tabella
 Uso del foglio di stile per definire la presentazione
degli elementi della tabella
Esempio nella Homepage
TABELLA A SCOPO DI IMPAGINAZIONE
IMPAGINAZIONE TRAMITE I DIV
Esempio rintracciabilità Scirocco36
Esempio rintracciabilità Scirocco36
Punto di controllo 4.3 (priorità 3)
 Identificare la lingua principale di un
documento.
Motivazione
 Le informazioni sulla lingua sono utili per:
 strumenti autoriali, strumenti di traduzione,
accessibilità, selezione dei caratteri, resa della pagina,
ricerca e scripting.
Soluzioni adottate
< html xmlns="http://www.w3.org/1999/xhtml"
lang="it" xml:lang="it“ >
Etichette per moduli
 Punto di controllo 10.2 (priorità 2)
Fino a quando i programmi utente non
supporteranno l’esplicita associazione tra
etichette e controlli di modulo, per tutti i
controlli di modulo che hanno etichette
associate in modo implicito, garantire che
l’etichetta sia posizionata correttamente.
 Punto di controllo 12.4 (priorità 2)
Associare le etichette ai loro controlli in modo
esplicito.
Motivazione
Uso di <LABEL>: marcare le etichette di un
modulo è una precauzione essenziale
per l’accessibilità.


consente alle tecnologie assistive di indicare
senza ambiguità all’utente qual è la funzione di
un campo di input.
permette il trasferimento diretto del focus
dall’etichetta al campo.
 selezionando l’etichetta, si può subito scrivere un
valore nel campo di input a essa associato
altrimenti difficilmente selezionabile da utenti
ipovedenti o con disabilità motorie.
Soluzioni adottate
Il requisito chiede di garantire la fornitura di
informazioni che garantiscono a tutti gli utenti di poter
utilizzare i moduli contenuti in una pagina web.
 Uso dell’ elemento <LABEL>
(per identificare le etichette dei campi modulo)
 con gli attributi specifici


“id” :elemento da associare
“for” :associa l’etichetta al
campo modulo corrispondente
Al click sull’etichetta il focus passa direttamente al
campo text desiderato
Esempio
<h2>Rintraccia il prodotto</h2>
Inserisci la data di scadenza
(gg/mm/aaaa): <br />
<input
name="ctl00$Contenuto$txtd
ata" type="text"
id="ctl00_Contenuto_txtdata"
/>
<input type="submit"
name="ctl00$Contenuto$But
ton1" value="Trova"
id="ctl00_Contenuto_Button
1" />
<h2 class="nero">Rintraccia il
prodotto</h2>
<label for="txtdata">
Inserisci la data di scadenza
(gg/mm/aaaa):
</label> <br />
<input name="$txtdata"
type="text" id="txtdata" />
<input type="submit"
name="$Button1"
value="Trova" id="Button1"/>
Sviluppi futuri
USABILITA’:
è la disciplina che si frappone tra l'utente e il l’interfaccia
stessa.
Una definizione che mi piace:
 ciò che chiede all'utente
di un sito di pensare il
meno possibile ,
fornendogli un ambiente nel quale può
muoversi a suo agio, trovando senza
sforzo ciò che gli serve.
Test di USABILITA’
Come migliorare l'usabilità?
Facendo user testing.
L'usabilità si misura con cinque indici di qualità (Jakob Nielsen):
 Facilità di apprendimento: Quanto è semplice per gli utenti




portare a termine semplici task la prima volta che vedono la user
interface?
Efficienza: Una volta che gli utenti hanno imparato ad utilizzarla,
con quanta rapidità riescono a portare a termine i task?
Facilità di memorizzazione: Dopo un certo periodo che non si usa
la user interface, quanto è facile ricordarsi come si utilizza?
Errori: Quanti errori l'utente commette? Con quale gravità?
Soddisfazione: Quanto è piacevole usare la user interface?
WCAG 2.0
Le Web Content Accessibility Guidelines 2.0 sono una
evoluzione delle WCAG 1.0, e, per quanto i principi
ispiratori siano gli stessi, sono strutturate
diversamente in modo da semplificare il lavoro degli
sviluppatori.
Le nuove linee guida tendono in definitiva, a superare
l'incertezza nella valutazione della conformità, che è
ineliminabile nelle WCAG 1.0.
Sono attualmente a livello di Working Draft
(in fase di raffinamento).
Considerazione finale
 Tutti hanno il diritto di navigare liberamente
nel web che ormai è diventata la fonte
primaria di informazione e sarebbe ingiusto
non permettere a persone meno fortunate di
esplorare questo mondo, quando esistono
alcuni accorgimenti per rendere il tutto più
accessibile.